A super detailed tutorial on how to use Vue-Cli3.0.

preface

In August, vue-CLI was updated to 3.x. The new version of scaffolding is very powerful. After trying it out, I like it very much.

Front-end advanced accumulation, public account, GitHub

Main contents:

Zero configuration start/pack one.vuefile
Detailed setup process
Key recommendation: Use graphical interfaces to create/manage/run projects

Installation:

Uninstall an old version:

If you have previously installed an older version of Vue-CLI (1.x or 2.x) globally, you need to uninstall it first:

npm uninstall vue-cli -g
Copy the code

Node version requirements:

3. X must be installed in Node.js8.9 or later (recommended 8.11.0+). Click here to install Node

Most of you have already installed Node. Use the following command line to check your version of Node:

node -v
Copy the code

If you don’t have enough, use the following command line to update Node to the latest stable version:

This module is designed to manage the node.js version of n stable // update your node versionCopy the code

On a MAC, if you update the version, you are prompted that you do not have enough permissions:

Sudo n stable // I found itCopy the code

Install the vue – the cli:

NPM install -g@vue /cli // Install cli3.x vue --version // Check whether the version is 3.xCopy the code

If cli3. X is not comfortable, cli3 can also use 2.x templates:

NPM install -g@vue /cli-init // install this module // to use the 2.x template: vue init webpack my-projectCopy the code

Zero configuration start/pack one`.vue`File:

Install extension:

npm install -g @vue/cli-service-global
Copy the code

After installing the extension, you can create a.vue file in any folder like this and run with it:

Vue build app. vue // Package the production environment and deploy itCopy the code

You can quickly start a service with just a.vue file, as shown below:

As shown in the figure, a node_modules package is generated when the service is started. After a little testing, the service supports ES6 syntax and hot updates, and a dist folder is generated when it is packaged. (Create a test.vue file and only have a node_modules/dist folder)

This is a great feature for developing libraries, components, small demos, etc.

Creating a project for the first time:

1. Command line:

vue create hello-cli3 
Copy the code

Hello -cli3 is the name of the folder. If it does not exist, it will automatically create a folder. If it does exist, it will be installed in that folder.
This is a small optimization compared to the 2.x time when you had to manually create a folder.

2. Select a template:

Initially there are only two options: default and Manually select Features

By default, only Babel and ESLint have to be configured separately, so we choose the second option to manually configure them.
After selecting the manual configuration, you will be asked to save the configuration, which is the Koro option in the image, so that we can only use the original configuration when creating the project in the future, instead of having to configure it again.

3. Select the configuration:

Select the configuration according to your project needs. The space bar is select or cancel, and the A key is select all

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, < I > to invert selection) < I > Reverse selection) > TypeScript // TypeScript source code Support () Progressive Web App (PWA) Support () Router // Support Vue-router () Vuex // Supports Vuex () CSS pre-processors. Linter/Formatter // Supports code style checking and formatting. () Unit Testing // Support Unit Testing. ( ) E2E TestingCopy the code

4. Select a CSS preprocessor:

If you select the Css preprocessor option, you will be asked to select this

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): // Select the CSS preprocessor (PostCSS, Autoprefixer, and CSS modules are supported by default) : > SCSS/SASS LESS StylusCopy the code

5. Whether to use routes`history`Mode:

Here I suggest to choose No, so that the package out and throw to the server can be directly used, later to use, you can also open up again.

If you choose Yes, you need to set it on the server.

Use history mode for router? // Requires proper server setup for index fallback in production. (Appropriate server Settings are required in a production environment to be ready for indexing)Copy the code

6. Select Eslint code validation rules:

> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
Copy the code

7. Select when to perform code rule detection:

It is recommended to save and check. By the time you commit, problems may have accumulated.

I have written an article about VsCode automatically fixing Eslint errors when saving.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, < I > to Invert Selection) >() Lint on save // Check () Lint and fix on commit // check on fix and commitCopy the code

8. Select e2E test:

? Pick a E2E Testing Solution: (Use arrow Keys) ❯ Cypress (Chrome only) Nightwatch (Selenon-based)Copy the code

9. Where to put Babel, PostCSS, esLint configuration files:

Usually we choose to put it on its own to keep package.json clean

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated Config Files In package.json // In package.jsonCopy the code

10. Whether to save configuration:

Save this as a preset for future projects? (Y/n) // Would you like to make a note of this preset configuration to use next time // After selecting Save, you will be asked to write a configuration name: Save PRESET as: name // Then you can use your configuration directly next time you enter the configurationCopy the code

11. Download dependencies

12. The webpack configuration directory is missing:

Take a look at the structure of the new project (below) and you will see that the 2. X webpack configuration directory is missing, i.e. the build and config folders are not there:

The advantage of this way is very friendly to the small white, not on the first two folders, a pile of documents, looking at the head are big.
And when you copy someone else’s configuration, it’s also very convenient, just copy the file over.
To customize webpack configuration, we need to create a vue.config.js file in the root directory. The file should export an object and then configure it
```
// exports of module. Exports = {// exports of module. }Copy the code
```
There are also some minor changes: the static folder has been changed to public, the Router folder has been changed to a single file, etc.

13. Startup project:

Start project: NPM run serve // not previous NPM run dev
Open http://localhost:8080:

Create/manage/run projects using a graphical interface:

The GUI is started

vue ui 
Copy the code

This is a global command that can be opened in any folder
Interface (below), important items can be saved (top) :

Create project and import project:

Once the directory is selected, import the project by clicking import below.
To create the project, fill in a folder name:
Then select the pre-saved Settings can be very convenient, recommended to use the graphical interface to create the project:

Project management:

When we click on the Hello-Cli3 project, we will enter the project management interface

1. Dashboard:

This dashboard, mainly for our convenience and set up
Click the button in the upper right corner to add/move these features.

2. Vue-cli3.x plug-in:

Ue – Cli3 plug-in functions, details understand the official document
Cli3 plug-in installation process:

3. Project dependency

Managing dependencies directly in the graphical interface is very comfortable!
When installing dependencies, remember to select develop/run dependencies!

4. Configure the project

There are some Eslint rule changes that can be made to the CLI:

5. Task:

Serve to run the project, click to run directly, no more typing commands!
You can clearly see how long each module has been used, so as to facilitate our targeted optimization:
Build package project: This is the main demonstration of the diagram function, more intuitive than the previous 2.x report generation, super!

6. Other

Night style interface, I prefer this interface
Go straight to the editor, great!
And a bunch of buttons

conclusion

Can say very seriously, I hope you can have some harvest after reading, try the new version of vue-CLI!

I hope that after watching the friends can click like/follow, your support is the biggest encouragement to me.