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

This article mainly introduces "how to install, configure and use Vue CLI". In daily operation, I believe many people have doubts about how to install, configure and use Vue CLI. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to install, configure and use Vue CLI". Next, please follow the editor to study!

What is CLI scaffolding (specification, standard)

Official: standard tools developed by Vue.js

* * CLI * *: command line interface

Command line interface (English: command-line interface, abbreviation: CLI) is the most widely used user interface before the popularity of graphical user interface. It usually does not support the mouse. Users enter instructions through the keyboard, and the computer receives the instructions and executes them. Some people call it character user interface (CUI).

What is Vue CLI

The command line interface of vue, which is equivalent to that of java (project creation management: maven project build tool)

Through a standard vue application provided by vue cli, this vue application has a corresponding scaffolding specification.

Vue CLI is a complete system for rapid development based on Vue.js. After using Vue scaffolding, the page we developed will be a complete system (project). Front-end system

Scaffolding (specification of vue project) = "commands need to be used when building =" there is a specification for a built project = "command: build project + development: image interface development

III. Advantages of Vue CLI

Build interactive project scaffolding through vue-cli.

Quickly start zero configuration prototype development through @ vue/cli + @ vue/cli-service-global (no need to introduce vue-min.js, etc.)

A runtime dependency (@ vue/cli-service), which:

Upgradeable; (one command is done)

Built on webpack with reasonable default configuration; (webpack front-end packaging tool) index.html+ components (N)

Can be configured through the configuration file within the project; cli project configuration file is added

It can be extended through plug-ins. In the cli project

A rich collection of official plug-ins that integrates the best tools in the front-end ecosystem. Webpack Packaging tool = > dist Directory nodejs Server (tomcat java) Hot deployment plug-in npm package

When webpack is written, the javascript6 runtime automatically compiles to javascript6.

A fully graphical user interface for creating and managing Vue.js projects (supported by vue cli3.x | vue cli 2.x is currently used in the enterprise)

Node.js servers support hot deployment

IV. Vue CLI installation

1. Node.js environment preparation

(1) download nodejs

Http://nodejs.cn/download/

Windows system: .msi installation package (exe) specified installation location. Zip (compressed package) directly extract the specified directory

Mac os system: .pkg installation package format automatic configuration environment variable .tar.gz (compressed package) unzipped and installed to the specified name

(2) configure nodejs environment variables

1.windows system:

Calculate the properties above-> Advanced properties-> add the following configuration to the environment variable:

NODE_HOME= nodejs installation directory

PATH = xxxx;%NODE_HOME%

2.macos system

Recommended. Pkg installation directly configures the node environment

(3) verify whether the nodejs environment is successful

Launch the cmd window

Enter the command anywhere: node-v

Just show the node version v14.0.0

(4) introduction to npm

Node package mangager nodejs package management tool front-end mainstream technology npm for unified management

Maven management java backend relies on remote repository (central repository) Ali cloud image

The npm management front-end system relies on the remote warehouse (central warehouse) to configure Taobao image.

Npm (node package manager) nodejs package Management tool

A central library maintained worldwide for managing front-end js files

Basic use of the command

Npm install axios downloads the latest version from the central library through the network when there is no version of axios by default.

Npm install axios@x.x.x downloads the specified version of axios from the central library over the network.

(5) configure Taobao image

Npm config set registry

Check whether the Taobao image is installed successfully

Npm config get registry

(7) configure npm download dependent location

# windows:

# 1. Set cache location

Npm config set cache "D:\ noderepository\ npm-cache"

# 2. Set up

Npm config set prefix "D:\ noderepository\ npm_global"

# mac os:

Npm config set cache "/ Users/chenyannan/dev/nodereps"

Npm config set prefix "/ Users/chenyannan/dev/nodereps"

(8) verify the nodejs environment configuration

Npm config ls

one

two。 Install scaffolding

(1) unloading scaffolding

Npm uninstall-g @ vue/cli / / Uninstall version 3.x scaffolding

Npm uninstall-g vue-cli / / Uninstall version 2.x scaffolding

(2) Vue Cli official website

Https://cli.vuejs.org/zh/guide/

(3) install vue Cli

Npm install-g vue-cli

Enter vue init

(2) configure nodejs local warehouse environment variables

Path=... ; d:\ noderepository\ npm_global

Objective: to facilitate the subsequent use of vue cli-related commands

(3) whether the test order can be executed

Enter the command in the window: vue init

It can be displayed as above.

3. The first vue scaffolding project

(1) create the first project of vue scaffolding

Vue init webpack project name

(2) create the first project

Download failure prompt

After a successful download

Hello-> Project name

-build-> used to use webpack packaging to build some dependent files using build dependencies

-config-> used to do the entire project configuration directory is mainly used to configure the development test environment

-node_modules-> used to manage the use of dependencies in a project

-src-> used to write the source code of vue [key]

+ assets-> is used to store static resources [key]

Components-> used to write Vue components [key points]

Router-> is used to configure routing in the project [key]

App.vue-> Root components in the project [key]

Main.js-> main entry in the project [key]

-static-> other static

-.babelrc-> convert es6 syntax to es5 to run

-.project editorconfig-> Project editing configuration

-.gitignore-> git version control ignores files

-.postcssrc.js-> source code related js

-index.html-> Project Home Page

-package.json-> similar to pom.xml dependency management jquery, manual modification is not recommended

-package-lock.json-> Lock package.json

-README.md-> Project description document

After a successful download

File display

(3) how to run and execute in the root directory of the project

A. Change to the root directory where the project was created

B. Execute the command npm run dev in the project root directory

(4) how to access the project

Http://localhost:8080

(5) package structure of the project

These two files can be deleted when transferring files. / current directory

(5) Project development mode in Vue Cli

Note: everything is a component js code html code css style in a component

1. VueCli development method is to develop a component corresponding to a business function module in the project, and multiple components can be combined to form a front-end system in the future.

two。 In the future, when developing with vue Cli, html is no longer written, but components (component suffixes) are written. The file at the end of vue), when packaged later, vue cli will compile the component into a running html file

4. How to develop Vue scaffolding

Note: everything is a component in Vue cli

5. Case

In components (in components)

{{msg}}

This is my girlfriend Yang Fujun!

Export default {

Name: 'user'

Data () {

Return {

Msg: introduction to people

}

}

}

Router routing

Import Vue from 'vue'

Import Router from 'vue-router'

Import user from'@ / components/user'

Vue.use (Router)

Export default new Router ({

Routes: [

{

Path:'/ user'

Name: 'User'

Component: user

}

]

})

App.vue component

Display user information

Export default {

Name: 'App'

}

Main.js

Import Vue from 'vue'

Import App from'. / App'

Import router from'. / router'

Vue.config.productionTip = false

New Vue ({

El:'# app'

Router

Components: {App}

Template:''

})

At this point, the study on "how to install, configure and use Vue CLI" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.