从0搭建vue3，并配置项目规范

monkeyLi
975 阅读8分钟

从0搭建Vue3项目

1. 安装环境：

1.1 首先要安装node.js

安装完成后，运行命令，检测是否安装成功：

node --version

能看到node对应的版本号，就安装成功了。

1.2 vue-cli 安装

安装好node之后，直接在终端中运行以下命令，即可安装vue-cli 。

npm install -g @vue/cli

2. 创建项目

创建项目vue3-sample

vue create vue3-sample

根据步骤一步一步进行选择所需配置

  1. 选择手动模式 1.创建项目.png

  2. 选择安装的依赖，根据自己需要进行选择，按空格健进行选择，回车键进入下一步 2.选择依赖.png

  3. Choose a version of Vue.js that you want to start the project with 3.x (Preview)。选择vue的版本，这里选择vue3.x 3.选择vue3.x版本.png

  4. Use class-style component syntax 。是否使用Class风格装饰器？ 选择no

  5. Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 使用Babel与TypeScript一起用于自动检测的填充 选择yes

  6. Use history mode for router? 如果2中选择了Router，就需要进行路由模式选择。路由使用历史模式? 选择no

  7. Pick a CSS pre-processor。如果2中选择了CSS pre-processor，就需要进行选择css的预处理器 根据自己需要进行选择 这里选择的时less 4.选择css的预处理器.png

  8. Pick a linter / formatter config。 格式校验 选择严格模式 Prettier 5.格式校验.png

  9. Pick additional lint features。 代码检查的方式，这里选择保存时检查 （Lint on save）

  10. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files 。需要将依赖的配置文件怎么保存 ， 这里选择保存到单独的文件中 (in dedicated config files)

  11. Save this as a preset for future projects? 是否保存当前的配置，在将来使用。根据自己需要no或者yes，选择yes 以后创建项目时可以直接根据本次的配置直接创建项目，无需一步一步进行选择。 7.完成创建.png

12.完成以上步骤，等待编译 完成创建项目， 创建成功后会出现 npm run serve 命令，然后按照操作 cd 到项目目录中， 然后输入 npm run serve 命令 运行项目。等待编译项目，编译完成后 会出现访问地址 直接再浏览器中运行，就可以看到创建的项目了。 8.运行项目.png

配置项目规范

制定规范的目的：

  • 定制统一标准
  • 提高代码可维护性
  • 降低阅读者理解成本
  • 提高项目的可扩展性

规范涉及到开发的方方面面，有代码命名规范、各类语言书写的规范、编码风格规范、代码提交规范等等 。在这里介绍了部分规范：编码风格规范和代码提交规范。

1. 集成editorconfig配置

editorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

1.1 创建.editorconfig文件

# EditorConfig is awesome: https://EditorConfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

在项目的根目录中，直接创建.editorConfig 文件，复制上面的内容即可。

1.2 安装插件

VSCode需要安装一个插件EditorConfig for VS Code,用来读取.editorconfig配置文件

EditorConfig插件.png

2. 使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

2.1 安装prettier

前面创建项目的时候，已经选择了prettier 就无需再安装了，前面没有选择就需要执行下面的命令：

npm install prettier -D

2.2 配置.prettierrc文件：

  • useTabs：使用tab缩进还是空格缩进，选择false为空格缩进；
  • tabWidth：tab是空格的情况下，是几个空格，选择2个；
  • printWidth：当行字符的长度，推荐80，根据自己的喜好设置100、120都可以；
  • singleQuote：使用单引号还是双引号，选择true为单引号；
  • trailingComma：在多行输入的尾逗号是否添加，设置为 none；
  • semi：语句末尾是否要加分号，默认值true，选择false表示不加；
  • bracketSameLine:>括号是否在一行显示设置为true表示在一行
  • endOfLine: auto不让prettier检测文件每行结束的格式

直接在项目的根目录中创建 .prettierrc文件，复制下面的内容即可。

注意：.prettierrc文件中不能使用注释

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "bracketSameLine": true,
  "endOfLine": "auto"
}

2.3 创建.prettierignore忽略文件

在下面这些目录文件中，不需要进行检测

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

2.4 vscode需要安装prettier的插件

prettier插件.png

2.5 在项目的package.json的scripts中配置命令

 "scripts": {
    ...
    "prettier": "prettier --write ."
  },

