Vue脚手架（vue-cli）搭建和目录结构详解
一、环境搭建
1、安装 node、npm、webpack，不多说
2、安装 vue-cli 脚手架构建工具，打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
二、用 vue-cli 来构建项目
1、在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：（1）cd 目录路径 （2）如果以安装 git 的，在相关目录右键选择 Git Bash Here
2、安装 vue 脚手架输入：vue init webpack exprice ，注意这里的“exprice” 是项目的名称，可以说是随便起名，但是需要注意的是“不能用中文，且不能用大写字母”。
$ vue init webpack exprice --------------------- 这个是那个安装 vue 脚手架的命令
This will install Vue 2.x version of the template. --------------------- 这里说明将要创建一个 vue 2.x 版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装 Vue 路由，也就是以后是 spa（但页面应用需要的模块）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用 eslint 检测规则，这里个人建议选 no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm run dev
3、cd 命令进入创建的工程目录，首先 cd exprice（这里是自己建工程的名字），然后 npm run dev，启动服务器。服务启动成功后浏览器会默认打开一个“欢迎页面”，如图。
注意：这里是默认服务启动的是本地的 8080 端口，所以请确保你的 8080 端口不被别的程序所占用。
三、目录介绍
创建完成的“exprice”目录如下：
简单说明下各个目录都是干嘛的：
总体框架：一个 vue-cli 的项目结构如下，其中 src 文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。
四、文件结构细分
1、build——[webpack 配置]
build 文件主要是 webpack 的配置，主要启动文件是 dev-server.js，当我们输入 npm run dev 首先启动的就是 dev-server.js，它会去检查 node 及 npm 版本，加载配置文件，启动服务。
2、config——[vue 项目配置]
config 文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等
3、node_modules——[依赖包]
node_modules 里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。
安装方法为打开 cmd，进入项目目录，输入 npm install [依赖包名称]，回车。
在两种情况下我们会自己去安装依赖：
（1）项目运行缺少该依赖包：例如项目加载外部 css 会用到的 css-loader，路由跳转 vue-loader 等（安装方法示例：npm install css-loader）
（2）安装插件：如 vux（基于 WEUI 的移动端组件库），vue-swiper（轮播插件）
注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装 11.1.4 版本的 vue-loader，输入 npm install vue-loader@11.1.4
4、src——[项目核心文件]
项目核心文件前面已经进行了简单的说明，接下来重点讲解 main.js，App.vue 及 router 的 index.js
五、脚手架代码详解
我们看下创建后的项目目录里的主要文件：
1、index.html——[主页]
这个没什么好说的，就是一个简单的 html 页面，这里 id='app'，是为后面的设置 vue 作用域有关的。
index.html 如其他 html 一样，但一般只定义一个空的根节点，在 main.js 里面定义的实例将挂载在根节点下，内容都通过 vue 组件来填充
2、文件：Hello.vue
说明：在 *.vue 文件，template 标签里写 html 代码，且 template 直接子级只能有一个标签。style 标签里写样式，script 里面写 js 代码。
3、文件：App.vue——[根组件]
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/> //这里是用来展示路由页面内容的，如果想用跳转就用 <router-link to='xxx'></router-link>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
一个 vue 页面通常由三部分组成: 模板 (template)、js(script)、样式 (style)：
【template】
其中模板只能包含一个父节点，也就是说顶层的 div 只能有一个（例如下图，父节点为 #app 的 div，其没有兄弟节点）
<router-view></router-view> 是子路由视图，后面的路由页面都显示在此处。打一个比喻吧，<router-view> 类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
【script】
vue 通常用 es6 来写，用 export default 导出，其下面可以包含数据 data，生命周期 (mounted 等)，方法(methods) 等，具体语法请看 vue.js 文档，在后面我也会通过例子来说明。
【style】
样式通过 style 标签 <style></style> 包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加 scoped，<style scoped></style>
如要引入外部 css 文件，首先需给项目安装 css-loader 依赖包，打开 cmd，进入项目目录，输入 npm install css-loader，回车。安装完成后，就可以在 style 标签下 import 所需的 css 文件，例如：
<style>
import './assets/css/public.css'
</style>
这样，我们就可以把 style 下的样式封装起来，写到 css 文件夹，再引入到页面使用，整个 vue 页面也看上去更简洁。
4、文件：main.js——[入口文件]
这个 js 文件是主页面配置的主入口。主要是利用 ES6 的模块化引入模板
main.js 主要是引入 vue 框架，根组件及路由设置，并且定义 vue 实例，下面代码中的 components:{App} 就是引入的根组件 App.vue
后期还可以引入插件，当然首先得安装插件。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入 vue 文件
import App from './App'// 引入同目录下的 App.vue 模块
import router from './router'// 引入 vue 的路由
Vue.config.productionTip = false
/ eslint-disable no-new /
new Vue({
el: '#app',//定义作用范围就是 index.html 里的 id 为 app 的范围内
router,//引入路由
components: {App},//注册引入的组件 App.vue
template: '<App/>'//给 Vue 实例初始一个 App 组件作为 template 相当于默认组件
})
5、router——[路由配置]
router 文件夹下，有一个 index.js，即为路由配置文件
import Vue from 'vue' //引用 vue 文件
import Router from 'vue-router' //引用 vue 路由模块，并赋值给变量 Router
import HelloWorld from '@/components/HelloWorld' //英文 HelloWorld.vue 模版，并赋值给变量 HelloWorld, 这里是“@”相当于“../”
Vue.use(Router) //使用路由
export default new Router({
routes: [ //进行路由配置，规定“/”引入到 HelloWorld 组件
{
path: '/',
name: 'HelloWorld', //这个 name 暂时不知道用啥用，根据官方文档说的是方便排错的
component: HelloWorld //注册 HelloWorld 组件
}
]
})
这里定义了路径为 '/' 的路由，该路由对应的页面是 HelloWorld 组件，所以当我们在浏览器 url 访问 http://localhost:8080/#/ 时就渲染的 Hello 组件
类似的，我们可以设置多个路由，‘/index’,'/list' 之类的，当然首先得引入该组件，再为该组件设置路由。
说明：如果需要增加组件那就在 components 文件下定义 xx.vue 文件并编写代码即可；如果需要配置路由就要在 index.js 进行路由“路径”配置；还需要点击跳转就要用到 <router-link></router-link> 标签了。