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

1.创建vue3项目 

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,

        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)

7.app中配置路由视图

 效果如下

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 视图）

效果如下