--- theme: smartblue --- # Vue3-TS的uni-app工程化模板搭建 >这是我参与更文挑战的第23天，活动详情查看：更文挑战 ## 前言 [上一期](https://juejin.cn/post/6976646929505746981)已经搭建了一个初步可用的[uni-vue3-ts](https://github.com/ATQQ/uni-vue3-ts-template)工程化模板已经包含了`Vue3`,`TS`,`Sass`,`Vant Weapp`等特性本节将为模板接入更多的特性： * eslint * vuex4 * mini-axios ## eslint 通过接入eslint，可以约束开发人员的编码风格，便于统一一个团队中成员的开发风格配合vs code中的eslint插件，可以实现自动根据配置的规则进行format ```sh yarn add eslint --dev ``` 然后在`package.json`中添加脚本 ```json { "scripts": { "eslint:init": "eslint --init" } } ``` 执行脚本 ```sh yarn eslint:init ``` 根据提示，按照个人喜好选择一些特性 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d590a5b9e2e410082a55409245cd62c~tplv-k3u1fbpfcp-zoom-1.image) 静静等待一会儿就安装好所有依赖，然后会自动在根目录下生成`eslintrc.js`配置文件配置文件内容如下，将`plugin:vue/essential`改成`plugin:vue/vue3-essential` ```js module.exports = { env: { browser: true, es2021: true, }, extends: ['plugin:vue/vue3-essential', 'airbnb-base'], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: {}, }; ``` 添加`.eslintignore`文件，忽略一些不检查格式的文件或目录 ```sh dist ``` 在`package.json`中添加自动lint 指令 ```json { "scripts": { "lint": "eslint --fix --ext .js,.jsx,.ts,.vue ./src", } } ``` 执行自动lint ```sh yarn lint ``` ## vuex 必不可少的状态管理工具模板中默认依赖的是`3.2.0`版本,即Vuex3,咱们这里用Vuex4（专为Vue3打造） ```sh yarn add vuex@next --save ``` 下面编写一个实际的demo来测试 ### 目录结构首先在`src`下创建`store`目录采用模块化的方式，将同一业务/页面的 `store` 存在同一个`namespace`下目录结构如下： ```sh src/store ├── index.ts └── modules └── test.ts ``` 每个模块都存放在modules中通过index.ts将这些模块引入，然后统一对外导出 ### 示例模块编写包含 `state`,`getters`,`mutations`,`actions`四个部分使用TS编写的化能够获得非常友好的编写提示 `src/store/modules/test.ts` ```ts import { Module } from 'vuex'; interface State { count: number; } const store: Module = { namespaced: true, state() { return { count: 0, }; }, getters: { isEven(state) { return state.count % 2 === 0; }, }, // 只能同步 mutations: { increase(state, num = 1) { state.count += num; }, decrease(state) { state.count -= 1; }, }, // 支持异步,可以考虑引入API actions: { increase(context, payload) { setTimeout(() => { context.commit('increase', payload); }, 1000); }, }, }; export default store; ``` ### 示例模块的使用在store/index.ts文件中统一引入上述定义的store模块，并通过`createStore`创建store实例 `src/store/index.ts` ```ts import { createStore } from 'vuex'; import test from './modules/test'; // Create a new store instance. const store = createStore({ modules: { m1: test, }, }); export default store; ``` 在`main.ts`中直接使用这个 `store` 即可 ```ts import { createApp } from 'vue'; import App from './App.vue'; // 引入store import store from './store/index'; const app = createApp(App); // 在Vue上注册 app.use(store); app.mount('#app'); ``` ### 示例组件编写利用上面编写的 `modules/test` store模块编写一个组件调用代码中的`m1`,是上面`store/index.ts`在引入的时候设置的别名组件如下`src/components/VuexDemo.vue` ```html ``` ### 效果 ![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc648119e4aa4141a14fca5f34350804~tplv-k3u1fbpfcp-zoom-1.image) ## Axios 由于axios只兼容Node与Web两端，在uni-app中无法直接使用，uni-app 收口的网络请求方法是 `uni.request` 调研找到一个根据Axios API风格，封装的uni-app可用的请求库[axios-miniprogram](https://github.com/fluffff/axios-miniprogram#readme) 这里限制一下版本，经测试最新的版本还存在一些小问题，无法正常使用 ```sh yarn add axios-miniprogram@1.3.0 ``` 下面介绍一下封装这个库的过程 ### 目录结构在 src 下创建 api 目录，在 api 目录下创建 `http.ts`,`index.ts`,`modules` ```sh src/api ├── http.ts # 封装的调用方法 ├── index.ts # 对外统一暴露各个业务模块的接口调用方法 └── modules └── user.ts # user模块的接口调用方法 ``` ### http.ts 其中请求的baseURL通过环境变量配置文件(.env)注入 .env ```sh VUE_APP_AXIOS_BASEURL=http://localhost:3000 ``` 为axios注册请求/响应拦截器，设置默认请求头在请求拦截器中添加鉴权身份令牌，响应拦截器中根据返回的状态做进一步处理（统一的警告弹窗，权限校验） ```ts import axios from 'axios-miniprogram'; const http = axios; // 请求base路径 http.defaults.baseURL = process.env.AXIOS_BASEURL; http.defaults.headers = { 'content-Type': 'application/json', }; http.interceptors.request.use( (config) => { // 所有请求都携带token Object.assign(config.headers, { token: uni.getStorageSync('token'), }); // 发送之前操作config return config; }, (err) => { if (err.status !== 200) { // 处理错误 } return Promise.reject(err); }, ); /** * 响应拦截 */ http.interceptors.response.use( (response: any) => { // 对拿到的数据做一些额外操作操作 (如无权限,直接跳转首页) const { code, msg } = response.data; if (code !== 0) { if (msg) { uni.showToast({ title: msg, }); } // 走catch逻辑 return Promise.reject(response.data); } // 返回前操作 return response.data; }, (err) => Promise.reject(err), ); export default http; ``` ### 接口模块化 `modules`目录下主要编写各个业务模块请求方法例如`modules/user.ts` ```ts import http from '../http'; function login(account: string, pwd: string) { return http.post('user/login', { account, pwd, }); } export default { login, }; ``` 通过`api/index.ts`统一对业务方暴露 ```ts export { default as userApi } from './modules/user'; ``` ### 业务调用 ```html ``` ## 未完待续 * tailwindcss * less * 其余成熟UI库 * 。。。and more ## 资料汇总 * [uni-vue3-ts：模板仓库](https://github.com/ATQQ/uni-vue3-ts-template)