• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

Some students may not remember so many steps, you can first collect, collect is equal to learning, later with the province of Baidu, ha ha!

vueThe scaffold3.X+

Since we installed version 2.x scaffolding before, now we need to install version 3.X scaffolding. Because vue-cli 3.x and vue-cli 2.x use the same Vue command, vue-cli 2.x is overwritten. If you still need to use older versions of vue Init, you can install a bridge tool globally.

Bridge tool installation

Install the bridge tool using NPM

npm install -g @vue/cli-init

# Install the bridge tool using Taobao image

cnpm install -g @vue/cli-init

If there is a problem with NPM, you can use CNPM to install it, or you can choose between the two

If you do not have an older version of VUE-CLI 2.x installed, you can skip the bridge and directly install vue-CLI 3.x or later

The installationvue-cli 3.x+

# Install using NPM

npm install -g @vue/cli

Install using CNPM

npm install -g @vue/cli

3. X and above installation is to use the above instructions, NPM and CNPM choose one to install. To test whether the installation is successful, enter vue -v in the command window to view the vue scaffold version number. As shown below:

​

Create a project

When creating a project, note: The project name cannot have Chinese characters, and does not support the hump (including capital letters).

#vue create Project name

vue create vue-cli3

After running the create project command:

​ 

Default is to use the default configuration, default installation and automatic configuration of Babel, esLint

If the default option is selected, a basic VUE project is built (no VUe-Router and no VUex)

Note: the above two defaults are vue2 and vue3 (we are studying vue2, so we can choose vue2)

Manually select features is a custom configuration, which needs to be Manually configured or you can select one to be configured

Here I choose manual configuration ( Manually select features )

Use the ↓ key on the keyboard to select Manually Select Features and press Enter. The following configuration items are displayed

​

Use the ↑ ↓ arrow to select the item to be configured. Press space to select the item, press A to select all, and press I to select the item

​

Select the configuration items you need

Here are my configuration items:

​

Description of each configuration item:

() Choose Vue version // Select Vue scaffold version

() Babel // transcoder, which can convert ES6 code into ES5 code and execute in the existing environment.

TypeScript// TypeScript is a superset of JavaScript (suffix.js) (suffix.ts) that includes and extends TypeScript

JavaScript syntax needs to be compiled and output as JavaScript to run in the browser

() Progressive Web App (PWA) Support//

() Router // VUE Router

() Vuex // Vuex (VUE state management mode)

() CSS pre-processors // CSS pre-processors (e.g. Less, Sass)

Linter/Formatter // code style checking and formatting (e.g. : ESlint)

() Unit Testing // Unit tests

E2E Testing // E2E (end to end) Testing

After selecting the configuration item, press Enter

​

If you select Choose Vue version, you will be asked which version of scaffolding you use. Here I choose 2.x

Select the CSS preprocessor

​ 

Here I’m going to choose Sass/Scss(with Dart-sass)

Node-sass is automatically compiled in real time. Dart-sass needs to be saved before it takes effect. The latest features of Dart-SASS will be implemented on this platform. And Sass/Scss performance will be better, it will be faster.

How to choose the storage location

​

Here I chose to put it in package.json

Whether to save the current configuration

​ 

So I’m going to say N and I’m not going to save, but if I type Y I’m going to have to say save name. If you save it you don’t have to step by step next time

Configure from scratch.

Waiting forVueInstall these project environments

Project start

  1. CD Project name The project directory is displayed

  2. NPM Run Serve starts the project

​ 

  1. Open your browser and enter the url project

​

Successful startup

vue-cli3with2 Version Differences

  • Vue-cli3 is built based on WebPackage 4, and vue-cli2 is built based on WebPackage 3
  • Vue-cli3 design principle is “0 configuration “, remove configuration files, build and confifig etc
  • Vue-cli3 provides vUE UI commands and provides visual configuration
  • Remove static folder, add public folder, and move index.html to public folder
  • The command to create the project vue create the project name

Directory structure:

​

Public is similar to the static folder, in which resources are packed intact

SRC source folder

SRC # is mainly used to write source code

.gitignore # exclude directory

.babel # Configure the installation package

Package. json # Configure the installation package

Package-lock # Load the version information in the package-lock file when it is accessed by others.

srcUnder themain.js

The vue instance created here has no EL attribute, but instead adds a $mount(‘ #app ‘) method to the end of the instance.

$mount(‘ #app ‘) : manually mount to the DOM of app

When a Vue instance has no EL attribute, the instance has not been mounted to a DOM. If you need to delay the mount, you can do it later

Call the vm.$mount() method dynamically to mount the vm

Note that this method is mounted directly on the DOM element of the id=app entry file index. HTML

import Vue from 'vue' // Import the constructor
import App from './App.vue'// Import the root component app.vue
// Build whether the information is displayed
Vue.config.productionTip = false
new Vue({
// Render: h=> h(App
render: h= > h(App),
// render: h => h(App)
// render:(function(h){
// return h(App);
// });
}).$mount('#app')
Copy the code

Custom configuration files

Although the project was created, it was not possible to meet the custom development requirements, because sometimes we wanted the browser page to open automatically as soon as the project started. At this point, you need to manually create a configuration file.

Create a vue.config.js configuration file in the root directory of the project. The file must be vue.config.js and vue-cli3 will scan automatically

Trace to modify the configuration file in this file.

// Modify the configuration in module.exports
module.exports = {
devServer: {
open: true.// Whether to open the browser after starting the service}}Copy the code

Of course you can also configure the port number, package directory and so on

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Those who want to make friends with bloggers can go to 🌹

Bloggers are honest and answer questions for free ❤

​