Vite创建vue3+ts+pinia+vant项目起步流程

pnpm介绍&安装

本质上他是一个包管理工具，和npm/yarn没有区别，主要优势在于

• 包安装速度极快
• 磁盘空间利用效率高

安装：

npm i pnpm -g

使用：

npm命令	pnpm等效
npm install	pnpm install
npm i axios	pnpm add axios
npm i webpack -D	pnpm add webpack -D
npm run dev	pnpm dev

小结：

• pnpm 是一个高效的包管理工具，使用和npm和yarn基本相同

1、项目创建

使用 create-vue 脚手架创建项目

create-vue，即官方的项目脚手架工具，提供了搭建基于 Vite且 TypeScript 就绪的 Vue 项目的选项。

步骤：

1. 执行创建命令

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

2. 选择项目依赖内容

✔ 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-100pnpm installpnpm lintpnpm dev

2、项目准备工作

vscode插件安装

安装：项目开发需要的一些插件

必装：

• Vue Language Features (Volar) 语法高亮，代码提示， volar支持setup语法糖，官方推荐vue3使用
• TypeScript Vue Plugin (Volar) vvue3中更好的ts提示, 让Ts服务知道.vue文件
• Eslint 代码风格校验

注意

• vscode 安装了 Prettier 插件的可以先 禁用，或者关闭保存自动格式化功能，避免和项目的 Eslint 风格冲突。
• （Volar为vue3开发）（vetur主要是vue2）Volar和vetur不能共存

可选：

• gitLens 代码git提交记录提示
• json2ts json自动转ts类型
• Error Lens 行内错误提示 💡

提示：

大中型项目建议开启 TS托管模式 , 更好更快的类型提示。

更高效的开启TS托管模式 （Take Over Mode(托管模式)，TS服务性能更好）

什么是托管模式，vscode内置了一套ts服务，volar也提供了一套ts服务，所以需要开启托管模式，让ts性能提示更加高效，只需要下面两步即可，1.关闭vscode内置的TS服务，2.使用Volar提供的TS服务

vscode 插件中搜索 @builtin ty，在当前工作区禁用ts服务后，重启vscode即可。

查看ts已托管成功，重启后vscode工具栏下方有这个提示即可

这里就相当于告诉vscode,你不需要提供ts服务了，我找个人(volar插件)来替你服务，即所谓的托管。

eslint 预制配置

