Create a project

1. The console enters the command to create the project:vue create vue3-template

Vue CLI v4. 513.┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐ │ │ │ New version available4.513. → 5.01.│ │ Run NPM i-g@vue /cli to update! │ │ │ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘? Please pick a preset: Default ([Vue2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features // Manually select features
? Check the features needed for your project: 
/ / return after❯◉ Choose Vue Version ◉ Babel ◉ TypeScript infection Progressive Web App (PWA) Support ◉ Router ◉ Vuex NanoCSS pre-processors// CSS preprocessing such as LESS and Sass◉ Linter/Formatter// Code specification relatedThe Infection control Unit was borne out into infection E2E Testing/ / return after
? Choose a version of Vue.js that you want to start the project with 
  2.X ❯3.x 
/ / return after
Use class-style component syntax? (y/N)  N// Whether to selectclassStyle component // After press EnterUse Babel alongside TypeScript (required for modern mode.auto-detected polyfills.transpiling JSX)? Yes/ / usebabel or tsccompilets(babelYou can addpolyfill) // Press EnterPick a CSS pre-processor (PostCSS.Autoprefixer and CSS Modules are supported by default) :Less/ / selectcssPreprocessor // After enterPick a linter / formatter config: Prettier/ / selecteslint/ / return afterPick additional lint features: Lint on save// Check when saving // Press EnterWhere do you prefer placing config for Babel.ESLint.etc.? In dedicated config files// Whether to save the configuration file to a separate file // Press EnterSave this as a preset for future project? (y/N) n // NSave as a templateCopy the code

Second, code specification

1. Integrate the EditorConfig configuration

EditorConfig helps maintain a consistent coding style across multiple developers for the same project on different IDE editors. Create an.EditorConfig file at the root of the project and configure the encoding style (the IDE editor automatically reads the configuration information).

# http://editorconfig.org

root = true

[*] # said all applicable charset = utf-8 # set file for utf-8 character set indent_style = space # indented style (TAB | space) indent_size end_of_line = = 2 # indentation size Lf # control line type (lf | cr | CRLF) trim_trailing_whitespace = true line # remove any white space characters of the first insert_final_newline = true # always inserts a new row at the end of the file (*#md files apply the following rules Max_line_length = off
trim_trailing_whitespace = false
Copy the code

📢 : VS Code requires a plug-in to automatically read the configuration: EditorConfig for VS Code

2. Use the Prettier tool

Prettier Prettier is a powerful code formatting tool that supports JavaScript, typescript, CSS, less, JSX, Angular, Vue, GraphQL, JSON, Markdown, etc. Prettier is a powerful code formatting tool that supports JavaScript, typescript, CSS, LESS, JSX, Angular, Vue, JSON, Markdown

1). Install Prettier: NPM I Prettier -d

2). Configure the. Prettierrc file

{
  "useTabs": false.// Use TAB indent or space indent
  "tabWidth": 2.// if TAB is a space, several Spaces
  "printWidth": 80.// The length of the line break character
  "singleQuote": true.// Use single or double quotation marks
  "trailingComma": "none".// Whether the trailing comma entered in multiple lines should be added
  "semi": false             // Whether to add a semicolon to the end of the statement
}
Copy the code

3). Configure. Prettierignore Ignores a file

