Vue Crawl Pit Road (12)--VUE-CLI 3.x construction project

Vue Cli 3 Official documentation: https://cli.vuejs.org/zh/guide/

First, install @vue/CLI

After updating to 3.x, VUE-CLI's package name changed from VUE-CLI to @vue/CLI

If you previously installed an older version of VUE-CLI (1.x or 2.x), you first need to uninstall it using the following command

If you do not install an older version of VUE-CLI, you can skip the uninstall direct installation

NPM Uninstall Vue-cli-g# ORGlobal

Then reinstall the new version of the @vue/CLI

NPM install-g @vue/cli# ORyarn Global add @vue/CLI

After the installation is complete, you can use VUE-V (this V is uppercase) to view the version number

Ii. three ways to create a project

1.x and 2.x vue-cli using the init command to create the project

Vue Init webpack Project-name

3.x is also supported in this way, and its operation results are the same as before, the details can be referred to the "Vue Crawl Road (a)"

But the front-end Moe may not be accustomed to the way the command line is built

So Vue/cli 3.x added a graphical way to create the project

First, you have to open the terminal in the specified directory , and then run:

Vue UI

The browser will then open a page that will create the project according to the page's Guide

But I still recommend using command-line tools, which is a programmer's identity.

Vue Create Project-name

The project-name here is a custom project name that will generate the corresponding folder after the command executes

Three, detailed parameters

When creating a project using the Create command, there are many configuration items that need to be selected

If you are unfamiliar with a configuration item, you can select the first option directly

First you need to select a module

If default is selected, a basic Vue project (no vue-router and no Vuex) will be built.

It is recommended to select the second manually select features

Then, depending on your needs, use the space bar to select specific modules

If you are unfamiliar with what the above modules represent, you can check the module first by following the schematic

This creates a project that contains Vue-router, Vuex, and Postcss

For Vue-router and Vuex, you can refer to my previous blog:

"Vue Crawl pit Road (iii)--use Vue-router jump page"

"Vue Crawl pit Road (iv)-First contact with Vuex"

After checking, use the enter key to enter the next

We need to select the route mode, yes is the history mode, no is the hash mode

Meng Xin can start with the hash mode, but the actual project usually uses the history mode

Then select a precompiled tool for the appropriate CSS

If you're not familiar with it, choose Sass or less, because stylus doesn't support native CSS notation.

You will also need to select the ESLint calibration rules, the timing of the format, and the location of the configuration items of each plug-in, and if you are unfamiliar, choose the first one.

And then there's the process:

Finally, choose whether to save the configuration item as a preset, and then configure finish to start building the project

After the project has been built, the related dependencies are automatically installed, and you can start the project directly:

NPM Run serve

Iv. Vue.config.js

Once you have completed the above steps, you are ready to develop the Vue project, but cannot meet the customized development requirements

This is the time to manually create a vue.config.js, the official configuration document can refer to here

Here I put on a common vue.config.js

//Vue.config.jsModule.exports ={baseUrl:‘/‘, OutputDir:' Dist ',//Packaged DirectoryLintonsave:true,//verifying the format when savingProductionsourcemap:false,//whether the production environment generates SOURCEMAPdevserver: {open:true,//whether to open the browser after starting the serviceHost: ' 0.0.0.0 ', Port:8384,//Service PortHttpsfalse, Hotonly:false, Proxy:NULL,//Set up proxyBefore:app = {}  },}

Vue.config.js also has a lot of very powerful configuration items.

For example, building pagesfor Multi-page Applications , PWA for PWA , Advanced CSS Packaging scheme CSS

If you're interested, you can study the official documents carefully.

V. Environment variables

Small partners with a certain development experience know that a project usually has three modes:

Development Mode Development, testing mode test, Production mode production

In development, the three development patterns are usually differentiated according to the node_env of the environment variables.

And then through a lot of switch ... case to judge

And 3.x doesn't have to write switch...case in the project.

Create files prefixed with. env directly under the root directory

The. env file here holds the common parameters, which can be obtained in all modes

The parameters in other files can only be obtained in the corresponding mode.

Then add the corresponding key-value pairs within the file

Then add the corresponding mode in the scripts command of Package.json

Serve and bulid all have default modes, but it is best to explicitly display the pattern in the configuration item

You can then get the value in the corresponding mode in the project.

For more information on environment variables and patterns, please refer to the official documentation

Vue Crawl Pit Road (12)--VUE-CLI 3.x construction project