.eslintrc.cjs文件
加入如下配置，覆盖原有的eslint配置

  rules: {'prettier/prettier': ['warn',{singleQuote: true,//单引号semi: false,//没有分号printWidth: 80,//行宽度80字符trailingComma: 'none',//没有对象数组最后一个逗号endOfLine: 'auto'//换行字符串自动（系统不一样换行符号不一样）}],//新手在组件命名的时候不够规范，根据官方风格指南，除了根组件（App.vue）外，// 自定义组件名称应该由多单词组成，防止和html标签冲突。'vue/multi-word-component-names': ['warn',{ignores: ['index']}],// 允许对 props 进行解构'vue/no-setup-props-destructure': ['off'],// 添加未定义变量错误提示'no-undef': 'error'}

• 格式：单引号，没有分号，行宽度80字符，没有对象数组最后一个逗号，换行字符串自动（系统不一样换行符号不一样）
• vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的
• 允许对 props 进行解构，我们会开启解构保持响应式的语法糖

执行：

# 修复格式
pnpm lint

vscode 开启 eslint 自动修复

    "editor.codeActionsOnSave": {"source.fixAll": true,},

提示：安装Eslint且配置保存修复，不要开启默认的自动保存格式化

代码检查工作流

提交代码前做代码检查 -使用husky这个git hooks工具(husky相当于是git的钩子)

husky [ˈhʌski] 哈士奇

eslint只能修复代码的风格，不能修复代码的错误，此时提交代码比较危险

怎么做？安装husky工具（这个工具是在commit提交文件之前检查代码是否有问题的和git一起用）

1. 初始化git仓库，执行git init即可

2. 初始化husky工具配置，执行

   pnpm dlx husky-init && pnpm install
   

3. 修改 .husky/pre-commit 文件,添加pnpm lint 这个命令

   

pnpm lint是全量检查，突然添加就会有耗时问题和检查历史遗留问题，所以最好只检查修改的文件，在暂存区做lint校验（git add .的时候把文件提交到了暂存区），在commit命令之前去执行

如何只检查暂存区代码？

1. 安装lint-staged包

   pnpm i lint-staged -D
   

2. 配置 package.json

   {// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
   }
   

   {"scripts": {// ... 省略 ..."lint-staged": "lint-staged"}
   }
   

3. 修改 .husky/pre-commit 文件

   pnpm lint-staged
   

4. 图示

   

项目结构调整

了解：每一个目录结构的作用

./src├── assets        `静态资源，图片...`├── components    `通用组件`├── composables   `组合功能通用函数`├── icons         `svg图标`├── router        `路由`│   └── index.ts├── services      `接口服务API`├── stores        `状态仓库`├── styles        `样式`│   └── main.scss├── types         `TS类型`├── utils         `工具函数`├── views         `页面`├── main.ts       `入口文件`└──App.vue       `根组件`

assets, components, stores, views 清空文件夹

composables, icons, services, styles/main.scss, types, utils 新建文件夹

router/index.ts, main.ts, App.vue 修改

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'//导入新创建的全局样式文件
import './styles/main.scss'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

App.vue

<script setup lang="ts"></script><template><div>App</div>
</template><style scoped></style>

项目使用sass预处理器，安装sass，即可支持scss语法：

pnpm add sass -D

导入 main.ts 作为全局样式

import './styles/main.scss'

路由代码解析

import { createRouter, createWebHistory } from 'vue-router'// createRouter 创建路由实例，===> new VueRouter()
// history 是路由模式，hash模式，history模式
// createWebHistory() 是开启history模块   http://xxx/user
// createWebHashHistory() 是开启hash模式    http://xxx/#/user// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path
// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: []
})export default router

1. 创建路由实例由 createRouter 实现
2. 路由模式
   • history 模式使用 createWebHistory()
   • hash 模式使用 createWebHashHistory()
   • 参数是基础路径，默认/

扩展：import.meta.env.BASE_URL

import.meta 是 JavaScript 模块暴露的描述模块的信息对象

env.BASE_URL 是Vite 环境变量

3、移动端项目基础架构要做的工作

4、构建界面

vant组件库

文档

安装：

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

引入组件 - vant 自动引入组件，并按需引入组件的样式：

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件。

Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 @vant/auto-import-resolver，两者可以配合使用。

1. 安装插件

   # 通过 npm 安装
   npm i @vant/auto-import-resolver unplugin-vue-components -D# 通过 yarn 安装
   yarn add @vant/auto-import-resolver unplugin-vue-components -D# 通过 pnpm 安装
   pnpm add @vant/auto-import-resolver unplugin-vue-components -D# 通过 bun 安装
   bun add @vant/auto-import-resolver unplugin-vue-components -D
   

2. 配置插件

   如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

   import vue from '@vitejs/plugin-vue';
   import Components from 'unplugin-vue-components/vite';
   import { VantResolver } from '@vant/auto-import-resolver';export default {plugins: [vue(),Components({resolvers: [VantResolver()],}),],
   };
   

3. 使用组件

   <template><van-button type="primary" />
   </template>
   

4. 引入函数组件的样式

   Vant 中有个别组件是以函数的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 组件。在使用函数组件时，unplugin-vue-components 无法解析自动注册组件，导致 @vant/auto-import-resolver 无法解析样式，因此需要手动引入样式。

   // Toast
   import { showToast } from 'vant';
   import 'vant/es/toast/style';// Dialog
   import { showDialog } from 'vant';
   import 'vant/es/dialog/style';// Notify
   import { showNotify } from 'vant';
   import 'vant/es/notify/style';// ImagePreview
   import { showImagePreview } from 'vant';
   import 'vant/es/image-preview/style';
   

移动端适配

实现：使用 vw 完成移动端适配

文档

安装：

npm install postcss-px-to-viewport -D
# or
yarn add -D postcss-px-to-viewport
# or
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变量主题定制

实现：使用css变量定制项目主题，和修改vant主题

官方文档

• 全局变量：使用场景：项目主题

  :root {/* 全局css变量 */--main: #999;--cp-primary: #16C2A3;/* 覆盖vant主体色 */--van-primary-color: var(--cp-primary);
  }a {/* 使用变量 */color: var(--main)
  }
  

• 局部变量：使用场景：组件变量

  .footer {/* 局部变量 */--footer-color: green;
  }.footer {/* 只能在footer下使用 */color: var(--footer-color);
  }
  

• 如何覆盖vant的主题色：找到主题色的变量名，覆盖即可

  styles/main.scss
注意：为什么要写两个重复的 :root？
  由于 vant 中的主题变量也是在 :root 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。通过 :root:root 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。

  :root: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);
  }
  

  App.vue

  <script setup lang="ts"></script><template><!-- 验证vant颜色被覆盖 --><van-button type="primary">按钮</van-button><a href="#">123</a>
  </template><style scoped lang="scss">
  // 使用 css 变量
  a {color: var(--cp-primary);
  }
  </style>
  

  补充内容

1、css变量

有的网站都会有自己的主题色，例如饿了么：

