基于Vue3.0和ElementPlus开发后台框架(login+back+i18n)

10 开始步骤

参照上一篇文章，执行如下步骤

• 安装最新版(16)nodejs
• path中增加npm执行路径
• npm init @vitejs/app myproj --template vue-ts，cd myproj，npm install，npm run dev  测试工程  

         2023年09月05日补充 ：@vitejs/create-app is deprecated, use npm init vite instead

        npm init vite lmesv1 --template vue-ts

• npm install element-plus --save  
• npm install @element-plus/icons-vue  
• npm install less -D  
• npm install axios  
• npm install vuex@next --save  
• npm install vue-router@next --save  
• npm install vue-i18n@next  --save 或npm install vue-i18n -S  加入国际化，或npm install vue-i18n@next   
•  

20 构建路由框架

20.10 组织空页面

建立src\back空目录，增加login.vue(前文已有代码) 以及如下vue

back.vue, back_header.vue, back_menu.vue, db_add.vue , db_edit.vue , db_del.vue,db_list.vue

在login.vue里增加<h1>login</h1>，以用于测试首页。

注意有些标签大写如<H1>login</H1>, 会触发浏览器警告：

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

20.20 组织路由

建立src\router目录以及index.ts文件

import {createRouter,createWebHashHistory} from "vue-router";
import login from "../back/login.vue"
import back from "../back/back.vue"
import db_add from "../back/db_add.vue"

const routes=[
    {path:"/",        redirect:'/login'},
    {path:"/login",   component:login},
    {path:"/back",    component:back,
        children:[
            {path:"/back/db_add",    component:db_add},
        ]
    }
]
export default createRouter({history:createWebHashHistory(),routes})

20.30 修改main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import axios from 'axios'

const app = createApp(App).use(router).use(ElementPlus,{locale})
app.config.globalProperties.myaxios = axios
app.mount("#app")
//createApp(A