Vite|Vite + Vue3.0 项目基础结构 Vue|Vite

此文章为学习笔记
原文章链接：备战2021：Vite2项目最佳实践

目录： + 定义别名 + 路由 + 数据请求封装 + Mock 插件应用 + 状态管理 + 样式管理 + 导入 UI 库

Vite + Vue3.0 定义别名定义前：页面中引入组件的路径是相对路径或绝对路径。

文章图片
定义方法：

文章图片

此时 comps 就指向了路径/src/components。

在页面中使用：

文章图片

注意：修改 vite.config.js 配置文件需要重启项目。

路由安装路由

$ npm install vue-router@next -S -D

配置路由
/src/router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'; const router = createRouter({ history: createWebHashHistory(), routes: [ // @ 是 /src 的别名 { path: '/', component: () => import('@/views/Home.vue') }, { path: '/user', component: () => import('@/views/User.vue') } ] })export default router

文章图片

配置 main.js

import router from "@/router" createApp(App).use(router).mount('#app')

文章图片

使用
App.vue

文章图片

效果

文章图片
数据请求封装统一封装数据请求服务，有利于解决以下问题：

统一配置请求
请求、响应统一处理

安装 axios

$ npm install axios -S -D

配置生产环境文件
在根目录下添加配置文件 .env.development

VITE_APP_BASE_API= '请求的 baseURL'

文章图片

注意：修改该文件后需要重启项目。

请求封装
utils/request.js

import axios from 'axios'// 创建 axios 实例 const service = axios.create({ // 在请求地址前面加上 baseURL baseURL: import.meta.env.VITE_APP_BASE_API, // 请求超时时间 timeout: 5000 })// 请求拦截 service.interceptors.request.use( (config) => { // 在请求前做某些事情 return config }, (error) => { // 处理请求错误 return Promise.reject(error) } )// 响应拦截器 service.interceptors.response.use( (response) => { // 响应成功 return response }, (error) => { // 处理响应错误 return Promise.reject(error) } )export default service

封装第一个接口
api/user.js

import service from '@/utils/request.js'export const getUsers = (params) => { return service({ url: '/getUsers', method: 'get', params }) }

效果
App.vue

> import { getUsers } from '@/api/user.js'getUsers() .then(() => { console.log('请求成功') }) .catch(() => { console.log('请求失败') })

文章图片

接口不存在，报错是正常的。

目录结构变化

文章图片

Mock 插件应用安装插件

$ npm install mockjs -D $ npm install vite-plugin-mock cross-env -D

配置 package.json

"scripts": { "dev": "cross-env NODE_ENV=development vite", }

配置 vite-config.js

import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({ // supportTs: 是否用了ts，可以根据自己选择 true or false plugins: [ viteMockServe({ supportTs: trues }) ] })

封装 user.ts 文件
/mock/user.ts（与node_modules 目录同级）

// user.ts import { MockMethod } from 'vite-plugin-mock'export default [ { url: '/api/getUsers', method: 'get', response: () => { return { code: 0, message: 'ok', data: [ { name: 'zlz', age: 17 }, { name: 'sjw', age: 18 } ] } } } ] as MockMethod[]

使用
App.vue