一，分层架构：
用户操作：
1.发出action-数据层
2.页面跳转-路由层
3.直接更改-视图数据
数据层：
1.调用接口层
2.为视图数据
接口层：
1.获取静态数据
2.进行验证
路由层：
1.路由参数
2.工具函数
3.视图层
视图层：
1.视图数据
2.数据格式化
二，项目目录结构
RootDir
|- build (编译工具类js)
|- bin (可执行工具)
|- config (配置类js)
|- dist (编译后js，用于发布生产的文件)
|- docs (文档所在文件夹)
|- node_modules (工程所依赖模块的文件夹)
|- src (工程源文件)
|- api (接口层)
|- assets (静态资源)
|- components (vue组件文件夹)
|- filters (数据格式化)
|- mock (静态数据)
|- pages (视图层)
|- router (路由层)
|- store (数据层)
|- titcomponents (自主开发的公用vue组件文件夹)
|- utils (工具)
|- validators (数据验证)
|- App.vue (项目入口组件)
|- main.js (项目入口js)
|- variable.scss (css变量文件)
|- test (工程测试文件)
|- .babelrc (babel编译配置文件)
|- .postcssrc.js (postcss配置文件)
|- package.json (package文件)
三，增删改查模块：
1.模块内容：查询，列表，删除在同一页面中完成；编辑，新增在同一页面完成。
2.在组件中实现数据的渲染和数据更新的触发。
3.模块使用了状态管理vuex，设计数据在state里，请求逻辑在action中完成，修改数据在mutations中完成。
四，配置项目环境：
1.新项目专用：复制package-origin.json的内容至package.json,更改项目名(name),描述(describe)。
2.运行 npm install 安装项目依赖
五，脚本工具：
1.使用开发服务器（热加载）开发时使用。
npm start
2.编译源文件，打包发布时使用。
npm run build:prod
3.执行测试用例时使用。
npm test
六，nodejs和npm包管理器：
1.安装node.js
2.创建一个npm模块
npm init
3.从已有的package.json安装依赖包
npm install
4.安装指定模块名到当前项目
npm install [模块名]
5.安装指定模块名到当前项目并保存至package.json的devDependence节点中
npm install [模块名] --save-dev
6.安装指定模块名并且作为全局工具使用
npm install [模块名] -g
七，认识ECMA规范：
1.了解什么是本地对象，内置对象和宿主对象
2.了解Array对象的方法使用，重点了解splice的用法
3.了解Date对象的方法使用（非重点，一般使用moment代替Date对象）
4.了解String对象的方法使用，重点split，indexOf，replace
5.了解RegExp对象，了解正则表达式的语法
6.了解Object对象，了解深浅拷贝的区别
7.JSON对象,stringify和parse方法。
8.Array对象的扩展函数：reduce,some,every,map,forEach等的用法
9.Function对象的bind方法指定this，了解函数的作用域
10.箭头函数（函数扩展）
11.module模块引入以及导出
12.class类定义
13.Promise 对象函数和async函数。
八，了解webpack配置：
1.创建一个空文件夹
2.安装webpack：
全局安装
npm install -g webpack
安装到你的项目目录
npm install --save-dev webpack
3.在空文件夹里面创建两个文件夹,app文件夹和public文件夹
app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放准备给浏览器读取的数据
4.在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置：
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
5.运行webpack
九，传统开发与mvvm开发：
1.传统开发方式，用户操作改变数据时需要通过对dom操作或者jq的dom操作，性能很差。
2.mvvm开发方式，会先创建一个数据模板，用户操作改变数据时，数据模板自动更新，大大提高了性能。
十，scss的使用：
1.安装sass的依赖包
npm install --save-dev sass-loader
2.安装sass
npm install --save-dev node-sass
3.在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /.sass$/,
loaders: ['style', 'css', 'sass']
}
5.在APP.vue中修改style标签
<style lang="scss" type="text/css"> </style>
6.声明变量 $ ， 父选择器 & ， 插值语句 #{}
7.所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
8.属性嵌套
.funky {
font: {
size: 30em;
}
}
9.sass的判断语句 @if
@if type == matador {
color: red;
}@else {
color: black;
}
10.sass的循环语句 @for
@for i} { width: 2em * $i; }
}
11.sass的循环语句 @each
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
2.sass的继承 @import
.example {
color: red;
}
main 继承 .example的样式
#main {
@import "example";
}
