Vue:第一个vue-cli项目

1 什么是vue-cli

vue-cli 官方提供的一个脚手架，用于快速生成一个vue模板。

预定定义好的目录结构及基础代码，就好比咱们之前在创建maven项目时就可以选择创建一个骨架项目，这个骨架项目就是脚手架，使得我们的开发更加的快速。

主要功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

2 需要的环境（node.js，cnpm等）

• Node.js: http://nodejs.cn/download/
  无脑安装，不需要配置环境变量

确认nodejs安装成功：

• cmd 控制台下输入 node -v 查看是否能够正确打印出版本号即可！
• cmd 控制台下输入 npm -v 查看是否能够正确打印出版本号即可！

这个npm就是一个软件包管理工具，就和linux下的api软件安装差不多！

但是使用的是外国镜像，大多时候很慢，一般需要安装一个淘宝镜像，但是尽量少使用淘宝镜像下载下来的东西有时候会出现问题。

安装淘宝镜像加速器（cnpm）

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

// 或使用如下语句解决 npm 速度慢的问题（这个需要每次都添加）
npm install --registry=https://registry.npm.taobao.org

安装的位置：c:\Users\Administrator\AppData\Roaming\npm

3 创建vue-cli 应用程序

1. 创建一Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录

D:\Project\

2. 创建一个基于webpack模板的vue应用程序

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

一路选择no即可；

说明：

• Project name：项目名称，默认回车即可
• Project description：项目描述，默认回车即可
• Author：项目名称，默认回车即可
• install vue-router：是否安装vue-router，选择n不安装（后期需要的话再手动添加）
• Use ESLint to lint your code：是否使用ESLint做代码检查，选择n不安装（后期需要的话再手动添加）
• Set up unit tests：单元测试相关，选择n不安装（后期需要的话再手动添加）
• Setup e2e tests with Nightwatch：单元测试相关，选择n不安装（后期需要的话再手动添加）
• Should we run npm install for you after the project has been created：创建完成后直接初始化，选择n，我们手动执行；运行结果！

4 初始化vue项目并运行

cd myvue
npm install
npm run dev