```
### ✅ 多 UI 组件库供选择
Vite 构建工具，使用 `vite-plugin-style-import` 和 `unplugin-vue-components/vite` 实现按需引入。
#### 安装插件
```bash
yarn add vite-plugin-style-import -D
yarn add unplugin-vue-components/vite -D
```
#### 使用组件库
nutUI 没有按需加载的 resolvers，style 需要自己配置按需加载
在 `config/vite/plugins/styleImport.ts` 设置
```javascript
// 按需加载样式文件
...
createStyleImportPlugin({
resolves: [NutuiResolve()],
}),
...
```
项目在 `src/plugins/nutUI.ts` 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
```javascript
// 按需全局引入nutUI组件
import Vue from "vue";
import { Button, Cell, CellGroup } from "@nutui/nutui";
export const nutUiComponents = [Button, Cell, CellGroup];
// 在main.ts文件中引入
nutUiComponents.forEach((item) => {
app.use(item);
});
```
vant 和 varlet 可以使用组件按需加载
在`config/vite/plugins/component.ts`下
```javascript
import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
...
resolvers: [VantResolver(), VarletUIResolver()],
...
```
#### 不需要某个组件库
nutUI 需删除`src/plugins/nutUI.ts`和`main.ts`文件下的引入
vant 和 varlet 只需删除对应的 resolvers 即可
删除后需全局搜索删除不需要的组件，避免报错
### ✅ Pinia 状态管理
下一代 vuex，使用极其方便，ts 兼容好
目录结构
```bash
├── store
│ ├── modules
│ │ └── user.js
│ ├── index.js
```
使用
```html
```
### ✅ Vue-router
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
**注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改**
前往: [vite.config.js 基础配置](#base)
```javascript
import Vue from "vue";
import { createRouter, createWebHistory, Router } from "vue-router";
Vue.use(Router);
export const router = [
{
name: "root",
path: "/",
redirect: "/home",
component: () => import("@/layout/basic/index.vue"),
},
];
const router: Router = createRouter({
history: createWebHistory(),
routes: routes,
});
export default router;
```
更多:[Vue Router](https://router.vuejs.org/zh/introduction.html)
### ✅ Axios 封装及接口管理
`utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
```javascript
import axios from "axios";
import store from "@/store";
import { Toast } from "vant";
// 根据环境不同引入不同api地址
import { baseApi } from "@/config";
// create an axios instance
const service = axios.create({
baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
});
// request 拦截器 request interceptor
service.interceptors.request.use(
(config) => {
// 不传递默认开启loading
if (!config.hideloading) {
// loading
Toast.loading({
forbidClick: true,
});
}
if (store.getters.token) {
config.headers["X-Token"] = "";
}
return config;
},
(error) => {
// do something with request error
console.log(error); // for debug
return Promise.reject(error);
}
);
// respone拦截器
service.interceptors.response.use(
(response) => {
Toast.clear();
const res = response.data;
if (res.status && res.status !== 200) {
// 登录超时,重新登录
if (res.status === 401) {
store.dispatch("FedLogOut").then(() => {
location.reload();
});
}
return Promise.reject(res || "error");
} else {
return Promise.resolve(res);
}
},
(error) => {
Toast.clear();
console.log("err" + error); // for debug
return Promise.reject(error);
}
);
export default service;
```
#### 接口管理
在 `src/api` 文件夹下统一管理接口
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
- `method` 请求方法
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
- `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
```javascript
import qs from "qs";
// axios
import request from "@/utils/request";
//user api
// 用户信息
export function getUserInfo(params) {
return request({
url: "/user/userinfo",
method: "post",
data: qs.stringify(params),
hideloading: true, // 隐藏 loading 组件
});
}
```
#### 如何调用
```javascript
// 请求接口
import { getUserInfo } from "@/api/user.js";
const params = {
user: "sunnie",
};
getUserInfo(params)
.then(() => {})
.catch(() => {});
```
### ✅ vite.config.ts 基础配置
如果你的 `Vue Router` 模式是 hash
```javascript
publicPath: './',
```
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一致**
```javascript
publicPath: '/app/',
```
```javascript
export default function ({ command }: ConfigEnv): UserConfigExport {
const isProduction = command === "build";
return {
server: {
host: "0.0.0.0",
},
plugins: [
vue(),
vueJsx(),
createStyleImportPlugin({
resolves: [NutuiResolve()],
}),
eruda(),
viteMockServe({
mockPath: "./src/mock",
localEnabled: command === "serve",
logger: true,
}),
],
css: {
preprocessorOptions: {
scss: {
// 配置 nutui 全局 scss 变量
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`,
},
},
},
};
}
```
### ✅ 配置 alias 别名
```javascript
resolve: {
alias: [{
find: 'vue-i18n',
replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
},
// /@/xxxx => src/xxxx
{
find: /\/@\//,
replacement: pathResolve('src') + '/',
},
// /#/xxxx => types/xxxx
{
find: /\/#\//,
replacement: pathResolve('types') + '/',
},
],
},
```
### ✅ 配置 proxy 跨域
```javascript
server: {
proxy: {
'/api': {
target: 'https://baidu.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
```
### ✅ Eslint+Pettier+stylelint 统 ˜ 开发规范
根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
# 关于我
扫描添加下方的微信并备注加交流群，交流学习，及时获取代码最新动态。