/dist/* .local .output.js /node_modules/** **/*.svg
**/*.sh /public/*Copy the code

4). VS Code needs to install prettier plug-in

5). Testing if Prettier works

1. Test1: Save code in code

2. Test2: Command to configure one-time modification (configure script: “prettier”: “prettier –write.” in package.json)

3. Use ESLint to check

1). We chose ESLint when we created the project earlier, so Vue will help us configure the ESLint environment we need by default.

2). VS Code needs to install the ESLint plugin

3). Solving the conflict between ESLint and Prettier:

Install plug-ins (These plug-ins are installed automatically if Prettier is selected by Vue when creating a project)

code: npm i eslint-plugin-prettier eslint-config-prettier -D

Add prettier to the.eslintrc.js file:

  extends: [
    'plugin:vue/vue3-essential'.'eslint:recommended'.'@vue/typescript/recommended'.'@vue/prettier'.'@vue/prettier/@typescript-eslint'.'plugin:prettier/recommended'].Copy the code

4. Git Husky and eslint

Although our project uses ESLint, there is no guarantee that the problems in ESLint will be resolved before the team members submit their code. That is, we want the repository code to conform to THE ESLint specification, so we need to verify it before the team members execute git commit. If it does not conform to the ESLint specification, it will be fixed automatically through the specification; How do you do this? Husky is a git hook tool that triggers the various stages of git commit: pre-commit, commit- MSG, pre-push.

NPX husky-init && NPM install does several things:

• Install husky-related dependencies
• Create a. Husky file under the project
• Add the script to package.json (“prepare”: “husky install”)

2). Change the content of the pre-commit file

Git commit will automatically validate your code.

Git commit specification

Git commits for projects are usually committed in a consistent style, which allows you to quickly locate each commit and control your version later. But it would be a hassle to write these manually every time, so we can use a tool here: Commitizen(a tool that helps us write normative Commit messages)

1). Install Commitizen: NPM I Commitizen -d

2). Install AND initialize Z-Xcom – Changelog

npx commitizen init cz-conventional-changelog –save-dev –save-exact

This command will help us to install CZ-Conventional – Changelog and configure the following in package.json:

"config": {
  "commitizen": {
     "path": "./node_modules/cz-conventional-changelog"}}Copy the code

We need to use NPX cz to submit the code:

• The first step is to select Type, the type of this update

• Step 2 Select the scope of this modification (scope)
• Step 3 Select the information to submit (Description)
• Step 4 Submit detailed description
• Step 5 is a major change
• Step 6 Whether to affect an Open issue

📢 We can also build a command in scripts to execute cz: “commit”: “cz”, after which commit can be committed using the command NPM run commit

3). Code submission verification

Specification submitted style according to cz, but there are colleagues in the non-standard format through the git commit submitted should be how to do? You can restrict commits via commitlint;

3.1Install @commitlint/config-conventional and @commitlint/cli:

npm i @commitlint/config-conventional @commitlint/cli -D

3.2. Create the file commitlint.config.js in the root directory and configure commitLint

module.exports = {
  extends: ['@commitlint/config-conventional']}Copy the code

SQL > select commit from husky; SQL > select commit from husky

npx husky add .husky/commit-msg “npx –no-install commitlint –edit $1”

Third party library integration

1. Vue.config. js configuration mode

Method 1: Directly use the options provided by the CLI to configure:

• For example, publicPath: configures the subdirectory for application deployment (the default is/, which is equivalent to deploying inhttps://www.my-app.com/);

• For example, outputDir: modify the output folder;

Method 2: Use configureWebpack to modify the WebPack configuration.

• It could be an object, it could be merged directly;
• It can be a function that receives a config that can be used to modify the configuration.

Method 3: Modify the WebPack configuration using chainWebpack:

• Is a function that receives a Webpack-chain-based config object that can be modified.

const path = require('path')

module.exports = {
  outputDir: './build'.// configureWebpack: {
  // resolve: {
  // alias: {
  // views: '@/views'
  / /}
  / /}
  // }
  // configureWebpack: (config) => {
  // config.resolve.alias = {
  // '@': path.resolve(__dirname, 'src'),
  // views: '@/views'
  / /}
  // },
  chainWebpack: (config) = > {
    config.resolve.alias.set(The '@', path.resolve(__dirname, 'src')).set('views'.'@/views')}}Copy the code

2. Vue-router integration (skip this step if vue-Router is selected during project initialization)

1. Install the latest version of vue-router: NPM install vue-router@next

2. Creating a Router Object

import { createRouter, createWebHashHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/'.redirect: '/main'
  },
  {
    path: '/main'.component: () = > import('.. /views/main/main.vue')}, {path: '/login'.component: () = > import('.. /views/login/login.vue')}]const router = createRouter({
  routes,
  history: createWebHashHistory()
})

export default router
Copy the code

3. Install the router

import router from './router'
createApp(App).use(router).mount('#app')
Copy the code

4. Configure jumps in app.vue

<div id="app">
  <router-link to="/login">The login</router-link>
  <router-link to="/main">Home page</router-link>
  <router-view></router-view>
</div>
Copy the code

3. Vuex integration (skip this step if vuEX is selected during project initialization)

1. Install vuex: NPM I vuex@next

2. Creating a Store object

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      message: 'hello vuex! '}}})export default store
Copy the code

3. Install store: createApp(App).use(router).use(store).mount(‘# App ‘)

4. {{$store.state.message}}

Four,

The construction of the project is over for now, and the next phase will integrate Element-Plus on top of the project. 📢 : This blog is a personal study note made in the process of learning Vue3 + TS by Coderwhy, the teacher is really too detailed ~