转自“前端进阶之旅” 2021-12-16的一片文章。
介绍
本文主要介绍 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。
创建 vite 项目
执行创建命令
执行 vite 项目创建命令，在创建导航过程中，选择 vue+ts 模式。
yarn create vite
yarn
yarn dev
修改 vite 配置文件
当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。这里，我们简单设置一下将 @ 指向 src 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。
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
执行安装命令
yarn add vue-router@4
创建router文件
创建 src/router/index.ts 文件，创建路由时，建议使用路由懒加载，优化访问性能。
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home',
component: () => import('@/views/Home.vue') // 建议进行路由懒加载，优化访问性能
},
{
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
执行安装命令
yarn add vuex@next
创建store文件
创建 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，这样我们就可以在页面编码中使用全局状态管理插件 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安装、引用、使用一样 就不过多赘述了。此处建议封装业务接口到专门的文件，拦截器啥的跟vue2差不多。
安装 mock 工具
mock 模拟数据我们选用 mockjs 插件，vite 中需要安装 vite-plugin-mock 插件。
执行安装命令
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 文件中创建 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 数据的访问了，这里我们使用在前文中创建公共 api 请求方法 request。
import request from "@/utils/request.ts"
request('/api/getList').then(res => {
console.log(res);
})
结束
到此，一个简单实用的 vite + vue3 工程就搭建完毕了，当然，前端工程里还必不可少代码规范工具及单元测试工具等，可以根据需要自行补充。
