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'之类的，当然首先得引入该组件，再为该组件设置路由。