Mainly record their own learning process, take notes! Infringement can be deleted!!

Vue – cli scaffold

What is Vue CLI

Just write a few Vue Dem0 programs, there is no need for Vue CLI.

The use of the Vue CLI is inevitable for large projects.

  • Developing large applications with vue.js requires consideration of code directory structure, project structure and deployment, hot loading, code unit testing, and so on.
  • It is inefficient for each project to do this manually, so scaffolding tools are often used to help.

What does CLI stand for?

  • The CLI is a command-line Interface, commonly known as scaffolding.
  • Vue CLI is an official release of Vue. Js project scaffolding
  • Vue-cli can be used to quickly set up a VUE development environment and the corresponding Webpack configuration.

Vue CLI Prerequisites – Node

1. Install NodeJS

  • Go directly to the official website to download and install
  • Address: nodejs. Cn/download /

2. Check the installed version

  • Node and NPM are automatically installed by default
  • The Node environment must be 8.9 or later
  • Check versions (Node-v) and (nPM-v)

3. What is NPM?

  • NPM stands for Node Package Manager
  • NodeJS is a NodeJS package management and distribution tool that has become the unofficial standard for distributing Node modules (packages).
  • NPM is often used to install some development process dependencies.

CNPM installation

Domestic direct use of NPM official mirror is very slow, recommended to use Taobao NPM mirror.

You can use taobao’s customized CNPM (gzip compression support) command line tool instead of the default NPM:

npm install -g cnpm –registry=registry.npm.taobao.org

This allows you to install the module using the CNPM command:

cnpm install [name]

Vue CLI – Webpack

The official vue.js scaffolding tool uses the Webpack module

  • All resources will be compressed for optimization operations
  • It provides a complete set of features in the development process, which can make our development process become efficient

Global installation of Webpack

  • npm install webpack -g

The use of Vue CLI

Install Vue scaffolding

  • npm install -g @vue/cli

Note: the above installation is Vue CLI3 version, if you want to initialize the project in the way of Vue CLI2 can not.

  • Pull 2.x template (old version)
  • npm install -g @vue/cli-init

Vue CLI2 initializes the project

  • vue init webpack my-project

Vue CLI3 initializes the project

  • vue create my-project

Runtime +compiler: Runtime -only

runtime+compiler

Template -> ast -> render -> vdom -> UI

Runtime-only (1. Higher performance 2. Less code)

Render -> vdom -> UI

createElement

Common usage: createElement (‘ tag ‘, {tag attribute}, [‘ tag content ‘])

return creatElement(‘h2′, { class:’box’},[‘Hello World’])

Passing in a component object:

return creatElement(App)