The whole process of Vue3 project construction

Table of contents

I. Introduction

2. Construction preparation

3. Build the project

4. Start the project

---

I. Introduction

On September 19, 2020, the much-anticipated Vue3 finally released the official version, named "One Piece" .

It also brings many new features: better performance, smaller package size, better TypeScript integration, and better API design.

2. Construction preparation

• Before developing, you need to make sure that your scaffolding ( vue-cli) version is above 3.x

• If the version does not meet the requirements, reinstallvue-cli

  npm install -g @vue/cli 

3. Build the project

1. Enter the directory where you want to store the Vue3 project, run and then Y:

vue create vue3-project //可以将vue3-project换成任何你想取的项目名

2. Three options appear:

Here we choose the configuration of the third custom project

• Vue3 is installed by default

• Vue2 is installed by default

• custom install

3. Select the configuration needed for project development:

• Babel: js compiler that transpiles code for backwards compatibility

• TypeScript: ts for short, a more standardized programming language than js

• Progressive Web App (PWA) Support: PWA is a progressive web application that combines the best of web and app experience

• Router: vue routing

• Vuex: pass values ​​between components, see Vuex for details

• CSS Pre-processors: css preprocessing

• Linter/Formatter: code stylization/formatting checks

• Unit Testing: Unit testing refers to the inspection and verification of the smallest testable unit in the software

• E2E Testing: E2E testing is a functional test. Unlike unit testing, the application is not broken down into smaller parts for testing - instead the entire application is tested.

4. Select the Vue version

5. Whether to choose class style components

6. Select ts processing tool and css preprocessor

7. Whether to use the history mode of the router

8. Choose css preprocessing language

9. Select the inspection specification for lint

• Only use the recommended specifications on the EsLint official website

• Use EsLint official website recommended specification + Airbnb specification

• Use EsLint official website recommended specification +Standard specification (general specification)

• Use EsLint official website recommended specification + Prettier specification (prettier specification)

10. Eslint check timing

• check on save

• check on submit

11. Configuration file selection

12. Whether the configuration forms a preset

13. Construction completed

4. Start the project

• into the project 

cd ./vue3-project

• run

npm run serve