How to build a complete Vue3.0 + TS project

I believe you must have paid attention to Vue3.0’s speech on September 18th. Now Vue3.0 has entered the RC stage (the candidate version of the final product, if there is no problem, it can be released into the official version). Therefore, learning Vue3.0 is an inevitable trend for us. Today, I would like to share the detailed construction process of Vue3.0, hoping that it can be helpful for those who are new to Vue3.

Now let’s get to today’s topic

A, install,

1. Install nodejs

Nodejs can be downloaded from nodejs.org/zh-cn/downl…

• We choose according to their own computer configurationLTS (latest stable versionDownload it and install it. The installation steps are omitted here.

2. Uninstall the earlier version

If you are using an older version of vue-cli1. x or vue-cli2. x you need to uninstall it first; If no, skip this step

• Open a command window and run the following command to uninstall:

npm uninstall vue-cli -g
Copy the code

3. Install vue-CLI 3.x

• Build Vue3.0 project, must depend onVue cli - 3.0Or a later version, open the command window, and run the following command to install and view the version:

// Install the latest vUE - CLI
npm install -g @vue/cli   
// Check the version number
vue -V                
Copy the code

Ii. Project construction process

1. Create a new project. Now I will create a project named my-Demo

vue create my-demo
Copy the code

2. After entering, you will be prompted to select a preset:

NewTs: At the end of the project creation, you will be asked if you want to keep this configuration for direct use next time. Default: a Default configuration that quickly builds a project, providing support for Babel and esLint Manually select features: Manual project configuration allows you to select appropriate dependencies according to the needs of the project and have more options. I will adopt this approach in the following steps.Copy the code

3. Vue-cli3.x provides the following features for selection. You can add configuration items according to project requirements:

Use up or down keys to switch configuration items. Use the space bar to select or deselect a configuration item

Babel: We can easily transcode our source code (es6=> ES5) TypeScript: We can use TS to write strongly typed JS. Progressive Web App(PWA) Router: Vuex: Vuex state manager CSS pre-processors: CSS pre-processors: less, sass, Linter/Formatter, etc. Use code style checking and formatting Unit Testing: Use E2E Testing: Use E2E Testing, end to end is a type of black box TestingCopy the code

4. Configure each selected configuration item

• Use class-style component syntax? (Y/n)
  
  

Whether to use a Class (Class) style decorator that creates a Vue instance with export Default Class Home extends Vue{}

• Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
  
  

Use Babel for escape, along with TypeScript for automatic detection

• Use history mode for router?
  
  

Route mode, whether to select the history mode, enable the history mode, after the project build, there may be a blank page

• Pick a CSS pre-processor?
  
  

Choose a CSS preprocessor, in this case LESS

• Pick a linter / formatter config?
  
  

Select a code formatting tool

TSLint: ESLint with error Prevention only: ESLint will only alert you to errors: ESLint + Prettier: ESLint + Prettier (code quality inspection) + Prettier (code formatting tool)Copy the code

• Pick additional lint features?
  
  

Code inspection method: check when saving or check when submitting; I choose, check when I save

• Pick a unit testing solution?
  
  

Choose a unit test solution, the current Vue official recommendation is also JEST, in comparison, simple configuration and easy to use, recommended to choose JEST

• Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  
  

How to store configuration files such as Babel, PostCSS, ESLin, etc. in separate configuration files? Or in package.json? Here is the convenience configuration clear look, I select each configuration file separately.

• Save this as a preset for future projects?
  
  

Do you want to save the current configuration so that it can be built quickly in a later project? After the configuration is saved, you can directly select this configuration when creating projects

5. After the configuration is complete, wait until the dependency installation is complete

6. After the build is complete, the project directory structure is as follows

Compared to vue2. x, the directory of Vue3.0 is indeed much simpler, and we will find that Vue3.0 does not have webpack.config.js configuration, because Vue3.0 abstractions Webpack through @vue/cli-service. And default to webPack configuration. In Vue3.0, you can customize webPack by creating vue.config.js in the root directory of your project.

I will write a separate article to share the configuration of vue.config.js

Iii. Launch Project:

cd my-demo
npm run serve
Copy the code

At this point, the complete construction process of Vue3.0 project is completed. I will share the configuration of Vue3.0 vue.config.js separately later. If there are any mistakes in this article, please correct them. Thank you

Original is not easy, reprint please indicate the author and link yo ~

Welcome to pay attention to the public number ** [front-end UU] **, regular access to good articles recommended yo ~