【VUE3】vue3.0项目配置

vue3 + vite + TS + vue-router + vuex + less + 组合式API + 多语言vue-i18n

vue3安装

安装最新稳定版

$ npm install vue@next

用vite创建项目

vite不需要单独安装

npm init vite-app my_project
cd my_project
npm install 
npm run dev
// 浏览器中打开localhost:3000，即可看到启动的项目

TypeScript配置

vue3+vite+ts在配置过程中会报错，找不到App.vue模块相应的类型声明，等配置完成即可解决。

1. /src/main.js，重命名为/src/main.ts
2. /src/index.html，引入的main.js，改成main.ts
3. /src/App.vue，

   // b.vue
   
   
   
   
   
   

   3. 创建路由文件/router.ts

   import {createRouter, createWebHistory} from "vue-router";
   
   // 懒加载：component的值是函数
   const routes = [
     {path: '/', component: () => import('./pages/a.vue')},
     {path: '/b', component: () => import('./pages/b.vue')}
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes,
     // 切换页面后，返回顶部
     scrollBehavior() {
         return {top: 0}
     }
   });
   
   // 权限检查
   function canUserAccess(){
     return new Promise(resolve => {
         return resolve(true)
     })
   }
   
   router.beforeEach(async (to, from,next) => {
     // 获取菜单、用户信息、调用store等异步操作
   
     // 检查权限，true继续，false进入登录
     let isAllow = await canUserAccess()
     isAllow ? next() : next({name:'login'})
   })
   
   
   export default router;
   

   4. 挂载到vue
      修改/main.ts

   import { createApp } from 'vue'
   import router from './router'
   import App from './App.vue'
   import './index.css'
   
   const app = createApp(App);
   app.use(router)
   app.mount('#app')
   

   状态管理器配置vuex

   1. 安装

   npm install vuex@next
   

   2. 创建文件
   • /src/store/index.ts
     */src/store/modules/users.store.ts

   
   ````js
   // /src/store/index.ts
   import {createStore, useStore as baseUseStore, Store} from "vuex";
   import {InjectionKey} from 'vue'
   
   export interface State {
       count: number,
       name: string
   }
   
   export const key: InjectionKey> = Symbol();
   
   
   const state = {
       count: 0,
       name: 'cq'
   }
   
   const getters = {
       name1(state: State) {
           return state.name
       }
   }
   
   const mutations = {
       increase(state:State){
           state.count++
       }
   }
   
   const actions = {
       // @ts-ignore
       add({commit}){
           commit('increase');
       }
   }
   
   export const store = createStore({
       state,
       getters,
       mutations,
       actions,
   })
   
   export function useStore() {
       return baseUseStore(key)
   }
   

   // /src/store/modules/users.store.ts
   interface IState {}
   
   const state:IState = {}
   const getters = {}
   
   const mutations = {}
   
   const  actions = {}
   
   export default {
       state,
       getters,
       mutations,
       actions
   }
   
   

   3. 修改main

   
   import { createApp } from 'vue'
   import router from './router'
   import {store,key} from './store/index'
   import App from './App.vue'
   import './index.css'
   
   const app = createApp(App);
   app.use(router)
   app.use(store,key)
   app.mount('#app')
   

   Less

   1. 安装

   npm install less less-loader --dev
   

   2. style标签加入lang=less

   未解决的问题：
   同一个文件使用@import导入两个文件，第二个失效

   多语言vue-i18n

   1. 安装

   npm install vue-i18n@next
   

   2. 创建目录、文件

   • /src/language/zh.language/index.ts 中文语言包的输出文件
   • /src/language/zh.language/modules/home-page.language.ts 将内容通过模块划分，一个模块一个文件
   • /src/language/en.language/index.ts
   • /src/language/en.language/modules/home-page.language.ts
   • /src/language/index.ts 整个语言包的输出文件

   // /src/language/zh.language/index.ts
   import home_page from './modules/home-page.language'
   
   export default {
       example: '语言包示例',
       home_page
   }
   

   // /src/language/zh.language/modules/home-page.language.ts
   export default {
       title:'首页',
       // 一个component一个对象
       navs:{
           list:[],
           name:'nav list'
       },
   
   }
   

   // /src/language/zh.language/modules/home-page.language.ts
   import home_page from './modules/home-page.language'
   export default {
       example: 'language package example',
       home_page
   }
   

   // /src/language/en.language/modules/home-page.language.ts
   export default {
       title:'home page',
       navs:{
           list:[],
           name:'nav list'
       }
   }
   

   // /src/language/index.ts
   import {createI18n} from "vue-i18n";
   
   import zh from './zh.language/index'
   import en from './en.language/index'
   
   const messages = {zh, en}
   
   // 判断当前浏览器是哪种语言
   const language = (
       (navigator.language
           ? navigator.language
           // @ts-ignore
           : navigator.userLanguage)
       || 'zh'
   ).toLowerCase();
   
   const i18n = createI18n({
       fallbackLocale: 'zh',
       globalInjection: true,
       legacy: false,
       locale: language.split("-")[0] || 'zh',
       messages
   })
   
   export default i18n;
   

   3. 引入vue

   在mian.ts中引入语言包

   import i18n from "/@/language/index";
   app.use(i18n);
   

   4. vue页面中使用

   
   {{$t(`example`)}} 
   {{$t(`home_page.title`)}}
   
   

   多语言配置完成