1、项目初始化
1、pnpm介绍&安装
- pnpm：包管理工具
- 相较于npm/yarn的优势：
- 包安装速度极快
- 磁盘空间利用率高
- 命令：
2、项目创建
//执行创建命令
pnpm create vue
# or
npm init vue@latest
# or
yarn create vue
// 选择项目依赖内容
✔ Project name: … patients-h5-100
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`
Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...
Done. Now run:
cd patient-h5-100
pnpm install
pnpm lint
pnpm dev
3、vscode插件安装
Vue Language Features (Volar) vue3语法支持
TypeScript Vue Plugin (Volar) vue3中更好的ts提示
Eslint 代码风格校验
4、Eslint预制配置
rules: {
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: false,
printWidth: 80,
trailingComma: 'none',
endOfLine: 'auto'
}
],
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index']
}
],
'vue/no-setup-props-destructure': ['off'],
// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
'no-undef': 'error'
}
5、代码检查工作流
husky 配置
lint-staged 校验暂存区的代码
6、移动端适配
// 安装插件
pnpm add -D postcss-px-to-viewport
配置： `postcss.config.js`
// eslint-disable-next-line no-undef
module.exports = {
plugins: {
'postcss-px-to-viewport': {
// 设备宽度375计算vw的值
viewportWidth: 375,
},
},
};
注意：有一个控制台警告可忽略，或者使用 postcss-px-to-viewport-8-plugin 代替当前插件
css的前处理器和后处理器
- 前处理器：scss less
- 后处理器：postcss
7、css变量主题定制
:root {
// 问诊患者：色板
--cp-primary: #16C2A3;
--cp-plain: #EAF8F6;
--cp-orange: #FCA21C;
--cp-text1: #121826;
--cp-text2: #3C3E42;
--cp-text3: #6F6F6F;
--cp-tag: #848484;
--cp-dark: #979797;
--cp-tip: #C3C3C5;
--cp-disable: #D9DBDE;
--cp-line: #EDEDED;
--cp-bg: #F6F7F9;
--cp-price: #EB5757;
// 覆盖vant主体色
--van-primary-color: var(--cp-primary);
}
8、用户状态仓库
目标：用户信息仓库创建、提供用户信息、修改用户信息、删除用户信息的
// stores/user.ts
import type { User } from '../types/user.d'
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const userUserStore = defineStore('user', () => {
// 定义用户信息
const user = ref<User>()
// 设置用户信息
const setUser = (u: User) => {
user.value = u
}
// 删除用户信息
const delUser = () => {
user.value = undefined
}
// 将变量返回
return {
user,
setUser,
delUser
}
})
// user.d.ts
export interface User {
/**
* 用户名
*/
account?: string
/**
* 头像
*/
avatar?: string
/**
* 用户id
*/
id?: string
/**
* 脱敏手机号，带星号的手机号
*/
mobile?: string
/**
* refreshToken
*/
refreshToken: string
/**
* token
*/
token: string
}
// vue文件里面使用
<div>
<div>{{ store.user }}</div>
<van-button
type="primary"
@click="store.setUser({ token: '1', refreshToken: '12' })"
>设置</van-button
>
<van-button @click="store.delUser()">删除</van-button>
</div>
// 导入
import { userUserStore } from './stores/user'
const store = userUserStore()
9、仓库状态持久化
在前端中，为实现存储持久化，一般使用vuex和localStorage相互配合实现。但是pinia中，可以使用他的插件pinia-plugin-persistedstate实现pinia仓库状态持久化。
// 安装
pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate
// 在main.ts中
import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)
app.use(createPinia().use(persist))
// 在stores/user.ts中
import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserStore = defineStore(
'cp-user',
() => {
// 用户信息
const user = ref<User>()
// 设置用户，登录后使用
const setUser = (u: User) => {
user.value = u
}
// 清空用户，退出后使用
const delUser = () => {
user.value = undefined
}
return { user, setUser, delUser }
},
{
persist: true
}
)
10、请求工具函数
拦截器逻辑
实现：token请求头携带、错误响应处理、401错误处理
// 新建utils/request.js文件
import axios from 'axios'
const instance = axios.create({
// TODO 1. 基础地址，超时时间
})
instance.interceptors.request.use(
(config) => {
// TODO 2. 携带token
return config
},
(err) => Promise.reject(err)
)
instance.interceptors.response.use(
(res) => {
// TODO 3. 处理业务失败
// TODO 4. 摘取核心响应数据
return res
},
(err) => {
// TODO 5. 处理401错误
return Promise.reject(err)
}
)
export default instance
