当前位置:

vue-cli init vue3

访客 2023-09-18 643 0

安装 cli

  • npm i -g @vue/cli@4.5.13
  • 查看版本:vue -V
  • 升级版本:npm update -g @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 // 选择 vue 版本(*) Babel // 使用 babel( ) TypeScript // 不使用 ts( ) Progressive Web App (PWA) Support // 不使用 PWA(*) Router // 添加 vue-router(*) Vuex // 添加 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 // 选择 vue 3.0 版本
// ----------------------------------------------------------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) LessStylus
// ----------------------------------------------------------? Pick a linter / formatter config: ESLint with error prevention only ESLint + Airbnb config> ESLint + Standard config // 使用 ESLint 标准代码格式化方案ESLint + Prettier 
// ----------------------------------------------------------? Pick additional lint features: (*) Lint on save //  >(*) Lint and fix on commit  // 保存时 && 提交时,都进行 lint

升级

  • 在 v 3.0.0 版本中是不支持的最新的 script setup 语法
  • 执行指令升级: npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2
"vue": "^3.2.8","vue-router": "^4.0.11","vuex": "^4.0.2"

Eslint 规范代码

常用的规则扩展:

  • .eslintrc.js
  • ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象
  • 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {// 表示当前目录即为根目录,ESLint 规则将被限制到该目录下root: true,// env 表示启用 ESLint 检测的环境env: {// 在 node 环境下启动 ESLint 检测node: true,},// ESLint 中基础配置需要继承的配置extends: [/**vue/attribute-hyphenation:要求组件属性使用连字符命名,而不是驼峰命名。vue/html-closing-bracket-newline:要求HTML标签的右括号放置在新的一行。vue/html-closing-bracket-spacing:要求HTML标签的右括号前面有空格或换行符。vue/html-end-tags:要求HTML标签有明确的结束标记。vue/html-indent:要求HTML标签的缩进使用指定的空格数。vue/html-self-closing:要求没有内容的HTML标签使用自闭合形式。vue/max-attributes-per-line:要求每行最多只能有指定数量的属性。vue/no-template-shadow:禁止在Vue模板中使用与父级作用域中已声明的变量相同的变量名。*/"plugin:vue/vue3-essential", // vue3 校验规则"@vue/standard", // vue 常规校验规则],// 解析器parserOptions: {parser: "babel-eslint",},// 启用的规则及其各自的错误级别/*** 错误级别分为三种:* "off" 或 0 - 关闭规则* "warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)* "error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)*/rules: {"no-console": process.env.NODE_ENV === "production" ? "warn" : "off","no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",// eslint 希望函数名和括号之间需要空格,和 prettier 产生冲突"space-before-function-paren": "off","no-unused-expressions": "off","no-unused-vars": "off",},};

prettier 格式化代码

  • 创建 .prettierrc 文件
  • 安装 vscode 扩展 [Prettier - Code formatter]
  • 测试地址:https://prettier.io/playground/
{"semi":false, // 结尾不要分号"singleQuote":true, // 使用单引号"trailingComma":"none", // 尾随逗号、最后一行除外}
  • 设置保存自动格式化

  • vsCode 默认一个 tab === 4个空格,而 ESint 一个 tab 希望为两个空格

  • 如果 vsCode 安装多个代码格式化工具,点击鼠标右键,选择 prettier

约定式提交

  • 安装工具:npm install -g commitizen@4.2.4
  • 安装插件: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)'},skipQuestions: ['customScope', 'body', 'footer'], // 可以跳过的问题(对应 messages)subjectLimit: 72 // 文字长度}
  • 指令:git cz 代替 git commit

husky + commitlint 检查提交描述规范

  • 安装工具:npm i -D @commitlint/cli@12.1.4 @commitlint/config-conventional@12.1.4
  • 创建:commitlint.config.js 文件
// 使用 UTF-8module.exports = {// 继承的规则extends: ['@commitlint/config-conventional'],// 定义规则类型rules: {// type 类型定义,表示 git 提交的 type 必须在以下类型范围内'type-enum': [// 验证的错误级别 类似 eslint warn2,// 什么情况下验证 一直验证'always',['feat', // 新功能 feature'fix', // 修复 bug'docs', // 文档注释'style', // 代码格式(不影响代码运行的变动)'refactor', // 重构(既不增加新功能,也不是修复bug)'perf', // 性能优化'test', // 增加测试'chore', // 构建过程或辅助工具的变动'revert', // 回退'build' // 打包]],// subject 大小写不做校验'subject-case': [0]}}
  • 安装: npm i husky@7.0.1 -D
  • 启用:npx husky install、生成 .husky 文件
  • 生成指令:npm set-script prepare ‘husky install’
  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","prepare": "husky install"},
  • 执行指令:npm run prepare
  • 检验提交规范( 通过 husky 监听 commit-msg 钩子 ):在 .husky 文件中生成 commit-msg 文件
    • npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  • 检验代码规范( 通过 husky 监听 pre-commit 钩子 ):在 .husky 文件中生成 pre-commit 文件
    • npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~