所以很多元素都会用到这些颜色，例如某些字体颜色，弹框提示颜色等等。

如果每次用到的时候，都使用十六进制的颜色表示，那么效率十分低，并且如果万一有一天需要更换主题颜色，那么一个一个更改，是十分繁琐的。

为了解决以上问题，css引入了变量。

var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。

例如：

        /* 全局变量 */:root {--main-color: red;}/* 局部变量 */.footer {--footer-color: green;}

:root声明的是全局变量，如果是一个自定义属性用 -- 作为前缀，使用时比如: var(–main-color)就和red相等。

好处:

1. 可维护性
   如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。
2. 提高CSS可读性
   可以通过变量名判断属性内容

注意事项：使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。

2、实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 全局变量可以在整个文档进行访问使用 */:root {--main-color: red;}/* 局部变量只能在声明它的选择器内部使用 */.footer {--footer-color: green;}.main {color: var(--main-color);	/* √ 生效 */background-color: var(--footer-color);	/* × 不生效 */}.footer {color: var(--main-color);	/* √ 生效 */background-color: var(--footer-color);	/* √ 生效 */}</style>
</head><body><div class="main">main</div><br /><div class="footer">footer</div>
</body></html>

5、状态管理

用户状态仓库

完成：用户信息仓库创建，提供用户信息，修改用信息，删除用户信息的方法

• 请求工具需要携带token，访问权限控制需要token，所以用户信息仓库先完成

需求：

• 用户信息仓库创建
• 提供用户信息
• 修改用信息的方法
• 删除用信息的方法

代码：

types/user.d.ts

// 用户信息
export type User = {// token令牌token: string// 用户IDid: string// 用户名称account: string// 手机号mobile: string// 头像avatar: string
}

stores/user.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { User } from '@/types/user'export const useUserStore = defineStore('cp-user', () => {// 1.用户信息状态const user = ref<User>()// 2.设置用户信息函数const setUser = (u: User) => {user.value = u}// 3.删除用户信息的函数const delUser = () => {user.value = undefined}return {user,setUser,delUser}
})

测试App.vue

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import type { User } from './types/user'const store = useUserStore()const login = () => {const user: User = {token: 'xxx',id: '1',account: 'xxx',mobile: 'xxx',avatar: 'xxx'}store.setUser(user)
}
const logout = () => {store.delUser()
}
</script><template><div>{{ store.user }}<van-button type="primary" @click="login">登录</van-button><van-button type="primary" @click="logout">退出</van-button></div>
</template><style scoped lang="scss"></style>

小结：

• pinia存储这个数据的意义？
  • 数据共享，提供给项目中任何位置使用
• 如果存储了数据，刷新页面后数据还在吗？
  • 不在，现在仅仅是js内存中，需要进行本地存储（持久化）

数据持久化

