2019-04-26 必备技能

一，分层架构：

用户操作：

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标签

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";
}