该框架基于vue3+vite2，配置了element-plus+vue-router+sass+vuex，后续还会继续完善~

一、初始化

1. 按照官方文档的步骤，我这里是用vite来构建项目，且本地npm版本为7+，使用命令npm init vite@latest vue3-pc -- --template vue初始化一个命名为vue3-pc的项目
2. npm i 以及 npm run dev 就可将项目跑起来，如下图：

二、引入element-plus UI

1. 使用命令行安装element-plus: cnpm i --save elemnt-plus;
2. 全局引入element-plus：进入main.js中，引入element-plus，按照官方说的引用element的css文件是这么写的：import 'element-plus/theme-chalk/lib/index.css'，但是报错，看了下node_modules中，发现theme-chalk文件夹是直接放在element-plus目录下的，不是在lib中

   import { createApp } from 'vue'
   import App from './App.vue'
   const app = createApp(App)
   
   import ElementPlus from 'element-plus'
   import 'element-plus/theme-chalk/index.css'
   app.use(ElementPlus)
   
   app.mount('#app')
   

   按照上面的引入之后，页面中就可正常使用了，如下：

   <template>
     <h1>{{ msg }}</h1>
     <el-button type="primary" @click="count++">count is: {{ count }}</el-button>
   </template>
   

   运行后打开页面可看到效果
3. 测试构建：运行vite build脚本，成功打包生成dist文件夹，进入dist中，用hs模拟启动，启动成功，如下图 打开IP地址，也可正常访问到

三、引入sass

1. 依次安装node-sass: cnpm i node-sass --save-dev，sass: cnpm i sass --save-dev，一个一个安装太慢了，后面几个我是一次性安装上去的：cnpm i sass-loader style-loader style-resources-loader --save-dev
2. 上面的安装成功后，在页面中局部使用scss

   $text-color: purple;
   .msg{
     color: $text-color;
   }
   

   运行，页面上看到效果：
3. 基于以上，要全局引入scss样式和定义全局变量时，在assets中新建一个文件，放全局样式，之后在vite.config.js中引入全局外部样式

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     css: {
       preprocessorOptions: {
         scss: {
           additionalData: `@import "./src/assets/scss/variable.scss";`
         }
       }
     },
     pluginOptions: {
       'style-resources-loader': {
         preProcessor: 'sass',
         patterns: []
       }
     },
     plugins: [
         vue(),
   
     ],
     build: {
   
     }
   })
   

   variable.scss中定义了全局变量 $color-primary: #28cccc; 在页面中直接使用color: $color-primary;效果如下：
4. 以上配置完成后，build之后再运行，无问题
5. 第3步中，引入全局scss文件时，若想使用@别名，也可通过配置完成，配置如下

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   // https://vitejs.dev/config/
   export default defineConfig({
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
         'views': path.resolve(__dirname, 'src/views')
       }
     }
   })
   

   配置好别名后，重启项目。
6. 网上看到有些需要另外去引入path模块的，很奇怪，我这边不用也能成功配置别名，先存个疑，后面来跟进下~

四、引入vue-router

1. cnpm i vue-router@next --save安装依赖

2. src目录下，新建router文件夹存放路由，在index.js中加入以下代码，于此同时，也将首页跟登录页新建好；注意路由的mode配置有history和hash模式，以下是配置的history模式，该模式需要后端也配置参数，用于需要服务端渲染的项目。

   import { createRouter, createWebHistory } from 'vue-router'
   export default createRouter({
       history: createWebHistory(),
       routes: [
           {
               path: '/',
               component: () => import('views/index.vue')
           },
           {
               path: '/login',
               component: () => import('views/login.vue')
           }
       ]
   })
   

   若要改为用hash模式，引入createWebHashHistory且注册时使用：history: createWebHashHistory()

3. 在入口文件main.js中引入路由，代码如下：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router/index'
   import ElementPlus from 'element-plus'
   import 'element-plus/theme-chalk/index.css'
   
   
   const app = createApp(App)
   
   app.use(ElementPlus)
   app.use(router)
   app.mount('#app')
   

4. App.vue中加入<router-view />标签

5. 重启就能看到效果啦

   

6. 另外的，在函数式组件setup中若需要使用this.$router()或this.$route() (vue2)方法，需要相应的引入import { useRoute, useRouter } from 'vue-router'，用useRouter和useRoute来代替使用

五、引入Vuex状态树管理

1. 安装依赖：cnpm i vuex@next --save，点击可跳转至Vuex官方文档
2. vue3对应的Vuex也要升级到4.x版本，写法上也要使用组合式API的写法；以下的Vuex样例，使用了带命名空间的模块，具体可看下官方文档，Vuex官网上也链接了一些案例：github示例的地址； 样例的目录结构为：分2个模块，分别是modules中的userInfo模块和common模块，设置命名空间：namespaced: true，其余写法跟Vuex3.x一样，在index.js中再分别引入，引入方法是通过createStore({modules: {XXX}})来引入
3. 在main.js中全局引入，代码如下：

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

const app = createApp(App)

app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')

4. 在页面文件中，他的调用方法基本跟Vuex3.x一致，不同的是Vue4.x多了个具名模块的调用；
   • 若通过store拿状态值的话，需要在setup(){}中return出来
   • 若要使用带命名空间的模块内的方法，需要传参模块名，如下：mapMutations跟mapActions都是通过第一个传参指定某个带命名空间的模块；

   import { mapMutations, mapState } from 'vuex'
   export default {
       setup () {
   
       },
       data() {
           return {
               title: '登录页'
           }
       },
       computed: {
           ...mapState({
               userId: state => state.userInfo.userId
           })
       },
       methods: {
           ...mapMutations('userInfo', [
               'SET_USERID',
           ])
       }
   }
   

   • 带命名空间模块的引用也可通过createNameSpacedHelpers来创建基于命名空间的辅助函数，它返回一个对象，对象中包含mapState`mapMutations`等辅助函数

   import { createNamespacedHelpers } from 'vuex'
   const { mapMutations, mapState } = createNamespacedHelpers('userInfo')
   export default {
       setup () {
   
       },
       data() {
           return {
               title: '登录页'
           }
       },
       computed: {
           ...mapState({
               userId: state => state.userId
           })
       },
       methods: {
           ...mapMutations(['SET_USERID'])
       }
   }
   

5. 运行起来后可看到
6. 关于持久化存储的，这边没有配置，可自行安装下这个插件vuex-persistedstate

六、其它的配置

之后会来加上eslint（规范代码格式）以及husky（提交自动校验代码格式）等其它，祥见下一篇哦；