vue-cli脚手架创建VUE项目并详解结构
第一部分
1、安装node.js，下载相应版本的node.js,下载地址：https://nodejs.org/en/download/，下载完双击安装，点击下一步直到安装完成
2.安装完成后，附件里选择命令提示符（或者在开始的搜索框里输入cmd回车调出命令面板）输入：node -v回车，出现相应版本证明安装成功，
node环境已经安装完成，由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的
国内镜像---cnpm。在命令行中输入：npm install -g cnpm –registry=https://registry.npm.taobao.org回车，大约需要3分钟，
如果报错或没反应，则卸掉node.js重新安装
3、安装全局vue-cli脚手架，用于帮助搭建所需的模板框架。输入命令：cnpm install -g vue-cli回车等待完成。
4、创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录，假如我们打算把项目新建在e盘下的vue文件夹中则输入下面的命令：
e:回车，然后cd vue，然后输入命令：vue init webpack XXXXXXX（项目文件夹名称），回车，运行初始化命令的时候会让用户输入几个基本的选项，
如项目名称，描述，作者等信息，如果不想填直接回车默认就好。(一顿回车+N键就完成了)
//--------------------*****----------------------
输入命令后，会跳出几个选项让你回答：
Project name (baoge)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）
Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字
Author ()： ----作者，
接下来会让用户选择：
Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车
Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车
//--------------------*****----------------------
5、安装项目所需的依赖包，首先输入：cd 项目名回车，然后输入：cnpm install 回车等待安装，安装完成之后，会在我们的项目目录文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。安装完依赖包之后，就可以运行整个项目了。
//--------------------------------------------------------------
当我们想在项目中加入插件时使用npm install jQuery --save可以引入插件的依赖包，（例如想使用jQuery可以使用npm install jQuery --save命令）成功引入依赖包后再package.json文件里面的dependencies 下就会多出"jQuery": "^1.7.4",记录了引入jQuery包的版本。
//--------------------------------------------------------------
6、测试环境是否搭建成功或者运行VUE项目时进入到项目文件夹下，在cmd里输入：cnpm run dev回车，项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开
，可以手动输入）。运行成功后，会看到Welcome to Your Vue.js App页面。
附：浏览器中进行Vue的调试工具的安装
使用vue-devtools-Chrome文件在Chrom的扩展程序里选择加载已解压的扩展程序选择vue-devtools-Chrome文件的shells下面的Chrome文件添加
第二部分
解读Vue-cli项目结构
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明
|-- index.html // 入口页面
|-- package.json // 项目基本信息,包依赖信息等
1. package.json文件
packagejson文件是项目的配置文件，定义了项目的基本信息以及项目的相关包依赖，npm运行命令等，位于项目根目录下。
scripts：定义了一些npm命令
dependencies ：dependencies是运行时依赖（生产环境）
devDependencies：devDependencies是开发时的依赖（开发环境）
相应的npm install 在安装 npm 包时，有两种命令参数可以把它们的信息写入 package.json 文件，–save 会把依赖包名称添加到 package.json 文件 dependencies 键下，–save-dev 则添加到 package.json 文件 devDependencies 键下。
2. 基础配置文件 webpack.base.conf.js
3. 开发环境配置文件 webpack.dev.conf.js
我们在启动项目的时候就要用到这个文件，说明这个文件比较重要，大家要好好看一下
4. 生产模式配置文件 webpack.prod.conf.js
5. build.js 编译入口
6. 实用代码段 utils.js
7. babel配置文件.babelrc
8 .编码规范.editorconfig
9 .src/main.js文件解读
main.js是整个项目的入口文件
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的
components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
10 .src/app.vue文件解读
<template></template>标签包裹的内容：这是模板的HTMLDom结构 <script></script>标签包括的js内容：你可以在这里写一些页面的js的逻辑代码。 <style></style>标签包裹的css内容：页面需要的CSS样式。
11. src/router/index.js 路由文件
这里定义了路径为'/'的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件
类似的，我们可以设置多个路由，‘/index’,'/list'之类的，当然首先得引入该组件，再为该组件设置路由。