5分钟搭建vite+vue3工程，简单，实用！

点击上方 程序员成长指北&＃xff0c;关注公众号

回复1&＃xff0c;加入高级Node交流群

介绍

本文主要介绍 vite &＃43; vue3 &＃43; vue-router4 &＃43; vuex4 &＃43; ant-design-vue2 &＃43; axios &＃43; mockjs 工程搭建。2021年&＃xff0c;若还没有体验过 vite 的速度&＃xff0c;要抓紧动手试一下啦&＃xff01;

创建 vite 项目

执行创建命令

执行 vite 项目创建命令&＃xff0c;在创建导航过程中&＃xff0c;选择 vue&＃43;ts 模式。

yarn create vite
yarn
yarn dev


修改 vite 配置文件

当以命令行方式运行 vite 时&＃xff0c;vite 会自动解析项目根目录下名为 vite.config.js 的文件。这里&＃xff0c;我们简单设置一下将 &＃64; 指向 src 以及开发时与后端联调必须进行的proxy代理设置。其它配置参数可参考官网。&＃xff08;cn.vitejs.dev/config/&＃xff09;^[1]

import { defineConfig } from &＃39;vite&＃39;
import vue from &＃39;&＃64;vitejs/plugin-vue&＃39;
import { resolve } from &＃39;path&＃39; // 编辑器提示 path 模块找不到&＃xff0c;可以yarn add &＃64;types/node --devexport default defineConfig({plugins: [vue()],resolve: {alias: {&＃39;&＃64;&＃39;: resolve(__dirname, &＃39;src&＃39;) // 设置 &＃96;&＃64;&＃96; 指向 &＃96;src&＃96; 目录}},server: {port: 3000, // 设置服务启动端口号open: true, // 设置服务启动时是否自动打开浏览器// 代理proxy: {&＃39;/api&＃39;: {target: &＃39;http://API网关所在域名&＃39;,changeOrigin: true,rewrite: (path) &＃61;> path.replace(/^\/api/, &＃39;&＃39;)},}}
})


安装 vue-router

执行安装命令

yarn add vue-router&＃64;4


创建router文件

创建 src/router/index.ts 文件&＃xff0c;创建路由时&＃xff0c;建议使用路由懒加载&＃xff0c;优化访问性能。

import { createRouter, createWebHistory, RouteRecordRaw } from &＃39;vue-router&＃39;const routes: Array &＃61; [{path: &＃39;/&＃39;,name: &＃39;home&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/Home.vue&＃39;) // 建议进行路由懒加载&＃xff0c;优化访问性能},{path: &＃39;/demo&＃39;,name: &＃39;demo&＃39;,component: () &＃61;> import(&＃39;&＃64;/views/Demo.vue&＃39;)}
]const router &＃61; createRouter({history: createWebHistory(),routes
})export default router


引入router

在 main.ts 文件中 vue 示例中 use router

import { createApp } from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router/index&＃39;createApp(App).use(router).mount(&＃39;#app&＃39;)


使用 router-view 组件

在 App.vue 文件中使用 router-view 组件&＃xff0c;路由匹配到组件会通过 router-view 组件进行渲染。

安装vuex

执行安装命令

yarn add vuex&＃64;next


创建store文件

创建 src/store/index.ts 文件

import { createStore } from &＃39;vuex&＃39;const defaultState &＃61; {count: 0
}
const store &＃61; createStore({state () {return {count: 0}},mutations: {increment (state: typeof defaultState) {state.count&＃43;&＃43;}}
})
export default store;


引入vuex

在 main.ts 文件中 vue 示例中 use store&＃xff0c;这样我们就可以在页面编码中使用全局状态管理插件 vuex 啦。

import { createApp } from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router/index&＃39;
import store from &＃39;./store/index&＃39;createApp(App).use(router).use(store).mount(&＃39;#app&＃39;)


安装UI库 ant-design-vue

执行安装命令

yarn add ant-design-vue&＃64;next


引用 ant-design-vue

在 main.ts 中引入 antd 插件及 css 样式文件&＃xff0c;在 vue 实例中 use 插件。这里我们使用了全局引用的方式&＃xff0c;当然&＃xff0c;也可以参考官网进行按需引用。&＃xff08;2x.antdv.com/docs/vue/ge…^[2]

import { createApp } from &＃39;vue&＃39;
import Antd from "ant-design-vue";
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router/index&＃39;
import store from &＃39;./store/index&＃39;
import "ant-design-vue/dist/antd.css";createApp(App).use(router).use(store).use(Antd).mount(&＃39;#app&＃39;)


使用 ant-design-vue

引用后&＃xff0c;我们就可以在组件中进行使用了

安装axios

执行安装命令

yarn add axios


创建公共请求方法

我们将工具类方法放到 utils 文件夹中&＃xff0c;创建文件 src/utils/request.ts

import axios from &＃39;axios&＃39;interface ApiConfig {body: object;data: object
}async function request(url: string, options: ApiConfig) {// 创建 axios 实例const service &＃61; axios.create({baseURL: "", // api base_urltimeout: 6000 // 请求超时时间});// 请求拦截service.interceptors.request.use(config &＃61;> {// 这里可设置请求头等信息if (options && options.body) {config.data &＃61; options.body;}return config;});// 返回拦截service.interceptors.response.use(response &＃61;> {// 这里可进行返回数据的格式化等操作return response.data;});return service(url, options);
}
export default request;


使用请求方法

安装 mock 工具

mock 模拟数据我们选用 mockjs 插件&＃xff0c;vite 中需要安装 vite-plugin-mock 插件。

执行安装命令

yarn add mockjs
yarn add vite-plugin-mock -D


vite.config.ts 中引用插件

import { viteMockServe } from &＃39;vite-plugin-mock&＃39;export default defineConfig({plugins: [viteMockServe({ supportTs: true })],
})


使用 mock

在 src/mock 文件中创建 index.ts 文件&＃xff0c;添加如下代码示例代码

import { MockMethod } from &＃39;vite-plugin-mock&＃39;
export default [{url: &＃39;/api/getList&＃39;,method: &＃39;get&＃39;,response: () &＃61;> {return {code: 0,message: &＃39;ok&＃39;,data: [&＃39;aa&＃39;, &＃39;bb&＃39;]}}},
] as MockMethod[]


这样我们就可以在工程中进行 mock 数据的访问了&＃xff0c;这里我们使用在前文中创建公共 api 请求方法 request。

import request from "&＃64;/utils/request.ts"request(&＃39;/api/getList&＃39;).then(res &＃61;> {console.log(res);
})


结束

好啦&＃xff0c;到此&＃xff0c;一个简单实用的 vite &＃43; vue3 工程就搭建完毕了&＃xff0c;当然&＃xff0c;前端工程里还必不可少代码规范工具及单元测试工具等&＃xff0c;大家可以根据需要自行补充。快动手试试吧&＃xff01;

来自&＃xff1a;多肉攻城狮

https://juejin.cn/post/7009145360694116382

Node 社群

我组建了一个氛围特别好的 Node.js 社群&＃xff0c;里面有很多 Node.js小伙伴&＃xff0c;如果你对Node.js学习感兴趣的话&＃xff08;后续有计划也可以&＃xff09;&＃xff0c;我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波&＃x1f44d;