current position:Home>Create a new vue3 project using vite

Create a new vue3 project using vite

2021-08-27 04:59:28 guangluo

Use Vite Create a new one Vue3 Project

Because the project needs , So I have to study how to build a project from scratch . The conditions that need to be met are various code checks of multi person cooperation 、commit Check 、CI/CD etc. .


Use vite To initialize a project .

yarn create @vitejs/app
 Copy code 

Input vue-demo, choice vue, Re selection vue. Just open this item .

formatting code

Use eslint + prettier Formatting .ts / .vue file . The operation is as follows :

  1. install eslint as well as prettier
yarn add eslint prettier -D
 Copy code 
  1. Set up eslint: Select the configuration item according to your own situation
yarn run eslint --init
 Copy code 
  1. add to .prettierrc.json file
  "singleQuote": true,
  "trailingComma": "all",
  "vueIndentScriptAndStyle": true

 Copy code 
  1. send eslint compatible prettier
yarn add eslint-config-prettier eslint-plugin-prettier -D
 Copy code 
  1. change .eslintrc.js In the document extends Field
extends: ['plugin:vue/essential', 'airbnb-base', 'prettier'],
 Copy code 
  1. download VSCode plug-in unit :eslint, prettier
  2. Set up VSCode The Default Formatting plug-in is prettier

Use stylelint Formatting .css / .scss file .

  1. install stylelint
yarn add stylelint -D
 Copy code 
  1. To configure .stylelintrc.json
  "extends": "stylelint-config-standard"
 Copy code 

Automatically format when submitting code

Use husky + lint-staged To automatically format .

  1. git initialization
```git init
2.  install  husky + lint-staged
yarn add husky lint-staged -D
 Copy code 
  1. husky Subsequent installation
npx husky-init && yarn
 Copy code 
  1. To configure pre-commit
npx husky add .husky/pre-commit 'npx lint-staged'
 Copy code 
  1. To configure lint-staged, stay package.json Add the following information :
"lint-staged": {
  "*.{js,vue}": [
    "eslint --fix"
  "*.{css,scss}": [
    "stylelint --fix"
 Copy code 

In this way, you can complete the detection and formatting of the code before submitting the code .

Detect the of submitted code commit Is it in line with the format

Use commitlint To detect git commit Information , To facilitate direct use of the default detection format . If customization is needed , Please have a look at [commitlint] Official website , The above provides some API, Used to customize .

  1. install commitlint
yarn add commitlint -D
 Copy code 
  1. To configure commitlint, stay package.json Add the following information :
"commitlint": {
  "extends": [
 Copy code 
  1. To configure commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
 Copy code 

This allows you to complete the verification of... When you submit the code commit Detection of information .

Set standard submission information

Now we have commit testing , Then there needs to be a way to create an effective commit. We use commitizen . Again , There is a need for customization , You can see [commitizen] Official website , Or write your own script .

  1. install commitizen
yarn add commitizen -D
 Copy code 
  1. To configure commitizen, stay package.json Add the following information :
"scripts": {
  "commit": "yarn run cz",
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
 Copy code 

Next , perform yarn commit This command , Then follow the prompts step by step , You can create a that meets the specification commit Information. .

thus , A simple project is created . Not yet CI/CD, If there is another time, add it next time .

copyright notice
author[guangluo],Please bring the original link to reprint, thank you.

Random recommended