然后在终端中运行 npm run prettier，就会对所有的文件进行代码格式化。

3. 使用ESLint检测工具

3.1 创建.eslintrc.js文件

在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

3.2 安装ESLint插件

ESLInt插件.png

3.3 解决eslint和prettier冲突的问题

我们安装了这两款检测工具，肯定会发生一些规范的冲突。我们可以安装插件来进行解决，直接运行下面的命令即可。

注意：在创建项目时，选择了prettier，就会自动安装这两款插件，就无需再执行次命令了

npm install eslint-plugin-prettier eslint-config-prettier -D

我们需要在.eslintrc.js 文件中添加配置,直接在extends数组末尾添加如下示例代码。

 extends: [
    ...
    'plugin:prettier/recommended'
  ],

4. git提交代码检查及规范

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉。

那么我们就需要在执行 git commit 命令的时候对其进行校验，如果不符合规范，那么就通过规范进行修复。

可以通过Husky工具实现，husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

4.1 安装Husky工具

在window系统中，终端不识别 && 这个符号， 可以采用;或者使用单引号来执行。

 // Mac安装 Husky
npx husky-init && npm install

// Windows安装 Husky 
npx husky-init ; npm install
npx husky-init '&&' npm install

安装完成后，会自动在根目录下生成.husky相关文件，这时需要将pre-commit文件中的npm test命令改成 npm run lint,这样我们在执行 git commit的时候会先执行eslint的校验，并自动代码格式化，然后再提交。

husky文件配置.png

4.2 git代码提交规范

在多人协同的团队中，规范化的提交信息更易读，便于查找。每个人的 git commit 的信息不一样，没有一个机制就很难保证规范化。而 commitlint 就可以帮助我们解决这个问题。commitlint 是一个自动化工具，它可以用来检查提交约定，如果提交不符合规范，则会拒绝该提交。这些规则是可以配置的。

4.2.1 安装 config-conventional

commitlint 推荐使用 config-conventional 配置去规范 commit的提交，安装命令如下：

npm install @commitlint/config-conventional @commitlint/cli -D
4.2.2 配置commitlint

在根目录创建commitlint.config.js文件，配置commitlint

module.exports = {
    extends: ['@commitlint/config-conventional'],
};

使用husky生成commit-msg文件，验证提交信息

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

上面这条命令的意思就是在 .husky 文件夹创建一个 commit-msg 文件，然后将npx --no-install commitlint --edit $1 命令写入文件中。后面的$1 表示的是参数。

注意

在windows系统中执行上面的命令可能会报错，无法创建文件，错误如下：

Usage:
husky install [dir] (default: .husky)
husky uninstall
husky set|add [cmd]

这是就需要分开执行，先执行一个创建 commit-msg 文件,命令如下：

npx husky add .husky/commit-msg

然后手动在 commit-msg 文件中添加如下命令:

npx --no-install commitlint --edit

commit-msg文件配置.png

到此就配置完成了。

4.2.3 提交规范

提交格式如下：

git commit -m <type>[optional scope]: <description>
  • type：必须，表示提交的改动类型；
  • optional scope：可选，表示提交的修改范围(main.vue)，需要使用括号包裹；
  • description：必须，表示提交的内容描述。

常见的 type 类型如下：

Type作用
feat引入新功能的更改
fix修补错误的更改
docs影响文档的更改。
style代码格式的更改（空格、格式、缺少分号等）
refactor代码重构的更改
perf优化相关，比如提升性能、体验
test添加缺失测试或纠正现有测试的更改
build影响构建组件的更改，如构建工具、依赖项、项目版本等
ci更改持续集成软件的配置文件和 package 中的 scripts 命令
chore变更构建流程或辅助工具(比如更改测试环境)
revert还原先前提交的更改
4.2.4 测试git规范提交

下面我们再按照之前的方式去提交代码 git commit -m 'message' 就会报错，无法进行提交。

git错误的提交.png

正确的提交方式应该是：

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'feat(xx模块): 增加 yyy 功能'
git commit -m 'fix: 修复 xxx 问题'

附上代码地址：码云代码地址

其他文章

elementplus最新版js实现按需导入

Delete ␍eslint(prettier/prettier)问题

avatar
文章
阅读
粉丝