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

项目创建

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

相关配置

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

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

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

2. 路由配置
   在项目的 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: 'about',
                name: 'about',
                component: defineAsyncComponent(() => import('../views/about/index.vue')),
              },
              {
                path: 'news',
                name: 'news',
                component: defineAsyncComponent(() => import('../views/news/index.vue')),
              },
            ]
        },
          {
            path: '/my',
            component: defineAsyncComponent(() => import('../views/my.vue')),
            meta: {
                title: '我的',
            },
        },
    ]
})
export default router

3. 在 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')