脚手架
安装
npm install -g @vue/cli
yarn global add @vue/cli
查看版本
vue -V
vue --version
升级
npm update -g @vue/cli
yarn global upgrade --latest @vue/cli
搭建项目
创建项目
vue create 项目名
步骤
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
> Manually select features // 自定义
? Check the features needed for your project:
(*) Choose Vue version // 版本
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support // PWA
(*) Router
(*) Vuex
>(*) CSS Pre-processors // css 预处理器
(*) Linter / Formatter // 代码格式化
( ) Unit Testing
( ) E2E Testing
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
n // history 路由模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
Sass/SCSS (with node-sass)
Less
Stylus
? Pick a linter / formatter config:
ESLint with error prevention only // 仅包含错误的 eslint
ESLint + Airbnb config // airbnb 延申规则
> ESLint + Standard config // 标准规则
ESLint + Prettier
? Pick additional lint features:
(*) Lint on save // 保存时 lint ✔
>(*) Lint and fix on commit // 保存时 && 提交时，都进行 lint
? Use class-style component syntax? (Y/n): no // 类样式的组件语法
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)
是否 babel 和 ts 一起使用 ✔
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
(*) In dedicated config files // 单独配置文件 ✔
>(*) In package.json
? Save this as a preset for future projects? (y/N) n
是否将其保存为将来项目的预设
关闭语法检查
// vue.config.js
module.exports = defineConfig({
lintOnSave: false
})
若有需求可弹出脚手架配置
vue inspect > output.js
版本 >v3.28 支持 script setup 语法
npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2
项目配置
根目录 .eslintrc.js
module.exports = {
root: true, // 当前目录根目录、规则限制在该目录
// 检测环境
env: {
node: true
},
// 扩展包
extends: ['plugin:vue/vue3-essential', '@vue/standard'],
// 解析器
parserOptions: {
parser: '@babel/eslint-parser'
},
// 规则
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
quotes: 'warn', // 双引号警告
'space-before-function-paren': 'off'
}
}
根目录 .prettierrc
{
"semi": false, // 不需要引号
"singleQuote": true, // 单引号
"trailingComma": "none" // 逗号分隔，最后不加
}
vscode
- 打开设置
- 搜索 format on save 勾选
- 设置 搜索 tab size - 输入2
vue2 中 template 只允许存在一个根元素，但 vue3 支持 template 存在多个根元素； ，
若安装 vetur 插件，通过以下方案来 取消 vetur 对 template 的检测； 取消勾选并重启 VSCode；
约定式提交
commitizen 命令行工具，用于引导开发者按照一定的规范填写提交信息，通常与一个适配器（adapter）一起使用，以定义具体的提交信息格式。
npm install -g commitizen@4.2.4
cz-customizable 是一个适配器，它是 commitizen 的一个插件，允许你自定义提交信息的格式，配置完成可使用命令 git cz 代替 git commit
npm i cz-customizable@6.3.0 -D
package.json
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
创建自定义提交内容，根目录目创建配置文件 .cz-config.js，
module.exports = {
// 可选类型
types: [
{ value: 'feat', name: 'feat: 新功能' },
{ value: 'fix', name: 'fix: 修复' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 样式' },
{ value: 'refactor', name: 'refactor: 重构' },
{ value: 'perf', name: 'perf: 性能优化' },
{ value: 'test', name: 'test: 增加测试' },
{ value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },
{ value: 'revert', name: 'revert: 回退' },
{ value: 'build', name: 'build: 打包' }
],
// 提交步骤
messages: {
type: '请选择提交类型:', // commit 时选择以上 types 对应选择
customScope: '请输入修改范围(可选):',
subject: '请简要描述提交(必填):',
body: '请输入详细描述(可选):',
footer: '请输入要关闭的issue(可选):',
confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
},
// 可以跳过的步骤（对应 messages
skipQuestions: ['customScope', 'body', 'footer'],
subjectLimit: 72 // 长度
}
格式选择 UTF-8；
@commitlint/cli 校验代码提交消息是否符合指定规范；
@commitlint/config-conventional 预设配置包，基于常见 Git 提交约定提供了一套默认规则；
npm i -D @commitlint/cli@12.1.4 @commitlint/config-conventional@12.1.4
根目录库创建配置文件 commitlint.config.js
module.exports = {
// 继承的规则
extends: ['@commitlint/config-conventional'],
// 定义规则类型
rules: {
// type 类型定义（提交类型），表示 git 提交的 type 必须在以下类型范围内
'type-enum': [
2, // 验证的错误级别 类似 eslint warn （ 0 1 2 ）
'always', // 什么情况下验证 一直验证
[
'feat', // 新功能 feature
'fix', // 修复 bug
'docs', // 文档注释
'style', // 代码格式(不影响代码运行的变动)
'refactor', // 重构(既不增加新功能，也不是修复bug)
'perf', // 性能优化
'test', // 增加测试
'chore', // 构建过程或辅助工具的变动
'revert', // 回退
'build' // 打包
]
],
// subject 大小写不做校验
'subject-case': [0]
}
}
husky
安装
npm i husky@7.0.1 -D
生成 .husky 文件
npx husky install
初始化 husky 配置
// npm set-script prepare 'husky install'
"scripts": {
"prepare": "husky install"
}
npm run prepare
添加钩子（.husky > commit-msg 文件）- 提交消息时强制开发者使用正确格式的提交消息
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
vue/cli 自带 lint-staged，添加 pre-commit 检验代码规范是否符合 eslint 规范的代码；
# npx husky add .husky/pre-commit "npx lint-staged"
package.json 配置 lint-staged
"lint-staged":{
"src/**/*.{js,vue}":[
"eslint --fix",
"git add" // lint-staged v10 以下
]
}
element
vue2
vue add element
? There are uncommited changes in the current repository, it's recommended to commit or stash them first
y 检测到未提交文件是否继续
? How do you want to import Element
Import on demand 按需引入
element.js 文件
import Vue from 'vue'
import { Card, Row, Col } from 'element-ui'
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
vue3
vue add element-plus
? How do you want to import Element Plus? (Use arrow keys)：
- Fully import # 全局导入
- Import on demand # 按需导入
# 是否覆盖Element Plus的SCSS变量
? Do you want to overwrite the SCSS variables of Element Plus? (y/N)** ：
- no ✔
- yes
? Choose the locale you want to load, the default locale is English (en)**
- zh-cn ✔ # 中文
plugins 文件夹 > element.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
export default app => {
app.use(ElementPlus)
}
main.js
import installElementPlus from './plugins/element'
const app = createApp(App)
installElementPlus(app)
