轉自“前端進階之旅” 2021-12-16的一片文章码泞。
介紹
本文主要介紹 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建袁滥。
創(chuàng)建 vite 項目
執(zhí)行創(chuàng)建命令
執(zhí)行 vite 項目創(chuàng)建命令，在創(chuàng)建導航過程中哗伯，選擇 vue+ts 模式稍浆。
yarn create vite
yarn
yarn dev
修改 vite 配置文件
當以命令行方式運行 vite 時逝嚎，vite 會自動解析項目根目錄下名為 vite.config.js 的文件臭家。這里呵恢，我們簡單設置一下將 @ 指向 src 以及開發(fā)時與后端聯(lián)調必須進行的proxy代理設置。其它配置參數(shù)可參考官網墓赴。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 編輯器提示 path 模塊找不到竞膳，可以yarn add @types/node --dev
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src') // 設置 `@` 指向 `src` 目錄
}
},
server: {
port: 3000, // 設置服務啟動端口號
open: true, // 設置服務啟動時是否自動打開瀏覽器
// 代理
proxy: {
'/api': {
target: 'http://API網關所在域名',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
}
})
安裝 vue-router
執(zhí)行安裝命令
yarn add vue-router@4
創(chuàng)建router文件
創(chuàng)建 src/router/index.ts 文件，創(chuàng)建路由時诫硕，建議使用路由懶加載坦辟，優(yōu)化訪問性能。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue') // 建議進行路由懶加載章办，優(yōu)化訪問性能
},
{
path: '/demo',
name: 'demo',
component: () => import('@/views/Demo.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
引入router
在 main.ts 文件中 vue 示例中 use router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).mount('#app')
使用 router-view 組件
在 App.vue 文件中使用 router-view 組件锉走，路由匹配到組件會通過 router-view 組件進行渲染滨彻。
<template>
<router-view />
</template>
安裝vuex
執(zhí)行安裝命令
yarn add vuex@next
創(chuàng)建store文件
創(chuàng)建 src/store/index.ts 文件
import { createStore } from 'vuex'
const defaultState = {
count: 0
}
const store = createStore({
state () {
return {
count: 0
}
},
mutations: {
increment (state: typeof defaultState) {
state.count++
}
}
})
export default store;
引入vuex
在 main.ts 文件中 vue 示例中 use store，這樣我們就可以在頁面編碼中使用全局狀態(tài)管理插件 vuex 啦挪蹭。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
createApp(App).use(router).use(store).mount('#app')
安裝UI庫 ant-design-vue或者element-ui
跟router安裝亭饵、引用、使用一樣 就不過多贅述了嚣潜。
安裝axios
跟router安裝冬骚、引用、使用一樣 就不過多贅述了懂算。此處建議封裝業(yè)務接口到專門的文件，攔截器啥的跟vue2差不多庇麦。
安裝 mock 工具
mock 模擬數(shù)據(jù)我們選用 mockjs 插件计技，vite 中需要安裝 vite-plugin-mock 插件。
執(zhí)行安裝命令
yarn add mockjs
yarn add vite-plugin-mock -D
vite.config.ts 中引用插件
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({
plugins: [
viteMockServe({ supportTs: true })
],
})
使用 mock
在 src/mock 文件中創(chuàng)建 index.ts 文件山橄，添加如下代碼示例代碼
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/getList',
method: 'get',
response: () => {
return {
code: 0,
message: 'ok',
data: ['aa', 'bb']
}
}
},
] as MockMethod[]
這樣我們就可以在工程中進行 mock 數(shù)據(jù)的訪問了垮媒，這里我們使用在前文中創(chuàng)建公共 api 請求方法 request。
import request from "@/utils/request.ts"
request('/api/getList').then(res => {
console.log(res);
})
結束
到此航棱，一個簡單實用的 vite + vue3 工程就搭建完畢了睡雇，當然，前端工程里還必不可少代碼規(guī)范工具及單元測試工具等饮醇，可以根據(jù)需要自行補充它抱。
