框架

最開始使用的是vite丸逸，但是后面改用了vue-cli4，為什么改用剃袍，后續(xù)會說明黄刚，使用vue-router4，element-plus民效，vuex4憔维，axios侍芝，vuex-persistedstate（持久化儲存）。

搭建步驟##

• 安裝node埋同，官網(wǎng)直接下載安裝包安裝
• 安裝vue-cli4州叠，npm install -g @vue/cli
• 安裝vue-router4，npm install vue-router@4 --save
• 安裝element-plus凶赁，npm install element-plus --save
• 安裝vuex4咧栗，npm install vuex@next --save
• 安裝axios，npm install axios --save
• 安裝vuex-persistedstate虱肄，npm install vuex-persistedstate --save

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { store } from './store'

//引入配置顏色的css
import './assets/css/configColors.css'
//引入初始化css
import './assets/css/init.css'
//引入修改element的css
import './assets/css/modifyElement.css'

const app = createApp(App).use(router).use(store); // 掛載

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus, { size: 'small', zIndex: 5000 });

app.mount('#app')

模式配置

在根目錄新建.env文件致板，再新建.env.模式名字文件，在package.json里scripts對象中添加快捷方式咏窿，假設(shè)：項目中我有個鴻蒙模式斟或，那么我新建.env默認(rèn)模式文件后，再新建一個.env.hongmeng文件集嵌，在package.json里scripts對象中添加"build-hongmeng":"vue-cli-service build --mode hongmeng"萝挤，當(dāng)我項目中需要打包鴻蒙模式的代碼時我就可以執(zhí)行npm run build-hongmeng，在模式文件中定義好變量根欧，可以在項目當(dāng)中使用變量控制不同模式下加載不同業(yè)務(wù)怜珍，變量格式VUE_APP_開頭，例子：VUE_APP_NAME=hongmeng

根據(jù)模式不同加載不同業(yè)務(wù)

模式配置完成后凤粗，寥寥幾個變量并不滿足業(yè)務(wù)酥泛，我們可以使用require(`./business/${process.env.VUE_APP_NAME}.js`)
新建不同的業(yè)務(wù)文件，使用變量來加載不同的業(yè)務(wù)文件嫌拣，實現(xiàn)業(yè)務(wù)分離出去柔袁；

問題

• 使用require來加載文件是因為import 加載文件方式無法實現(xiàn)，import路徑url無法使用變量替代异逐；
• 最開始的時候使用vite捶索，確實，速度不是vue-cli腳手架可比的应役，然而當(dāng)我require文件時情组，報錯后（恕我無能為力），我就改用了vue-cli
• 我的router使用的是history模式箩祥，路由是動態(tài)添加上去的，當(dāng)我使用onBeforeRouteLeave無法觸發(fā)此函數(shù)肆氓，但onBeforeRouteUpdate這個卻可以觸發(fā)
• vuex的問題比較嚴(yán)重袍祖，使用useStore()方法得到undefined，我測試在其它vue文件使用谢揪，也是一樣蕉陋，還好后來有了解決方案捐凭。問題部分代碼：

        import { ref, reactive, getCurrentInstance } from "vue";
    import { ElMessage } from 'element-plus';
    import { useRouter } from 'vue-router';
    import { useStore } from 'vuex';
    export default {
        name: 'login',
        setup(props, context) {
            const store = useStore();
            console.log(store) // ----undefined
            const router = useRouter();
            //引入vue實例
            const { ctx } = getCurrentInstance();
            const rules = require(`./rules/${process.env.VUE_APP_NAME}.js`);
            const business = require(`./business/${process.env.VUE_APP_NAME}.js`);
                        const businessResult = business.loginBusiness();
            const InitObj = businessResult.resetYzm();
            const yzmRandom = ref(InitObj.yzmRandom);
            const yzmSrc = ref(InitObj.yzmSrc);
            const resetYzm = () => {
                const Obj = businessResult.resetYzm();
                yzmRandom.value = Obj.yzmRandom;
                yzmSrc.value = Obj.yzmSrc;
            };
            const FormRef = ref(null);
                        const Rule = {
                userName: [{
                    validator: rules.checkUserName,
                    trigger: 'blur'
                }],
                password: [{
                    validator: rules.checkPassword,
                    trigger: 'blur'
                }]
            };
            const loginForm = reactive({
                userName: '',
                password: '',
                yzm: ''
            });
                        return {
                loginForm,
                FormRef,
                Rule,
                yzmRandom,
                yzmSrc,
                resetYzm,
            };
                }
        }