5分钟搭建 vite + vue3 工程，简单，实用！
5分钟搭建 vite + vue3 工程，简单，实用！
介绍
本文主要介绍 vite + vue3 + vue-router4 + vuex4 + ant-design-vue2 + axios + mockjs 工程搭建。2021年，若还没有体验过 vite 的速度，要抓紧动手试一下啦！
创建 vite 项目
执行创建命令
执行 vite 项目创建命令，在创建导航过程中，选择 vue+ts 模式。
yarn create vite
yarn
yarn dev
复制代码
修改 vite 配置文件
当以命令行方式运行 vite 时，vite 会自动解析项目根目录下名为 vite.config.js 的文件。这里，我们简单设置一下将 @ 指向 src 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。（cn.vitejs.dev/config/）[1]
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
执行安装命令
yarn add ant-design-vue@next
复制代码
引用 ant-design-vue
在 main.ts 中引入 antd 插件及 css 样式文件，在 vue 实例中 use 插件。这里我们使用了全局引用的方式，当然，也可以参考官网进行按需引用。（2x.antdv.com/docs/vue/ge…[2]
import { createApp } from 'vue'
import Antd from "ant-design-vue";
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import "ant-design-vue/dist/antd.css";
createApp(App).use(router).use(store).use(Antd).mount('#app')
复制代码
使用 ant-design-vue
引用后，我们就可以在组件中进行使用了
<template>
<a-button type="primary">按钮</a-button>
</template>
复制代码
安装axios
执行安装命令
yarn add axios
复制代码
创建公共请求方法
我们将工具类方法放到 utils 文件夹中，创建文件 src/utils/request.ts
import axios from 'axios'
interface ApiConfig {
body: object;
data: object
}
async function request(url: string, options: ApiConfig) {
// 创建 axios 实例
const service = axios.create({
baseURL: "", // api base_url
timeout: 6000 // 请求超时时间
});
// 请求拦截
service.interceptors.request.use(config => {
// 这里可设置请求头等信息
if (options && options.body) {
config.data = options.body;
}
return config;
});
// 返回拦截
service.interceptors.response.use(response => {
// 这里可进行返回数据的格式化等操作
return response.data;
});
return service(url, options);
}
export default request;
复制代码
使用请求方法
<script>
import request from "@/utils/request.ts"
export default {
mounted() {
request('/api/getUser')
}
}
</script>
复制代码
安装 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 工程就搭建完毕了，当然，前端工程里还必不可少代码规范工具及单元测试工具等，大家可以根据需要自行补充。快动手试试吧！
来自：多肉攻城狮
https://juejin.cn/post/7009145360694116382