vueCli和脚手架
vue CLI相当于一个基于vue开发的框架；可以用来快速开发vue项目；
1.安装
由于需要用到npm命令，所以要先安装node.js；
node.js下载地址：https://nodejs.org/en/
用到的npm命令：
# 查看版本
$npm -v
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
安装vue cli；
为了更方便使用命令行界面，需要进行全局安装；
安装完成后输入命令 vue -V，如果输出版本信息则安装成功；
# 全局安装 vue-cli
$ cnpm install --global vue-cli
利用vue cli创建一个webpack工程；
先建一个用来放工程的目录；然后用下面的命令创建工程模板；
如果可以创建，根据提示给工程添加各种属性；比如工程名、作者、描述、默认组件等；
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
创建脚手架工程成功后的目录结构：
2.目录结构解释
|
目录/文件
|
说明
|
|
build
|
项目构建(webpack)相关代码
|
|
config
|
配置目录，包括端口号等。我们初学可以使用默认的。
|
|
node_modules
|
npm 加载的项目依赖模块
|
|
src
|
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
|
|
static
|
静态资源目录，如图片、字体等。
|
|
test
|
初始测试目录，可删除
|
|
.xxxx文件
|
这些是一些配置文件，包括语法配置，git配置等。
|
|
index.html
|
首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
|
|
package.json
|
项目配置文件。
|
|
README.md
|
项目的说明文档，markdown 格式
|
3.运行模板工程
用cd命令进入工程目录；
用 npm install 安装工程；
npm run dev运行工程；
$ cd my-project
$ cnpm install
$ cnpm run dev
运行结果：打开浏览器；输入默认的工程地址:localhost:8080
