使用vite搭建vue3.2项目，包含vuex+router+element-plus+ts；项目初始化完整版教程

项目创建 全局安装项目
命令： npm install create-vite-app -g
敲完命令后，会d出如下提示：

根据提示信息，自己选择，使用 npm 去创建项目，或者使用 yarn。创建项目
这里我使用了 npm。命令： npm install create-vite-app -g。敲完命令后，会d出如下项目创建的选择，可以自行进行选择，这里我全部选择了默认，如下所示：
安装项目所需依赖包
使用命令 cd vite-project 切换到我们创建好的项目目录下，使用命令 npm i安装项目的依赖包安装 vuex
命令： npm install vuex@next --save安装路由
命令： npm install vue-router安装elementUI库
因为项目是vue3.2版本的，所以这边配套使用的UI库是elment-plus版本的，直接使用命令 npm install element-plus --save安装即可；
更多组件使用可参考elment-plus官网详细介绍，
地址：https://element-plus.gitee.io/zh-CN/安装 axiso 网络请求
命令： npm install axios -S运行项目
全部安装完成后，使用命令npm run dev 即可运行项目。 相关配置

创建项目时，安装了很多依赖，比如UI库路由等，这些在页面当中使用，需要进行配置，如下所示。

vuex 配置
在 项目的 src 目录下新建一个 store文件夹，用来配置 vuex的相关信息，然后在 store文件夹下新建一个 index.js，所需的文件都可在这里进行配置，如下所示，我随便配置了几个。

import  {createStore} from 'vuex';
const store = createStore({
    state: {
        isVip: true,
    },
    mutations: {
        setVipStatus(state, param) {
            state.isVip= param
        }
    },
    actions: {},
    getters: {}
})
export default store

路由配置
在项目的 src 目录下新建一个 router文件夹，用来配置 router的相关信息，然后在 router文件夹下新建一个 index.js，项目使用的路由都可在这里进行配置，如下所示，我随便配置了几个。

import { createRouter, createWebHashHistory } from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            component: defineAsyncComponent(() => import('../views/index.vue')),
            meta: {
                title: '首页',
            },
            children: [{
                path: 'template',
                name: 'template',
                component: defineAsyncComponent(() => import('../views/template/index.vue')),
              },
              {
                path: 'pattern',
                name: 'pattern',
                component: defineAsyncComponent(() => import('../views/pattern/index.vue')),
              },
            ]
        },
          {
            path: '/my',
            component: defineAsyncComponent(() => import('../views/my.vue')),
            meta: {
                title: '我的',
            },
        },
    ]
})
export default router

在 main.js 当中去挂载我们使用的配置。

// 引入公共的样式文件
import './assets/style/common.less'; 
import { createApp} from 'vue'
import App from './App.vue'
// 挂载路由
import router from './router'
// vue状态管理
import store from './store/index'
// ele-plus UI库
import ElementPlus from 'element-plus'
//  ele ui样式
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus).use(router).use(store);
app.mount('#app')