vue-cli detailed tutorial

vue-cli: An officially provided scaffolding for quickly generating a Vue project template.
The predefined directory structure and basic code are just like when we create a Maven project, we can choose to create a skeleton project. This skeleton project is the scaffolding, making our development faster.
Main functions:

Unified directory structure
local debugging
Hot deployment
unit test
Integrated packaging goes online

The vue-cli scaffolding template is based on node npmto complete the installation, so you need to install node first.

1. Required environment:

Node.js: http://nodejs.cn/download/Installation
is just a no-brainer and the next step is to install it in your own environment directory
Git: https://git-scm.com/downloads
Mirror: https://npm.taobao.org/mirrors/git-for-windows/

2. Confirm that nodejs is installed successfully:

cmd input node -vto see if the version number can be printed out correctly!
cmd input npm -vto see if the version number can be printed out correctly!

3. Install Node.js Taobao Image Accelerator (cnpm). In this case, the download will be much faster~

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

The installation process may be a bit slow, so be patient! Although cnpm is installed, use it as little as possible!
The installation location is as follows:
Insert image description here

4. Install vue-cli as follows:

1) Create a new folder (for example: my-vue), and open the terminal under the target folder.

npm install vue-cli -g

# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

2) Execute npm install vue-cli -gthe global installation, as follows:
Insert image description here
3) Installing..., as follows:

4) The global installation is successful! As follows:

5) Check whether the installation is successful, as follows:

5. The first vue-cli application

1) Create a Vue project. We can create an empty folder on the computer. I will create a new directory under the D drive: D:\study\xlx\study_work\vue_work\vue-study; 2) Create a template based on
webpack The Vue application is as follows:

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack my-vue

Just select no all the way;
instructions:

Project name: Project name, just press Enter by default
Project description: project description, press Enter by default
Author: project author, just press Enter by default
Install vue-router: Whether to install vue-router, choose n to not install (you need to add it manually later)
Use ESLint to lint your code: Whether to use ESLint for code checking, select n to not install (you need to add it manually later)
Set up unit tests: related to unit tests, select n not to install (need to be added manually later)
Setup e2e tests with Nightwatch: related to unit tests, choose n to not install (need to be added manually later)
Should we run npm install for you after the project has been created: Initialize directly after creation, select n, we execute it manually; running results!

In progress 1, as follows: