webpack总结

2019独角兽企业重金招聘Python工程师标准>>>

webpack优点

模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
模块规范支持全面，amd/cmd以及shimming等一应具全
浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
插件机制完善，实现同样模块化，容易扩展

vue使用中

有两种方式: 单文件的方式,.vue结尾的文件-> 基于webpack来编译使用
引包的方式: 双向数据绑定（企业应用较少）

webpack基本操作

下载安装
全局命令行工具 npm i -g webpack
默认支持commonjs模块定义
运行方式通过指定命令
- webpack 入口文件目标文件
- webpack ./index.js ./build.js
通过配置文件，以代码的形式来指定webpack运行的相关设置

使用webpack配置文件

进入到当前有webpack.config.js 文件的目录下，运行命令行webpack

module.exports =

    {
        //入口在那咯
        entry: {
            main: './index.js', //单文件入口
        },
        output: {
            filename: './build.js'
        }
        //出口文件
    }

引入css问题

原理:通过解析css代码，最终将css作为js中动态生成style标签，并插入到文档中
解析css,还需要依赖style-loader
安装: npm i css-loader style-loader -D
进行配置: 配置到module属性中,其属性是一个个的对象

 module: { //模块
            loaders: [ //一个loader对象
                    {
                        test: /.css$/, //只有以.css结尾的文件我才操作
                        loader: 'style-loader!css-loader!autoprefixer-loader'

                    }

                ] //可以有很多的loader
        }

autoprefixer自动补充css前缀

安装 npm i autoprefixer-loader -D
测试 transform: translate(0px);

less的使用

依赖 less less-loader

处理图片

file-loader url-loader
在配置的时候只使用url-loader 其依赖于file-loader
limit设置如果在其范围内，则不单独生成文件，而是放到js中以base64

base64编码

a-zA-Z0-9+/组成
其可以将二进制数据转换成字符串形式，用来传输，其是可逆，可编可解
将图片以base64形式存储在css的url中,减少原来对该图片的一次请求
- 但是当图片过大，按比例增加的额外大小就更多

处理字体图标

大小比较小
灵活控制颜色和大小

生成html文件插件

html-webpack-plugin 需要下载
自动根据path移动当前模板的html到路径下
根据filename 自动引包

web-dev-server

热替换，不通过刷新，替换css内容
其通过绝对路径来监视文件，如果上级某一个路径中包含页数字符，那就无法监视
- {}()都不可以
全局安装、通过命令来使用
- --inline 自动更新
- --hot 热替换热加载
- --port 指定端口
- --open 自动打开浏览器
建议使用项目中的程序
命令：../node_modules/.bin/wds --inline --hot --open --port 9998

es6

webpack-ES6的处理

包 babel-preset-es2015
包 webpack-plugin-transform-runtime
babel-loader依赖babel-core包

ES6中的模块

第一种: 默认导出、导入
第二种: 按需导入、声明式导出
默认导出 export default 拿来直接用，名称可以任意
按需导入: 声明式导入，必须{名称对应导出的名称}
全体导入的方式中，有名称的按名称来，默认导出的就是该对象的default属性
导入一定要在顶级域中，不能是函数中

ES6中的代码变化

vue单文件方式

以单文件的方式启动

``javascript const path = require('path'); module.exports = { entry:{ 入口 main:'./index.js' }, output:{ 出口 path:path.join(__dirname,'../','code','dist'), /将所有的文件统一生成到dist目录下 filename:'build.js' }, module:{ loaders:[{
test:/.css$/, loader:'style-loader!css-loader!autoprefixer-loader' }, { / less-loader 依赖于less test:/.less$/, loader:'style-loader!css-loader!autoprefixer-loader!less-loader' },{ /ttf-> 在代码中声明了引入mui.css -> 引入了ttf test:/.(ttf|jpg|png|svg)$/, loader:'url-loader', /依赖file-loader },{ test:/.js$/, exclude:/node_modules/, loader:'babel-loader', /babel-loader依赖babel-core options:{ presets:['es2015'], /babel-preset-es2015 plugins:['transform-runtime'],/babel-plugin=transform-runtime } }] }, plugins:[ new htmlwebckplugin({ /以谁做参照 template:'./src/index.html' /自动补上引入出口文件 }) ]

}


#### 重点
* vue组件的使用
* 组件间通信
* vue-router使用
* vue-resource发起http请求
* axios

#### vue介绍
* 核心 组件化 -> 自定义指令也可以认为是组件(让其不太依赖于存在的环境，尽量独立，通过参数)
* 双向数据绑定 ->  数据劫持 ES5 中的 Object.defineProperty(obj,'name',{
    //设置
    set:function(){   obj.name ='1234';//触发该函数
        //做相关操作,(改变DOM中跟name挂钩的元素的value)
    },
    get:function(){  //obj.name 就会触发

    }
})
* vue支持到IE8以上
* Weex 让vue编写的代码能够运行到PC、ios、Android上
* vuex 在vue中提供管理全局数据的方式的一个插件(类似于angular中的userService)
* 14年2月出来的  截止到20170615  56.7k start
* 语法糖 尤雨溪


#### 渐进式
* 跟大而全的全家桶对立，
* 可以让企业一点一点的尝试使用，双向数据绑定、路由、组件（引库的方式）

#### 数据流
* 从页面的改变影响内存 ，单向数据流
* 从内存的改变影响页面 ，单向数据流
* 两者都具备，双向数据流( 数据劫持-> ES5 -> Object.defineProperty(obj,paramName,{set:fn,get:fn}))


#### 解决闪烁问题
* 在引库的方式中存在闪烁问题，在单文件方式中不会有该问题，提前编译好html内容
* v-text 插入innerText
* v-cloak 待测试


####  vue中常用的v-指令演示
* 常用指令 ` 空串的bool就是false`
* v-text 将值插入到元素的innerText中，只能是双标签
* v-html 将值插入到元素的innerHTML中，只能是双标签
* v-if 是否插入元素
* v-show 是否显示元素
* v-model 双向数据流，其值就是数据模型(M)

