使用vite創建vue3項目，完整項目（路由，vuex，setup，element-plus的使用）

1.創建vue3項目 https://www.cnblogs.com/luckybaby519/p/16155484.html

2.安裝路由（根據官網安裝element-plus。main.js中配置：官網地址：https://element-plus.gitee.io/zh-CN/guide/installation.html#%E4%BD%BF%E7%94%A8%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8）

npm install vue-router@4

安裝element-plus

npm install element-plus --save

 

main.js中配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import router from './router/index'
import App from './App.vue'

const app= createApp(App)
app.use(ElementPlus)
app.use(router)



app.mount('#app')

 

3.新建視圖

 

 4.test1.vue 內容

 

 5..test2.vue 內容

 

 6.創建路由配置文件，布局文件

 

6.1路由index.js內容

import {createRouter, createWebHistory} from 'vue-router'
import layout from '../layout/index.vue'
const routes = [
    {   
        path: '/',
        name: '/',
        component:layout,

          redirect: '/test1',

        children: [  
        {
            name: 'test1',
            path: '/test1',
            title: '首頁',
            component: () => import('../views/test1.vue')
        },
        {
            name: 'test2',
            path: '/test2',
            title: '詳情',
            component: () => import('../views/test2.vue')
        },
        ]
    },
    
    
    
];
const router = createRouter({
    history: createWebHistory(), 
    routes
})
 
export default router

6.2 routes.js內容

const routes = [
    {
        name: 'test1',
        path: '/test1',
        component: () => import('@/view/test1.vue')
    },
    {
        name: 'test2',
        path: '/test2',
        component: () => import('@/view/test2.vue')
    },
    
];
 
export default routes

6.3 layout index.vue內容(vue3不在使用this)

<script> import { useRouter, useRoute } from "vue-router";
export default {
  setup() {
    const router=useRouter()
  
    const gotoTest = (index) => {
      if (index == 1) {
        router.push("/test1");
      }
      if (index == 2) {
       router.push("/test2");
      }
    };

    return {
      gotoTest,
    };
  },
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-button @click="gotoTest(1)" type="primary">test1</el-button>
        <el-button @click="gotoTest(2)" type="primary">test2</el-button>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

7.app中配置路由視圖

<template>
  <router-view></router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 效果如下

8.安裝vuex4

npm install vue-router@4

創建vuex文件

8.1main.js配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import store from './store'
import router from './router/index'
import App from './App.vue'

const app= createApp(App)
app.use(ElementPlus)
app.use(store)
app.use(router)



app.mount('#app')

 

8.2.store   index.js下內容 

import { createStore } from 'vuex'
import text from './modules/text' 

import getters from './getters'
export default createStore({
  modules: { 
   text,
  
  },
  getters
})

8.3.getters.js內容

const getters = {
    text: state => state.text.text,
}
export default getters

8.4.text.js內容

const state = {
    text:'我為你許了一個願。'
}
const mutations = {
    SET_TEXT:(state,text)=>{
        state.text = text;
    }
}
const actions = {
}

export default{
    
    state,
    mutations,
    actions
}

8.5視圖中配置（我用的前面創建的test1 視圖）

<script>
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
 const text=store.getters.text
    return {
      store,
      text,
    };
  },
};
</script>

<template>
  <div>
    你看天邊有流星划過
    {{text}}
  </div>
</template>

效果如下