掌握：使用 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 { ref } from 'vue'
  import { defineStore } from 'pinia'
  import type { User } from '@/types/user'export const useUserStore = defineStore('cp-user',() => {// 1.用户信息状态const user = ref<User>()// 2.设置用户信息函数const setUser = (u: User) => {user.value = u}// 3.删除用户信息的函数const delUser = () => {user.value = undefined}return {user,setUser,delUser}},{// 开启本地持久化persist: true}
  )
  

• 测试 App.vue

  <script setup lang="ts">
  import { useUserStore } from '@/stores/user'
  import type { User } from './types/user'const store = useUserStore()const login = () => {const user: User = {token: 'xxx',id: '1',account: 'xxx',mobile: 'xxx',avatar: 'xxx'}store.setUser(user)
  }
  const logout = () => {store.delUser()
  }
  </script><template><div>{{ store.user }}<van-button type="primary" @click="login">登录</van-button><van-button type="primary" @click="logout">退出</van-button></div>
  </template><style scoped lang="scss"></style>

stores统一导出

如何统一管理?

1. pinia 独立维护

   • 现在：初始化代码在 main.ts 中，仓库代码在 stores中，代码分散职能不单一

   • 优化：由 stores 统一维护，在 stores/index.ts 中完成 pinia 初始化，交付 main.ts 使用

2. 仓库 统一导出

   • 现在：使用一个仓库 import { useUserStore } from ./stores/user.ts 不同仓库路径不一致

   • 优化：由 stores/index.ts 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

抽取pinia实例代码，职能单一

stores/index

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 创建pinia实例
const pinia = createPinia()
// 使用pinia插件
pinia.use(persist)
// 导出pinia实例，给main使用
export default pinia

main.ts

import { createApp } from 'vue'
import pinia from './stores'
import App from './App.vue'
import router from './router'
import './styles/main.scss'const app = createApp(App)app.use(pinia)
app.use(router)
app.mount('#app')

统一导出，代码简洁，入口唯一

stores/index

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'// 创建pinia实例
const pinia = createPinia()
// 使用pinia插件
pinia.use(persist)
// 导出pinia实例，给main使用
export default pinia// import { useUserStore } from './modules/user'
// export { useUserStore }
export * from './modules/user'

App.vue

-import { useUserStore } from './stores/user'
+import { useUserStore } from './stores'

6、数据交互

请求工具

axios配置

创建axios实例

基准地址，超时时间

请求拦截器

携带 token

响应拦截器

业务失败处理，摘取核心响应数据，401处理

业务失败处理&摘取核心响应数据

业务失败处理：

1. 如何判断业务失败？code 不是 10000
2. 失败后需要做什么？弹出轻提示，此时返回一个失败的 promise，传递code给catch

摘取核心响应数据：

1. 现在结果 ===> { data: 响应数据 }
2. 期望结果 ===> 响应数据

响应失败-token无效401处理

代码

实现：token请求头携带，错误响应处理，摘取核心响应数据, 401错误处理

utils/request.ts

模板代码：

import axios from 'axios'const instance = axios.create({// TODO 1. 基础地址，超时时间
})instance.interceptors.request.use((config) => {// TODO 2. 携带tokenreturn 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

代码实现：

import { useUserStore } from '@/stores'
import axios, { AxiosError } from 'axios'
import router from '@/router'
import { showToast } from 'vant'
import 'vant/es/toast/style'const instance = axios.create({// 1. 基础地址，超时时间baseURL: 'https://consult-api.itheima.net/',timeout: 10000
})instance.interceptors.request.use((config) => {// 2. 携带tokenconst store = useUserStore()if (store.user?.token && config.headers) {config.headers.Authorization = `Bearer ${store.user.token}`}return config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// 3. 处理业务失败// 后台约定，响应成功，但是code不是10000，是业务逻辑失败if (res.data.code !== 10000) {// 错误提示showToast(res.data.message || '业务失败')// 返回错误的promise// 传入code将来catch的时候可以使用(res.data包含code)return Promise.reject(res.data)}// 4. 摘取核心响应数据return res.data},(err: AxiosError) => {// 5. 处理401错误if (err.response?.status === 401) {// 删除用户信息const store = useUserStore()store.delUser()// 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用router.push({path: '/login',query: { returnUrl: router.currentRoute.value.fullPath }})}return Promise.reject(err)}
)export default instance

请求函数

函数封装

简化传参逻辑

添加类型

设置响应数据类型

扩展：为什么使用axios.request()泛型第二个参数？

代码

实现：导出一个通用的请求工具函数，支持设置响应数据类型

utils/request.ts

import { useUserStore } from '@/stores'
import axios, { AxiosError, type Method } from 'axios'
import router from '@/router'
import { showToast } from 'vant'
import 'vant/es/toast/style'const instance = axios.create({// 1. 基础地址，超时时间baseURL: 'https://consult-api.itheima.net/',timeout: 10000
})instance.interceptors.request.use((config) => {// 2. 携带tokenconst store = useUserStore()if (store.user?.token && config.headers) {config.headers.Authorization = `Bearer ${store.user.token}`}return config},(err) => Promise.reject(err)
)instance.interceptors.response.use((res) => {// 3. 处理业务失败// 后台约定，响应成功，但是code不是10000，是业务逻辑失败if (res.data.code !== 10000) {// 错误提示showToast(res.data.message || '业务失败')// 返回错误的promise// 传入code将来catch的时候可以使用(res.data包含code)return Promise.reject(res.data)}// 4. 摘取核心响应数据return res.data},(err: AxiosError) => {// 5. 处理401错误if (err.response?.status === 401) {// 删除用户信息const store = useUserStore()store.delUser()// 跳转登录，带上接口失效所在页面的地址，登录完成后回跳使用router.push({path: '/login',query: { returnUrl: router.currentRoute.value.fullPath }})}return Promise.reject(err)}
)export default instance// 请求工具函数
type Data<T> = {code: numbermessage: stringdata: T
}
export const request = <T>(url: string,method: Method = 'GET',submitData?: object
) => {// 参数：地址，请求方式，提交的数据// 返回：promisereturn instance.request<any, Data<T>>({url,method,[method.toUpperCase() === 'GET' ? 'params' : 'data']: submitData})
}

测试：

<script setup lang="ts">
import { request } from '@/utils/request'
import type { User } from './types/user'
import { useUserStore } from './stores'const store = useUserStore()
const login = async () => {const res = await request<User>('/login/password', 'POST', {mobile: '13211112222',password: 'abc12345'})store.setUser(res.data)
}
</script><template><van-button type="primary" @click="login">登录</van-button>
</template>