VUE3案例大事件项目

props解构代码：

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验（props解构 丢失响应式）
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }

环境同步：

安装插件 ESlint，开启保存自动修复
禁用插件 Prettier，并关闭保存自动格式化
打开vscode设置加入代码

// 当保存的时候，eslint自动帮我们修复错误
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
//关闭保存时自动格式化
"editor.formatOnSave": false,

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )
打开bash终端，此时需要安装git，选择默认安装选项一直next即可完成安装。

给本机配置全局姓名和邮箱（配置一次即可）

查看是否成功

可以看到以下信息意味成功

打开bash终端
husky 配置

1.git初始化git init

git init

2.初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install

初始化后出现.husk文件夹

修改 .husky/pre-commit 文件

问题：pnpm lint 是全量检查，耗时问题，历史问题
所以，要这样做,就只看暂存区的代码：

安装

pnpm i lint-staged -D

配置 package.json

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

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

修改 .husky/pre-commit 文件

pnpm lint-staged

将项目需要的全局样式 和 图片文件，复制到 assets 文件夹中, 并将全局样式在main.js中引入

import '@/assets/main.scss'

安装 sass 依赖

pnpm add sass -D

哈希模式页面路径带‘#’，历史模式不带‘#’
路由对象 router，路由参数 route
vite中的环境变量 import.meta.env.BASE_URL 就是vite.config.js中的base配置项

创建一个路由实例，路由模式是history模式，路由的基础地址是 vite.config.js中的 base 配置的值，
默认是 / , 环境变量地址： https://cn.vitejs.dev/guide/env-and-mode.html

引入 Element Plus 组件库

官方文档： https://element-plus.org/zh-CN/guide/quickstart.html
安装

$ pnpm add element-plus

pnpm add -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中,在vite.config.js

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

彩蛋： 默认 components 下的文件也会被自动注册~

Pinia 构建仓库 和 持久化
持久化
官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

安装插件 pinia-plugin-persistedstate

pnpm add pinia-plugin-persistedstate -D

安装axios

pnpm add axios

安装 element-plus 图标库

pnpm i @element-plus/icons-vue

eslintrc 中声明全局变量名, 解决 ElMessage 报错问题

module.exports = {
  ...
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }
}

富文本编辑器 [ vue-quill ]
官网地址：https://vueup.github.io/vue-quill/

安装包

pnpm add @vueup/vue-quill@latest

注册局部组件，导包

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

ChatGPT 3.5 的使用 (4.0 使用方式一致，回答准确度更高，但付费，且每3小时，有次数限制)

正常注册流程 (IP限制，手机号限制)

三方整合产品

谷歌搜索：chatgpt 免费网站列表

https://github.com/LiLittleCat/awesome-free-chatgpt

工具 Github Copilot 智能生成代码
工具 Github Copilot 智能生成代码的使用
安装步骤
登录 github，试用 Copilot
打开 vscode， 搜索并安装插件 Copilot

或codegeex插件