Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use vue-cli3 to create a project. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

First, set up the vue environment

Install Nodejs official website to download Nodejs, if you want a stable development environment, then LTS (Long Time Support) long-term support version, stable.

Click me to enter the official website of node.

After installation, cmd enter node-v to query whether the installation is successful. The following version number indicates success.

II. Vue scaffolding tools

To install vue-cli globally, enter on the command line:

Npm install-- g vue-cli

It is very slow to directly use the official image of npm in China. Taobao image or yarn is recommended here.

The installation of Taobao image is as follows

Npm install-g cnpm-after successful installation of registry= https://registry.npm.taobao.org//, use cnpm i xxx instead of npm install xxx 3, create the project vue create project name vue create code / / where code is your project directory name (confirm and proceed to the next step)

At the beginning, enter will appear the following two items

Default (Vue 3) ([Vue 3] babel, eslint) (babel or eslint support is provided by default)

Manually select features (manually select project properties)

We can choose what we need through the up and down keys and spaces. Generally, we will choose to configure it manually.

4. Select manually select (enter key to confirm and proceed to the next step)

Wang gives a brief description of each function:

Babel is mainly used to convert es6 syntax to compatible js (selected)

TypeScript supports writing code using typescript syntax

Progressive Web App (PWA) Support [makes web pages more like native app]

Router supports the vue routing configuration plug-in (usually selected)

Vuex supports vue program state management mode (usually selected)

CSS Pre-processors supports css preprocessor (usually selected)

Linter / Formatter supports code style checking and formatting (selected)

Unit Testing unit test

E2E Testing E2E Test

Common project choices are as follows

Choose to enter when you are finished. Here we choose 3.x.

6. Enter after completion and the following interface appears

What this means is to ask you whether you use history mode in this project. If you choose Y, you need to configure the backend. Please refer to the vueRouter official website for explanation. Here we choose n.

7. Enter appears the following interface

Which CSS preprocessing language do you choose? I usually use SCSS in my project. I chose the first one.

8. Enter appears the following interface

This means to choose a way to format the code: I usually choose ESLint + Prettier

9. Enter appears the following interface

What this means is to ask you when to check the code rules, I will usually choose to save and check, that is, Lint on Save

Enter appears the following interface

What this means is where to put these configuration files of Babel,PostCSS,ESLint, usually we will choose to put them in a separate location to keep the package.json files clean, so choose the first one.

11. Enter appears the following interface

The question here is whether you record the configuration selection this time. After the selection, you will be asked to choose a name for this configuration, so that you can quickly select the configuration next time, and the project will be initialized after you enter, as shown in the following figure:

Start the project according to the prompts

According to the instructions, we are prompted to execute cd code first, then npm run serve.

13. When we need to customize the webpack-related configuration, we need to create a vue.config.js file in the project root directory, which will be automatically loaded by @ vue/cli-server. The relevant configuration content will be very detailed on the official website. You can go to the official website to have a good look. That's all for today. See you next time at the end of this period!

This is the end of this article on "how to use vue-cli3 to create a project". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.