#### class结合v-bind使用
* v-bind 非常有用,给元素的属性赋值
* 通过v-bind可以让vue中的对象进行运算，并将最终的动态结果赋值该该属性
* 字符串的赋值，有字符串是true,空串代表false
```html
    <span v-bind:class="isRed?'red':'blue'"></span>
    简写形式:class
    <span :class="isRed?'red':'blue'"></span>

ES6中的代码变化

模块
- 默认导入出(名称可以随意)
  - 在导出模块中: export default xxxxx;
  - 在导入模块中: import aaa from './xxx.js'
- 接口方式导入出(按需加载)
  - 在导出模块中: export var xxx = 123; --> {xxx}
  - 在导出模块中: export { aaa }
  - 合起来 {xxx,aaa}
  - 导入的时候名称一定一定要一致 import {xxx,aaa} from 'xxx.js'
- 全体导入
  - import * as xxx from 'xxx.js';
    - 针对以上所有情况
      - xxx = { xxx:123,aaa:xxx的值,defult:xxxxx的值}
函数


var obj = {
    add:function(){},
    substract(){ 和以上方式功能一模一样
        //ES6的声明函数写法
    }
}

对象属性
- var name = 'abc'; var person = { name }

开始单文件方式

单文件的方式就是一一个文件代表着一个组件的方式开发
xxx.vue的文件结构: template、script、style
vue1.0中template可以有多个根元素
vue2.x中只能有一个根元素

methods和v-on的使用

1:在导出对象的根属性中,加入methods属性,其是一个对象
- 对象内部有多个函数名称，任意的函数名称
  - 再模板中直接使用函数名(xxx),没有参数直接函数名
  - 在js部分的使用
2: 给元素加上v-on:事件名="函数(xxx)"
- v-on可以简写-> @事件名="函数(xxx)"
在模板中使用不需要this,在script中使用需要this.，这个thiss是一个VueComponent对象

v-for的使用

数组v-for="(v,index) in arr" :key="v.id||index"
对象v-for="(v,key,index) in obj" :key="v.id||index"
绑定key 是为了告诉vue 每个元素的唯一标识，提高性能
- 在删除元素的时候，vue不是整个数组进行页面的替换，而是只移除删除的DOM元素
- 为了比较页面中删除的和内存中删除的元素的关系，就需要整个key
- 如果不指定，vue又需要按照自己的算法去标识每个元素和内存对象的关系
v-bind:class
- 选择一个,三元表达式最终返回样式名,声明一个对象也能够其key来获取其value作为样式名
- 选择多个
  - 整个是一个对象，其多个属性只要为true,以key为样式名

父子组件使用(父传子)

父子组件的使用
- 1:创建该组件文件.vue
- 2:在需要使用组件的组件内，引入该组件
- 3:在使用其他组件内声明使用子组件
- 被使用的组件就是子，使用组件的就是父
样式如果需要只能被当前组件所有效，需要在style标签上加上scoped
父向子
- 常量: 子组件上属性 msg="xxx" 子组件声明根属性props:['msg']
- 变量: :msg="obj"
- 在js部分通过实例对象使用，this.$props.msg

子向父组件通信（获取组件对象）(扩展)

我个人: 吃饭 -> (吃饱饭)-> 吃饭的人就停住了
- 这种通信，基于同一个对象

export default 的常用属性总结

导出组件对象的根属性(options)
- data是一个函数,返回一个对象
- methods是一个对象,key是函数名，值是函数体
- components是一个对象,key是子组件名，value是组件对象
- props是一个数组,元素是接受父组件的参数
- filters是一个对象,key是过滤器名，值是过滤器函数体
VueComponent实例对象的属性(在组件内的this)
- this.$props 父组件传递参数列表数组
- this.$parent/this.$children 父组件及其子组件对象
- this.$on this.$once this.$off 绑定(一次)事件取消事件
- this.$refs.xxx 获取DOM元素 -> 元素上声明ref="xxx"

全局组件

一经声明所有地方使用，无需引入和声明
单文件中: 1:在main.js中引入组件
- 2:通过Vue.component声明该全局组件,参数1:组件名称(驼峰命名法),参数2:组件对象
  - 使用:直接使用将大写字母改成-小写字母
引库的方式也可以创建组件

 var template = `
        <ul>
            <li>{{text}}</li>
            <li>{{text}}</li>
        </ul>
    `;
    Vue.component('myTestComponent', {
        template: template,
        data() {
            return {
                text: '哈哈'
            }
        }
    })

看文档的对象分类

全局的属性和函数 Vue.xxxx
选项options -> 配置组件的时候传递的对象，单文件方式中export default
实例属性|方法 -> VueComponent对象,this对象
- var vm = new Vue(options); 也是实例对象Vue

过滤器

vue中有没有默认的过滤,在vue中没有默认的过滤器,都需要自己手动实现
输入的内容帮我做一个反转
例子:父已托我帮你办点事
全局的过滤器单数函数局部的过滤器(复数声明)
- 全局 Vue.filter('名称',function(value){ return value} )
- 局部(通过选项options),filters:{ 名称:函数体 }
当两个过滤器同名的时候，以局部的优先

获取DOM元素

前端框架的救命稻草,操作DOM
1:在DOM元素上声明,ref="xxx"
2:可以通过实例对象.$refs.xxx获取DOM元素
事件(钩子函数的区别)
- 1:在created函数触发的时间点,vue实例对象完成了属性的监视、事件的初始化
- 2:在mounted函数中，已经完成了数据到DOM元素的装载,此时才可以使用$refs

vue-router

1: 下载该插件npm i vue-router
2: 在main.js中引入该插件对象
3: 全局安装该插件 Vue.use(插件对象)
- 3.1通过install函数给Vue原型挂载属性，未来this.属性就能使用功能
4: 将router配置路由规则(创建路由对象)
5: 将router配置进Vue的options中
6: 留坑 <router-view></router-view>

命名路由

router-link指令: to的属性，to="/xxx" -> path:'/xxx'
:to 绑定属性则可以使用命名路由来匹配路由规则，方便url的更改维护
- :to="{name:'home'}" -> 规则:{name:'home',path:'/home'} ->href="/home"

参数router-link

params 、query
命名路由名称不要相同
路由规则: {name:'home',path:'/home/:who',component:组件对象}
- router-link :to="{name:'home',params:{who:'xxx'} }"
- href="/home/xxx"
query: {name:'home2',path:'/home',component:组件对象}
- router-link :to="{name:'home',query:{who:'xxx'} }"
- href="/home?who=xxx"
获取路由参数: this.$route.params||query.属性名

总结

1:引包: -> 引包，声明范围，构建new Vue(options) 双向数据绑定、创建组件的使用
- Vue.component(组件名,options); 参照export default返回的数据
- new Vue({el:'#app',template:'xxxxx',data:{text:'xxx'} })
2: 单文件方式:
- index.html 声明div app
- main.js 引入Vue、VueRouter、App主组件
- 构建Vue实例对象(options) -> render:c=>c(App)
3: 1:下载、2:引入对象、3:安装插件Vue.use(VueRouter); -> this.$router
- 4:创建rouer对象 5:配置路由规则[] ,每个规则都是对象path必填，name选填
4:将router配置到Vue的options中router
vue文件注意事项
- 三个部分 template-> 1根 script-> 默认导出对象 style-> scoped当前生效
- 该对象就是options
options: data是一个函数，返回一个对象，该对象的数据就是数据模型
- methods是一个对象，其属性是函数名，值是函数体
- components是一个对象其属性是组件名，值是组件体
- filters是一个对象其属性是过滤器名，值是过滤器体，接受一个value，返回新value 使用通过|
- props是一个数组['父传递的参数名']
  - 模板直接用
  - js中this.$props.属性名获取
- 父向子传递有两种，常量 xxx="xxx" 变量 :xxx="变量"
实例事件
- this.$on|$once|$emit|$off
实例属性
- this.$parent|$children|$props|$refs.xxx
全局函数
- Vue.use 安装插件，其插件必须实现install(Vue) 函数
- Vue.component('名称',options)
- Vue.filter('名称',function(v){ return v})
生僻指令
- ref="xxx"
- :key -> track by
- v-for 数组(v,index) 对象(v,key,index)
- v-bind:属性名给元素的属性传递值简写:属性名="vue中的data属性"
- v-on:事件 @事件="函数"
created和mounted: created创建发起请求，mounted数据装载后操作DOM，结合$refs
启动方式: 只是为了方便使用了package.json文件中是scripts属性，启动的同时是开启webpack-dev-server，他会获取到当前命令行存在的webpack.config.js文件,从而获知出口文件build.js

嵌套路由

vue-resource(了解)

axios

http://www.cnblogs.com/Upton/p/6180512.html

axios.all([get1(), get2()])
  .then(axios.spread(function (res1, res2) {
    // 只有两个请求都完成才会成功，否则会被catch捕获
  }));

webpack优点

vue使用中

webpack基本操作

使用webpack配置文件

引入css问题

autoprefixer自动补充css前缀

less的使用

处理图片

base64编码

处理字体图标

生成html文件插件

web-dev-server

es6

webpack-ES6的处理

ES6中的模块

ES6中的代码变化

vue单文件方式

以单文件的方式启动

ES6中的代码变化

开始单文件方式

methods和v-on的使用

v-for的使用

父子组件使用(父传子)

子向父组件通信（获取组件对象）(扩展)

export default 的常用属性总结

全局组件

看文档的对象分类

过滤器

获取DOM元素

vue-router

命名路由

参数router-link

总结

嵌套路由

vue-resource(了解)

axios

mint-ui

相关环境总结

router对象的获取

单文件方式引入bootstrap

使用代理跨域