webpack总结

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

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

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

mint-ui

相关环境总结

router对象的获取

单文件方式引入bootstrap

使用代理跨域

转载于:https://my.oschina.net/u/3150996/blog/1554559

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/twodog/p/12139134.html