【博学谷学习记录】超强总结，用心分享 _ 前端开发 优医问诊H5项目(1)

---

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

---

创建vue3项目

vscode插件安装

在 .vscode/extensions.json 文件中，如下图，里面是推荐安装的vscode插件


还有 Eslint 插件也要安装
注意
○ vscode 安装了 Prettier 插件的可以先 禁用，或者关闭保存自动格式化功能，避免和项目的 Eslint 风格冲突。

可选：
○ gitLens 代码git提交记录提示
○ json2ts json自动转ts类型 不建议
○ Error Lens 行内错误提示

提示：
○ 大中型项目建议开启 TS托管模式 , 更好更快的类型提示。（关闭vscode内置的ts支持）
方法：在插件栏里搜索 @builtin ，找到 JavaScript 和 TypeScript 的语言功能 ，禁用它就能开启 TS 托管模式

eslint 预制配置

// .eslintrc.cjs中     默认保存时执行格式化
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']
}

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

执行格式化代码的命令：
pnpm lint
vscode 开启 eslint 自动修复 （在保存代码是自动格式化，如果没有成功，可以去设置文件settings.json中加入代码）

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

项目解构调整

安装sass：pnpm add sass -D
并在main.ts中引入 styles/main.scss 文件

vue3路由

router/index.ts 中
1、创建路由实例 createRouter{{// 配置对象}}
2、配置选项中 router:[ // 路由规则 ]
3、createWebHistory 使用路由history模式
4、createWebHashHistory 使用路由hash模式
5、import.meta.env.BASE_URL 路由的基准路由 create—vue脚手架提供的数据（环境变量）
(在vite.config.ts文件中，在export default defineConfig中添加 base:‘/abc’ )

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/login', component: () => import('@/views/Login/index.vue') }
  ]
})
export default router

数据持久化 以及 pinia仓库统一管理

使用 pinia-plugin-persistedstate 实现pinia仓库状态持久化，且完成测试
安装：

pnpm i pinia-plugin-persistedstate

使用 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './stores'

import 'vant/lib/index.css'       // 导入vant样式
import './styles/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)

app.mount('#app')

新建stores/index.ts 统一管理仓库
目录下的入口文件
1、单独维护pinia
2、创建好的pinia仓库统一从这里导出

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'         // 本地持久化插件

// vue使用pinia插件，在利用pinia使用插件
const pinia = createPinia()
pinia.use(persist)       //  插件是pinia的，所以要使用pinia，再使用这个插件

export default pinia

// 完整写法
// import { useUserStore } from './user'
// export { useUserStore }
// 统一导出
export * from './user'

之后在组件中要导入某个仓库时，可以省略文件名，比如要导入user仓库（即user.ts）

import { useUserStore } from './stores'
const store = useUserStore()

配置 stores/user.ts 实现用户信息操作，并开启持久化

import type { User } from '@/types/user'    // 在types/user.d.ts中设置用户数据类型
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        // 开启持久化（使用本地存储，默认是localStorage）
  }
)

测试：调用user.ts中的方法，看是否成功

移动适配

安装：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
    }
  }
}