第6章 使用脚手架搭建单页程序

1.为什么使用脚手架

1.1为了使用更先进的技术例如 es5或是es6。都需要借助功能才能够在现有的浏览器运行

1.2需要使用很多工具，例如webpack、babel做编译等工具，配置起来非常繁琐

1.3vue.js 官方为了减轻这些繁琐的配置，将vue.js环境需要的配置配好，方便vue.js项目的开发

1.4脚手架：是一种基于node.js的工具，作用是开发中用到的工具、环境都配置好了。

不用在为这些复杂的配置花时间，专注业务开发就好了。

2.下载安装node.js

1.1下载地址（下载常用的而不是最新的）https://nodejs.org/en/

1.2安装文件，按照向导安装下一步下一步即可。

1.3运行 node.js 命令窗体

3.使用脚手架搭建 vue.js单页程序

1.1安装淘宝镜像http://npm.taobao.org/

1.1.1可以用淘宝镜像代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2脚手架安装命令

cnpm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev  -- 开发环境
npm run build --上线环境

4.vue项目文件

1.项目文件结构

config是vue项目的基本配置文件
node_modules是项目中安装的依赖模块
src源码文件夹，基本上文件都应该放在这里。
—assets 资源文件夹，里面放一些静态资源
—components这里放的都是各个组件文件
—App.vue App.vue组件
—main.js入口文件
static生成好的文件会放在这个目录下。
test测试文件夹，测试都写在这里
.babelrc babel编译参数，vue开发需要babel编译
.editorconfig 看名字是编辑器配置文件。
.gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹
index.html 主页
package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的

2.详细介绍几个重要的文件

2.1package.json 项目依赖包文件

2.1.1dependencies：项目发布时的依赖

2.1.2devDependencies：项目开发时的依赖

2.1.3scripts：编译项目的一些命令

2.2.babelrc文件 

2.2.1定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。

2.3index.html[主页]

2.3.1在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充

2.4App.vue 根组件

2.4.1一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

2.4.2一个vue文件代表一个组件

2.5main.js 入口文件

2.5.1主要是引入vue框架，根组件及路由设置，并且定义vue实例

2.5.2components:{App}就是引入的根组件App.vue、

2.6router 路由配置

2.6.1router文件夹下，有一个index.js，即为路由配置文件

5.搭建后台系统

5.1后台系统的模板文件

官网地址：https://almsaeedstudio.com/ ， 可以预览模板：https://almsaeedstudio.com/themes/AdminLTE/index2.html ，也可以直接下载归档文件 AdminLTE-2.3.7.zip (7.0 MB)。

5.1在vue.js项目上搭建项目的主体结构

5.2编写相应的vue文件

5.3做好路由的映射

5.4使用<router-link>建立连接。