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插件