9.1. What is vue-cli
A scaffolding officially provided by vue-cli is used to quickly generate a vue project template; the
pre-defined directory structure and basic code, just like when we create a Maven project, we can choose to create a skeleton project. This estimated project is the scaffolding. Our development is faster;
the functionality of the project
- Unified directory structure
- local debugging
- hot deployment
- unit test
- Integrated packaging online
9.2, the required environment
- Node.js: http://nodejs.cn/download/
Installation is the next step without a brain, just install it in your own environment directory - Git: https://git-scm.com/doenloads
Mirror: https://npm.taobao.org/mirrors/git-for-windows/
Confirm that nodejs is installed successfully:
- Enter under cmd to
node -vsee if the version number can be printed out correctly! - Enter under cmd to
npm -vsee if the version number can be printed out correctly!
This npm is a package management tool, which is similar to the apt software installation under linux!
If you install Node.js Taobao Mirror Accelerator (cnpm)
, 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~, be patient! Although cnpm is installed, try to use it as little as possible!
Installed location:C:\Users\administrator\AppData\Roaming\npm
Uploading...
Reupload Uninstall vue-cli
cnpm instal1 vue-cli-g
#测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
vue list
Uploading...Reupload canceled
9.3. The first vue-cli application
1. Create a Vue project. Let's create an empty folder on the computer. I will create a new directory under the D drive.
D:\Project\vue-study;
2. Create a vue application based on the webpack template
#1、首先需要进入到对应的目录 cd D:\Project\vue-study
#2、这里的myvue是顶日名称，可以根据自己的需求起名
vue init webpack myvue
You can choose no all the way;
description:
- Project name: Project name, press Enter by default
- Project description: project description, just press Enter by default
- Author: the author of the project, press Enter by default
- Install vue-router: Whether to install vue-router, choose n not to install (you need to manually add it later)
- Use ESLint to lint your code: Whether to use ESLint for code checking, select n not to install (you need to manually add it later)
- Set up unit tests: related to unit tests, select n not to install (need to be added manually later)
- Setupe2etests with Nightwatch: related to unit testing, select n not to install (you need to manually add it later)
- Should we run npm install for you after the, project has been created: initialize directly after creation, select n, we will execute it manually; run the result!
(1) Initialize and run
cd myvue
npm install
npm run dev
After the execution is completed, there are many more dependencies in the directory
When there is a problem, you can view the prompt to deal with it as follows 
Uploading...Re-upload to cancel