很多刚接触Vue的朋友，都会觉得它既熟悉又陌生。熟悉是因为它确实让前端开发变得高效了，陌生则是因为这一套“数据驱动”的思想，和过去直接操作DOM的方式差别太大了。这篇文章就来聊一聊Vue开发中的那些核心概念和实用技巧，希望能帮大家快速上手。

核心概念

介绍

Vue.js是一套用于构建用户界面的渐进式Ja vaScript框架。它的设计理念非常灵活，可以作为一个库嵌入到现有项目中，也可以作为一个完整的框架来开发复杂的单页应用（SPA）。

库和框架的区别

说到框架和库的区别，很多人可能会问到这样一个问题：它们到底有什么不同？

Library

库，本质上就是一些函数的集合。每调用一个函数，就实现一个特定的功能，然后控制权重新回到你手中。就像jQuery，它的核心就是封装并简化了DOM操作。

Framework

框架是一套完整的解决方案。使用框架的时候，你需要把自己的代码放到框架规定好的位置，框架会在合适的时机自动调用你的代码。框架规定了编程方式，一切由框架控制。

主要区别

核心差异可以用一句话概括：You call Library, Framework calls you。关键在于谁起主导作用，也就是控制反转。使用库，是开发者决定如何调用；而框架则全程控制流程。这在业内也被称为“好莱坞原则”：Don't call us, we'll call you。显然，框架的侵入性更强。

MVVM模式

MVVM，是一种更好的UI模式解决方案。从早期的Script、Code Behind，到MVC、MVP，再到如今的MVVM，前端架构一直在演进。

MVC

M：Model，数据模型，专门用于操作数据（CRUD）。
V：View，视图，也就是页面。
C：Controller，控制器，是视图和数据模型沟通的桥梁，负责处理业务逻辑。

MVVM组成

MVVM => M（Model）/ V（View）/ VM（ViewModel）。
M：数据模型。
V：视图。
VM：视图模型。

优势对比

MVC模式将应用划分为三大部分，实现了职责分离。但在前端中，我们经常需要通过Ja vaScript进行一些逻辑操作，然后把这些操作结果展示在页面上，这就免不了频繁操作DOM。

MVVM通过数据双向绑定让数据自动地双向同步。视图修改了数据，数据会跟着变化；数据变了，视图也会自动更新。核心是数据，像Vue这种MVVM框架，不推荐开发人员手动操作DOM。

Vue中的MVVM

Vue的设计虽然并未完全遵循MVVM模型，但无疑受到了它的启发。所以在官方文档中，我们经常能看到 vm (ViewModel的简称) 这个变量名来表示Vue实例。

学习Vue要转化思想

最重要的就是思想转变：不要再想着怎么操作DOM，而是想着如何操作数据！

起步 - Hello Vue

安装：npm i -S vue

{{ msg }}

Vue实例

注意：先在 data 中声明数据，再使用数据。

可以通过 vm.$data 访问到 data 中的所有属性，或者直接 vm.msg。

var vm = new Vue({
    data: {
        msg: '大家好，...'
    }
})
vm.$data.msg === vm.msg // true

数据绑定

最常用的方式是 Mustache(插值语法)，也就是 {{}} 语法。它从数据对象 data 中获取数据，当数据改变时，插值处的内容也会自动更新。

注意：{{}} 中只能出现Ja vaScript表达式，不能解析js语句。而且Mustache语法不能作用在HTML元素的属性上。

Hello, {{ msg }}.
{{ 1 + 2 }}
{{ isOk ? 'yes': 'no' }}

双向数据绑定

双向数据绑定将DOM与Vue实例的 data 数据绑定到一起，彼此相互影响。数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化。

原理：核心是利用了 Object.defineProperty 中的 get 和 set 方法，也就是访问器。它们的作用是指定读取或设置对象属性值时执行的操作。

/*defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
    // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
    set: function (newVal, oldVal) {},
    // 读取 obj.msg 时get方法会被系统调用
    get: function ( newVal, oldVal ) {}
})

Vue双向绑定的极简实现

动态添加数据的注意点

只有 data 中的数据才是响应式的，动态添加进来的数据默认为非响应式。可以通过以下方式实现动态添加数据的响应式：

• Vue.set(object, key, value) - 适用于添加单个属性
• Object.assign() - 适用于添加多个属性

var vm = new Vue({
    data: {
        stu: {
            name: 'jack',
            age: 19
        }
    }
})

/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')

/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

异步DOM更新

Vue异步执行DOM更新，它会监视所有数据改变，然后一次性更新DOM。这种机制去除了重复数据，对于避免不必要的计算和重复DOM操作非常重要。如果需要获取更新后DOM中的数据，则必须通过 Vue.nextTick(callback) 或 vm.$nextTick(function () {})。

methods: {
    fn() {
        this.msg = 'change'
        this.$nextTick(function () {
            console.log('$nextTick中打印：', this.$el.children[0].innerText);
        })
        console.log('直接打印：', this.$el.children[0].innerText);
    }
}

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。当表达式的值改变时，它会将其产生的连带影响，响应式地作用于DOM。

v-text

更新DOM对象的 textContent。

v-html

更新DOM对象的 innerHTML。

v-bind

动态绑定属性。语法：v-bind:title="msg"，简写：:title="msg"。

v-on

绑定事件。语法：v-on:click="say" 或 v-on:click="say('参数', $event)"，简写：@click="say"。绑定的事件定义在 methods 中。

事件修饰符

• .stop - 阻止冒泡
• .prevent - 阻止默认行为
• .capture - 使用事件捕获模式
• .self - 只在自身触发时才执行
• .once - 事件只触发一次

v-model

在表单元素上创建双向数据绑定。它会监听用户的输入事件来更新数据。

Message is: {{ message }}

v-for

基于源数据多次渲染元素或模板块。

{{ item.text }}


{{item}} -- {{index}}


{{item}} -- {{key}}

{{item}}

key属性

推荐在使用 v-for 时提供 key 属性，以获得性能提升。Vue会基于key的变化重新排列元素顺序，并移除不存在的元素。

样式处理 - class和style

使用方式：v-bind:class="expression" 或 :class="expression"。表达式的类型可以是字符串、数组、对象。

 ===> 解析后



 ===>解析后



 ===>解析后


--- style ---

v-if 和 v-show

• v-if：根据表达式的真假，销毁或重建元素。
• v-show：根据表达式的真假，切换元素的 display CSS属性。

这个元素展示出来了吗？？？
这个元素，在HTML结构中吗？？？

提升性能：v-pre

跳过这个元素和它的子元素的编译过程，可以显示原始Mustache标签，跳过大量没有指令的节点会加快编译。

{{ this will not be compiled }}

提升性能：v-once

只渲染元素和组件一次。后续重新渲染时，该元素及其所有子节点将被视为静态内容，跳过更新。

This will never change: {{msg}}

过滤器 filter

过滤器用于文本数据的格式化，可以在 {{}} 和 v-bind 表达式中使用。有两种过滤器：全局过滤器和局部过滤器。

全局过滤器

通过全局方式创建的过滤器，在任何一个Vue实例中都可以使用。使用全局过滤器时，需要先创建，再创建Vue实例。显示的内容由过滤器的返回值决定。

Vue.filter('filterName', function (value) {
    // value 表示要过滤的内容
})

示例：

{{ dateStr | date }}
{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}

局部过滤器

在某个Vue实例内部创建，只在当前实例中生效。

{
    data: {},
    // 通过 filters 属性创建局部过滤器
    // 注意：此处为 filters
    filters: {
        filterName: function(value, format) {
        }
    }
}

按键值修饰符

在监听键盘事件时，Vue允许为 v-on 添加关键修饰符。还有修饰键（.ctrl等）和鼠标按键修饰符（.left等）。

// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"

// 使用全局按键别名
@keyup.enter="add"

---

// 通过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113

// 使用自定义键值修饰符
@keyup.enter.f2="add"

监视数据变化 - watch

watch 是一个对象，键是需要观察的表达式，值是对应回调函数。当表达式的值发生变化后，会调用对应的回调函数完成监视操作。

new Vue({
    data: { a: 1, b: { age: 10 } },
    watch: {
        a: function(val, oldVal) {
            // val 表示当前值
            // oldVal 表示旧值
            console.log('当前值为：' + val, '旧值为：' + oldVal)
        },
        // 监听对象属性的变化
        b: {
            handler: function (val, oldVal) { /* ... */ },
            // deep : true表示是否监听对象内部属性值的变化
            deep: true
        },
        // 只监视user对象中age属性的变化
        'user.age': function (val, oldVal) {
        },
    }
})

计算属性

计算属性是基于它们的依赖进行缓存的，只有在依赖发生改变时才会重新求值。不要在Mustache语法（{{}}）中放入太多逻辑，否则会让模板过重、难以维护。注意：computed 中的属性不能与 data 中的属性同名。

var vm = new Vue({
    el: '#app',
    data: {
        firstname: 'jack',
        lastname: 'rose'
    },
    computed: {
        fullname() {
            return this.firstname + '.' + this.lastname
        }
    }
})

实例生命周期

所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）。实例生命周期也叫组件生命周期。

生命周期介绍

简单说，一个组件从开始到最后消亡所经历的各种状态，就是它的生命周期。生命周期钩子函数从组件被创建到挂载到页面，再到页面关闭被卸载，这三个阶段伴随着各种事件。

Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可。

钩子函数 - beforeCreate()

在实例初始化之后，数据观测和事件配置之前被调用。此时，无法获取 data 中的数据和 methods 中的方法。

钩子函数 - created()

这是一个常用的生命周期，可以调用 methods 中的方法、改变 data 中的数据。使用场景：发送请求获取数据。

钩子函数 - beforeMounted()

在挂载开始之前被调用。

钩子函数 - mounted()

此时，Vue实例已经挂载到页面中，可以获取到 el 中的DOM元素，进行DOM操作。

钩子函数 - beforeUpdated()

数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。在这个钩子中，你可以进一步更改状态，不会触发附加的重渲染。注意：此时获取到的数据是更新后的，但页面中的DOM元素还是更新前的。

钩子函数 - updated()

组件DOM已经更新，可以执行依赖于DOM的操作。

钩子函数 - beforeDestroy()

实例销毁之前调用，此时实例仍然完全可用。使用场景：清除定时器等清理任务。

钩子函数 - destroyed()

Vue实例销毁后调用，所有东西都会解绑定，所有事件监听器会被移除，所有子实例也会被销毁。

axios

axios是一个基于Promise的HTTP客户端，适用于浏览器和node.js，用于发送请求，异步获取数据。安装：npm i -S axios。

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求
created: function () {
    axios.get(url).then(function(resp) {})
}

---

// 配合 webpack 使用方式如下：
import Vue from 'vue'
import axios from 'axios'

// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios

---

// 在组件中使用：
methods: {
    getData() {
        this.$axios.get('url').then(res => {}).catch(err => {})
    }
}

---

// API使用方式：
axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)

Get 请求

const url = 'https://vue.studyit.io/api/getnewslist'

// url中带有query参数
axios.get('/user?id=89').then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// url和参数分离，使用对象
axios.get('/user', {
    params: {
        id: 12345
    }
})

Post 请求

不同环境中处理POST请求。默认情况下，axios会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，可以这样：

// 使用 qs 包，处理将对象序列化为字符串
// npm i -S qs
// var qs = require('qs')
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))

// 或者：
axios.post('/foo', 'bar=123&age=19')

const url = 'https://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=点个赞不过份')

axios.post('/user', qs.stringify({
    firstName: 'Fred',
    lastName: 'Flintstone'
})).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

全局配置

// 设置请求公共路径：
axios.defaults.baseURL = 'https://vue.studyit.io'

拦截器

拦截器会拦截每一个请求，请求发送之前执行 request 中的函数，请求发送完成之后执行 response 中的函数。

// 请求拦截器
axios.interceptors.request.use(function (config) {
    // 所有请求之前都要执行的操作
    return config;
}, function (error) {
    // 错误处理
    return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function (response) {
    // 所有请求完成后都要执行的操作
    return response;
}, function (error) {
    // 错误处理
    return Promise.reject(error);
});

自定义指令

自定义指令用于进行DOM操作，比如文本框获得焦点。有两种指令：全局指令和局部指令。

全局自定义指令

// 第一个参数：指令名称
// 第二个参数：配置对象，指定指令的钩子函数
Vue.directive('directiveName', {
    // bind中只能对元素自身进行DOM操作，而无法对父级元素操作
    // 只调用一次 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    bind( el，binding, vnode ) {
        // 参数详解
        // el：指令所绑定的元素，可以用来直接操作 DOM 。
        // binding：一个对象，包含以下属性：
        //   name：指令名，不包括 v- 前缀。
        //   value：指令的绑定值，等号后面的值 。
        //   oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
        //   expression：字符串形式的指令表达式 等号后面的字符串 形式
        //   arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
        //   modifiers：指令修饰符。例如：v-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。
        // vnode：Vue 编译生成的虚拟节点。。
        // oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
    },
    // inserted这个钩子函数调用的时候，当前元素已经插入页面中了，也就是说可以获取到父级节点了
    inserted (el，binding, vnode ) {},
    //DOM重新渲染前
    update(el，binding, vnode,oldVnode) {},
    // DOM重新渲染后
    componentUpdated ( el，binding, vnode,oldVnode ) {},
    // 只调用一次，指令与元素解绑时调用
    unbind ( el ) {
        // 指令所在的元素在页面中消失，触发
    }
})

// 简写 如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子:
Vue.directive('自定义指令名', function( el, binding ) {})

// 例：
Vue.directive('color', function(el, binding) {
    el.style.color = binging.value
})

// 使用 注意直接些会被i成data中的数据“red” 需要字符串则嵌套引号"'red'"

局部自定义指令

var vm = new Vue({
    el : "#app",
    directives: {
        directiveName: { }
    }
})

组件

创建组件有两种方式：全局组件和局部组件。

全局组件

全局组件在所有的vue实例中都可以使用。注意：先注册组件，再初始化根实例。

// 1 注册全局组件
Vue.component('my-component', {
    // template 只能有一个根元素
    template: '
A custom component!
',
    // 组件中的 `data` 必须是函数 并且函数的返回值必须是对象
    data() {
        return {
            msg: '注意：组件的data必须是一个函数！！！'
        }
    }
})

// 2 使用：以自定义元素的方式

    


// =====> 渲染结果

    
A custom component!


// 3 template属性的值可以是：
//   - 1 模板字符串
//   - 2 模板id
template: '#tpl'

extend：使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

var Home = Vue.extend({
    template: '',
    data() {
    }
})
Vue.component('home', Home)

局部组件

在某个具体的vue实例中定义，只能在这个vue实例中使用。

var Child = {
    template: '
A custom component!
'
}

new Vue({
    // 注意：此处为 components
    components: {
        //  将只在当前vue实例中使用
        // my-component 为组件名 值为配置对象
        'my-component': {
            template: ``,
            data () { return { } },
            props : []
        }
    }
})

is特性

    
    
    正常识别
    

组件通讯

父组件到子组件

通过子组件 props 属性来传递数据。props 是一个数组，属性的值必须在组件中通过 props 属性显示指定，否则不会生效。

子组件到父组件

父组件给子组件传递一个函数，由子组件调用这个函数。借助vue中的自定义事件（v-on:cunstomFn="fn"）。

步骤：

1. 在父组件中定义方法 parentFn
2. 在子组件组件引入标签中绑定自定义事件 v-on:自定义事件名="父组件中的方法" => @pfn="parentFn"
3. 子组件中通过 $emit() 触发自定义事件 this.$emit(pfn,参数列表。。。)

非父子组件通讯

通过 $on() 绑定自定义事件，借助一个空的Vue实例作为事件总线。

var bus = new Vue()

// 在组件 B 绑定自定义事件
bus.$on('id-selected', function (id) {
    // ...
})

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

示例：组件A ---> 组件B

内容分发

通过 标签指定内容展示区域。

    
        
        
我是额外的内容
    


// js代码
new vue({
    el : "#app",
    components : {
        hello : {
            template : `

                
我是子组件中的内容
                
            
`
        }
    }
})

获取组件（或元素） - refs

vm.$refs 是一个对象，持有已注册过 ref 的所有子组件（或HTML元素）。在HTML元素中添加 ref 属性，然后在JS中通过 vm.$refs.属性 来获取。

SPA - 单页应用程序

SPA： Single Page Application

单页Web应用（SPA）只有一个Web页面，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用程序：只有第一次会加载页面，以后的每次请求，仅仅是获取必要的数据，然后由页面中的js解析并展示。

传统多页面应用程序：每次请求服务器返回的都是一个完整的页面。

优势：减少了请求体积，加快了页面响应速度，降低了对服务器的压力，提供了更好的用户体验。

实现思路和技术点：ajax、锚点的使用（window.location.hash #）、hashchange 事件。

路由

路由即浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则。在Web app中，通过一个页面来展示和管理整个应用的功能。简单来说，路由就是一套映射规则，当URL中的哈希值发生改变后，路由会根据规则展示对应的视图内容。

基本使用

安装：npm i -S vue-router

    
    首页
    登录
    
    

重定向

//将path 重定向到 redirect
{ path: '/', redirect: '/home' }

路由其他配置

路由导航高亮：当前匹配的导航链接，会自动添加 router-link-exact-active 和 router-link-active 类，可以通过 linkActiveClass 配置。

匹配路由模式：通过 mode 配置，可选 hash（默认）、history、abstract。

new Router({
    routers:[],
    mode: "hash", //默认hash | history 可以达到隐藏地址栏hash值 | abstract，如果发现没有浏览器的 API 则强制进入
    linkActiveClass : "now" //当前匹配的导航链接将被自动添加now类
})

路由参数

经常需要把某种模式匹配到的所有路由，全部映射到同一个组件，此时可以通过路由参数来处理。语法：/user/:id。当匹配到一个路由时，参数值会被设置到 this.$route.params。还可以通过 $route.query 获取URL中的查询参数。

// 方式一
如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}

// 方式二
用户 Rose

嵌套路由 - 子路由

路由是可以嵌套的。父组件中包含 router-view，在路由规则中使用 children 配置。

// 父组件：
const User = Vue.component('user', {
    template: `

        
User Center
        个人资料
        岗位
        
        
    
`
})

// 子组件[简写]
const UserProfile = { template: '
个人资料：张三
' }
const UserPosts = { template: '
岗位：FE
' }

// 路由
var router =new Router({
    routers : [{
        path: '/user',
        component: User,
        // 子路由配置：
        children: [
            {
                // 当 /user/profile 匹配成功，
                // UserProfile 会被渲染在 User 的  中
                path: 'profile',
                component: UserProfile
            },
            {
                // 当 /user/posts 匹配成功
                // UserPosts 会被渲染在 User 的  中
                path: 'posts',
                component: UserPosts
            }
        ]
    }]
})

前端模块化

为什么需要模块化？最初的js只是为了实现客户端验证和一些简单效果。后来前端复杂度越来越高，旧版js没有提供模块相关内容，所以需要模块化来解决命名冲突、文件依赖、模块复用等问题。

模块的概念

在js中，一个模块就是实现特定功能的文件（js文件）。遵循模块的机制，想要什么功能就加载什么模块。模块化开发需要遵循规范。

JS实现模块化的规范

• AMD（浏览器端）：requirejs
• CommonJS（nodejs）：require() 加载模块，module.exports / exports 导出模块，ES6中的 import / export
• CMD（浏览器端）：seajs，玉伯（阿里前端大神）开发
• UMD：通用模块化规范，可以兼容AMD、CommonJS等

AMD 的使用

1、定义模块

// 语法:define(name, dependencies?, factory);
// name表示：当前模块的名称，是一个字符串 可有可无
// dependencies表示：当前模块的依赖项，是一个数组无论依赖一项还是多项 无则不写
// factory表示：当前模块要完成的一些功能，是一个函数

// 定义对象模块
define({})

// 定义方法模块
define(function() {
    return {}
})

// 定义带有依赖项的模块
define(['js/a'], function() {})

2、加载模块

// - 注意：require的第一个参数必须是数组
// 参数必须是数组 表示模块路径 以当前文件为基准,通过回调函数中的参数获取加载模块中的变量 参数与模块按照顺序一一对应
require(['a', 'js/b'], function(a, b) {
    // 使用模块a 和 模块b 中的代码
})

3、路径查找配置

requirejs 默认使用 baseUrl 和 paths 的路径解析方式。可以使用以下方式避开此设置：以.js结尾、以 / 开始、包含协议：https:// 或 https://。

// 配置示例
// 注意配置应当在使用之前
require.config({
    baseUrl: './js' // 配置基础路径为：当前目录下的js目录
})
require(['a']) // 查找 基础路径下的 ./js/a.js

// 简化加载模块路径
require.config({
    baseUrl: './js',
    // 配置一次即可，直接通过路径名称（template || jquery）加载模块
    paths: {
        template: 'assets/artTemplate/template-native',
        jquery: 'assets/jquery/jquery.min'
    }
})

// 加载jquery template模块
require(['jquery', 'template'])

4、非模块化和依赖项支持

添加模块的依赖模块，保证加载顺序（deps），将非模块化模块转化为模块化（exports）。

// 示例
require.config({
    baseUrl: './js',
    paths: {
        // 配置路径
        noModule: 'assets/demo/noModule'
    },
    // 配置不符合规范的模块项
    shim: {
        // 模块名称
        noModule: {
            deps: [], // 依赖项
            exports: 'sayHi' // 导出模块中存在的函数或变量
        }
    }
})

// 注意点如果定义模块的时候，指定了模块名称，需要使用该名称来引用模块
// 定义 这个模块名称与paths中的名称相同
define('moduleA', function() {})

// 导入
require.config({
    paths: {
        // 此处的模块名：moduleA
        moduleA: 'assets/demo/moduleA'
    }
})

5、路径加载规则

路径配置的优先级：

• 通过 config 配置规则查找
• 通过 data-main 指定的路径查找
• 以引入 requirejs 的页面所在路径为准查找

Webpack

Webpack将带有依赖项的各个模块打包处理后，变成了独立的浏览器能够识别的文件。

概述

四个核心概念：入口(entry)、输出(output)、加载器(loader)、插件(plugins)。对比模块化方案：webpack和requirejs（通过编写代码的方式将前端功能划分成独立的模块）。browserify是与webpack相似的模块化打包工具。webpack是预编译（在开发阶段通过webpack进行模块化处理，最终项目上线就不在依赖于webpack），而requirejs是线上的编译。

webpack起源

webpack解决了现存模块打包器的两个痛点：Code Spliting（代码分离，按需加载）和静态资源的模块化处理方案。

webpack与模块

在webpack看来，所有的静态资源都是模块。webpack模块能够识别以下形式的模块之间的依赖：

• JS的模块化规范：ES2015 import / export、CommonJS require() / module.exports、AMD define 和 require
• 非JS静态资源：css/sass/less 文件中的 @import、图片连接、字体等

安装webpack

全局安装：npm i -g webpack，目的：在任何目录中通过CLI使用 webpack 命令。项目安装：npm i -D webpack，目的：执行当前项目的构建。

webpack的基本使用

安装：npm i -D webpack。webpack的两种使用方式：命令行和配置文件（webpack.config.js）。

命令行方式演示 - 案例：隔行变色

1. 使用 npm init -y 初始化package.json
2. 新建 index.html 和 index.js，实现隔行变色功能
3. 运行 webpack src/js/index.js dist/bundle.js 进行打包构建，语法是：webpack 入口文件 输出文件
4. 注意：需要在页面中引入 输出文件 的路径（此步骤可通过配置webpack去掉）

/*src/js/index.js*/
// 1 导入 jQuery
import $ from 'jquery'
// 2 获取页面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行变色
// jQuery中的 filter() 方法用来过滤jquery对象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')

//命令行运行 `webpack src/js/index.js dist/bundle.js 目录生成在命令行运行目录
/*运行流程：
1、webpack 根据入口找到入口文件
2、分析js中的模块化语法 
3、将所有关联文件 打包合并输出到出口*/

webpack-dev-server 配置

一、package.json配置方式

安装：npm i -D webpack-dev-server，作用：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等）。注意：无法直接在终端中执行 webpack-dev-server，需要通过 package.json 的 scripts 实现。使用方式：npm run dev。

// 参数解释注意参数是无序的 有值的参数空格隔开
// --open 自动打开浏览器
// --contentBase ./指定浏览器 默认打开的页面路径中的 index.html 文件
// --open 自动打开浏览器
// --port 8080 端口号
// --hot 热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
"scripts": {
    "dev": "webpack-dev-server --open --contentBase ./ --port 8080 --hot"
}

二、webpack.config.js 配置方式(推荐)

var path = require('path')

module.exports = {
    // 入口文件
    entry: path.join(__dirname, 'src/js/index.js'),
    // 输出文件
    output: {
        path: path.join(__dirname, 'dist'), // 输出文件的路径
        filename: 'bundle.js' // 输出文件的名称
    }
}

const webpack = require('webpack')

devServer: {
    // 服务器的根目录 Tell the server where to serve content from
    // https://webpack.js.org/configuration/dev-server/#devserver-contentbase
    contentBase: path.join(__dirname, './'),
    // 自动打开浏览器
    open: true,
    // 端口号
    port: 8888,
    // --------------- 1 热更新 -----------------
    hot: true
},
plugins: [
    // ---------------- 2 启用热更新插件 ----------------
    new webpack.HotModuleReplacementPlugin()
]

html-webpack-plugin 插件

安装：npm i -D html-webpack-plugin，作用：根据模板，自动生成html页面。优势：页面存储在内存中，自动引入 bundle.js、css 等文件。

/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new htmlWebpackPlugin({
        // 模板页面路径
        template: path.join(__dirname, './index.html'),
        // 在内存中生成页面路径，默认值为：index.html
        filename: 'index.html'
    })
]

Loaders（加载器）

webpack只能处理Ja vaScript资源，通过loaders处理非Ja vaScript静态资源。

1、 CSS打包

安装：npm i -D style-loader css-loader。注意：use中模块的顺序不能颠倒，加载顺序：从右向左加载。

/* 在index.js导入 css 文件*/
import './css/app.css'

/* webpack.config.js 配置各种资源文件的loader加载器*/
module: {
    // 配置匹配规则
    rules: [
        // test 用来配置匹配文件规则（正则）
        // use是一个数组，按照从后往前的顺序执行加载
        {test: /\.css$/, use: ['style-loader', 'css-loader']},
    ]
}

2、 使用webpack打包sass文件

安装：npm i -D sass-loader node-sass。注意：sass-loader 依赖于 node-sass 模块。

/* webpack.config.js */
// 参考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader"：creates style nodes from JS strings 创建style标签
// "css-loader"：translates CSS into CommonJS 将css转化为CommonJS代码
// "sass-loader" ：compiles Sass to CSS 将Sass编译为css
module:{
    rules:[{
        test: /\.(scss|sass)$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
    },]
}

3、 图片和字体打包

安装：npm i -D url-loader file-loader。file-loader：加载并重命名文件（图片、字体等）。url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中。

/* webpack.config.js */
module: {
    rules:[
        // 打包 图片文件
        { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },
        // 打包 字体文件
        { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
    ]
}

图片打包细节

limit参数的作用（单位为：字节(byte)）：

• 当图片文件大小小于指定的limit时，图片被转化为base64编码格式
• 当图片文件大小大于等于指定的limit时，图片被重命名以url路径形式加载（此时，需要file-loader来加载图片）
• 图片文件重命名，保证相同文件不会被加载多次
• 文件重命名以后，会通过MD5加密的方式，来计算这个文件的名称

/* webpack.config.js */
module: {
    rules: [
        // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
        {
            test: /\.(jpg|png|gif|jpeg)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192
                }
            }]
        }
    ]
}

字体文件打包说明

处理方式与图片相同，可以使用：file-loader或url-loader。

babel

安装：npm i -D babel-core babel-loader，安装：npm i -D babel-preset-env。

基本使用（两步）

第一步：

/* webpack.config.js */
module: {
    rules: [
        // exclude 排除，不需要编译的目录，提高编译速度
        {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
    ]
}

第二步：在项目根目录中新建 .babelrc 配置文件

/* 创建 .babelrc 文件 */
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
    "presets": ["env"]
}

babel的说明

babel的作用：

• 语法转换：将新的ES语法转化为浏览器能识别的语法（babel-preset-*）
• polyfill浏览器兼容：让低版本浏览器兼容最新版ES的API

babel-preset-*

作用：将新的ES语法转化为浏览器能识别的ES5代码。

ES6语法提案的批准流程：ES2015 也就是 ES6, 下一个版本是ES7，从ES6到ES7之间经历了5个阶段。babel-preset-es2015 转换es6的语法，babel-preset-stage-0 转换比es6更新的语法。

Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）
Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's ja vascript".

babel-polyfill 和 transform-runtime

作用：实现浏览器对不支持API的兼容（兼容旧环境、填补）。在低版本浏览器中使用高级的ES6或ES7的方法或函数，比如：'abc'.padStart(10)。

方式一 polyfill：npm i -S babel-polyfill。方式二 transform-runtime：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime。

注意：babel-runtime包中的代码会被打包到你的代码中（-S）。polyfill 所有兼容性问题，都可以通过polyfill解决（包括：实例方法）、污染全局环境。runtime 除了实例方法以外，其他兼容新问题都能解决、不污染全局环境。

polyfill：如果想要支持全局对象（比如：Promise）、静态方法（比如：Object.assign）或者实例方法（比如：String.prototype.padStart）等，那么就需要使用 babel-polyfill。

babel-runtime：提供了兼容旧环境的函数，使用的时候，需要自己手动引入，比如：const Promise = require('babel-runtime/core-js/promise')。存在的问题：手动引入太繁琐，多个文件引入同一个helper（定义），造成代码重复，增加代码体积。

babel-plugin-transform-runtime：自动引入helper，babel-runtime提供helper定义，引入这个helper即可使用，避免重复，依赖于babel-runtime插件。

transform-runtime插件的使用：直接在 .bablerc 文件中，添加一个 plugins 的配置项即可。

"plugins": ["transform-runtime"]

babel-polyfill 的使用步骤：

//1 main.js
// 第一行引入
require("babel-polyfill")
var s = 'abc'.padStart(4)
console.log(s)

// 2 webpack.config.js 配置
module.exports = {
    entry: ['babel-polyfill', './js/main.js']
}

总结

• babel-core：babel核心包
• babel-loader：用来解析js文件
• babel-preset-*：新ES语法的解析和转换
• transform-runtime / babel-polyfill：兼容旧浏览器，到达支持新API目的

// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
    // 如果不兼容, 就自己模拟 padStart的功能实现一份
    String.prototype.padStart = function padStart(targetLength,padString) {
    }
}

vue单文件组件

单文件组件后缀名为 .vue，需要被预编译后才能在浏览器中使用。注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler。安装：npm i -D vue-loader vue-template-compiler。

// webpack.config.js 配置：
module: {
    rules: [
        {test: /\.vue$/, loader: 'vue-loader'}
    ]
}

使用单文件组件

/* main.js */
import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'

const vm = new Vue({
    el: '#app',
    // 通过 render 方法，渲染App组件
    render: c => c(App)
})

单文件组件使用步骤

1. 安装：npm i -D vue-loader vue-template-compiler
2. 在 webpack.config.js 中配置 .vue 文件的loader：{ test: /\.vue$/, use: 'vue-loader' }
3. 创建 App.vue 单文件组件
4. 在 main.js 入口文件中，导入 vue 和 App.vue组件，通过 render 将组件与实例挂到一起

单文件组件 路由

import Vue from 'vue'
import App from './App.vue'

// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'

// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)

// 3 创建路由对象
const router = new VueRouter({
    routes: [
        { path: '/home', component: Home },
        { path: '/login', component: Login }
    ]
})
// ------------- vue路由配置 结束 --------------

const vm = new Vue({
    el: '#app',
    render: c => c(App),
    // 4 挂载到 vue 实例中
    router
})

Mint-UI

基于 Vue.js 的移动端组件库。

快速开始

安装：npm i -S mint-ui

// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)

MUI

MUI也是移动端的UI库。从github下载包，找到dist文件夹，只需要导入样式即可。

// 只需要导入 MUI的样式 即可，根据MUI的例子，直接使用HTML结果即可
// 导入样式
import './lib/mui/css/mui.min.css'

ElementUI

这是PC端的UI组件库。安装：npm i -S element-ui。

{
    "presets": [
        ["es2015", { "modules": false }],
        "stage-0"
    ],
    "plugins": [
        ["component", [
            {
                "libraryName": "mint-ui",
                "style": true
            },
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-default"
            }
        ]]
    ]
}

Webpack 发布项目

webpack 命令能够生成dist目录到磁盘中，最终，把打包后的代码，部署服务器中去。webpack-dev-server 仅是在内存中生成的文件，并没有写到磁盘中，所以，只能在开发期间使用。

创建项目发布配置文件

开发期间配置文件：webpack.config.js。项目发布配置文件：webpack.prod.js（文件名称非固定 production 生产环境）。命令：webpack --config webpack.prod.js。参数：--display-error-details 用于显示webpack打包的错误信息。

/* package.json */
"scripts": {
    "build": "webpack --config webpack.prod.js"
}

// 在项目根目录中创建 webpack.prod.js 文件
// 在 package.json 中, 配置一个 scripts
// 在 终端中 通过 npm run build 对项目进行打包

打包处理过程

• 删除掉 devServer 相关的配置项
• 将图片和字体文件输出到指定的文件夹中
• 自动删除dist目录
• 分离第三方包（将使用的vue等第三方包抽离到 vender.js 中）
• 压缩混淆JS 以及 指定生成环境
• 抽取和压缩CSS文件
• 压缩HTML页面
• 配合vue的异步组件，实现按需加载功能

处理图片路径

注意：如果 limit 小于比图片大，那么图片将被转化为 base64 编码格式。

/* webpack.prod.js */
// 处理URL路径的loader
{
    test: /\.(jpg|png|gif|bmp|jpeg)$/,
    use: {
        loader: 'url-loader',
        options: {
            limit: 8192,
            name: 'images/[hash:7].[ext]' // 作用：将图片输出到images文件夹中，文件名采用7位的哈希值（MD5），并且保持原来的图片文件扩展名
            // name：指定文件输出路径和输出文件命令规则
            // [hash:7]：表示使用7位哈希值代表文件名称
            // [ext]：表示保持文件原有后缀名
            // name: 'imgs/img-[hash:7].[ext]'
        }
    },
},

自动删除dist目录

安装：npm i -D clean-webpack-plugin。作用：每次打包之前，删除上一次打包的dist目录。

/* webpack.prod.js */
const cleanWebpackPlugin = require('clean-webpack-plugin')

plugins: [
    // 创建一个删除文件夹的插件，删除dist目录
    new cleanWebpackPlugin(['./dist'])
]

分离第三方包

目的：将公共的第三方包，抽离为一个单独的包文件，防止重复打包。抽离后，vue文件只会被打包一次，用到的地方仅仅是引用。

/* webpack.prod.js */
// 1 入口 -- 打包文件的入口
entry: {
    // 项目代码入口
    app: path.join(__dirname, './src/js/main.js'),
    // 第三方包入口
    vendor: ['vue', 'vue-router', 'axios']
},
output: {
    // 2 修改输出文件路径和命名规则
    filename: 'js/[name].[chunkhash].js',
},
plugins: [
    // 3 抽离第三方包
    new webpack.optimize.CommonsChunkPlugin({
        // 将 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名为 vendor 的js文件中
        // 第三方包入口名称，对应 entry 中的 vendor 属性
        name: 'vendor',
    }),
]

压缩混淆JS

注意：uglifyjs 无法压缩ES6的代码。

plugins: [
    // 优化代码
    // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
    new webpack.optimize.UglifyJsPlugin({
        // 压缩
        compress: {
            // 移除警告
            warnings: false
        }
    }),
    // 指定环境为生产环境：vue会根据这一项启用压缩后的vue文件
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': JSON.stringify('production')
        }
    })
]

抽取和压缩CSS文件

安装：抽离 npm i -D extract-text-webpack-plugin，安装：压缩 npm i -D optimize-css-assets-webpack-plugin。压缩和抽离CSS报错的说明：Error processing file: css/style.css，postcss-svgo: Error in parsing SVG: Unquoted attribute value。原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号。

/* webpack.prod.js */
// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// bug描述: 生成后面的css文件中图片路径错误，打开页面找不到图片
// 解决：google搜索 webpack css loader 样式图片路径
output: {
    // ...
    // https://doc.webpack-china.org/configuration/output/#output-publicpath
    // 设置公共路径
    publicPath: '/',
},

module: {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader']
            })
        },
    ]
},

plugins: [
    // 通过插件抽离 css (参数)
    new ExtractTextPlugin("css/style.css"),
    // 抽离css 的辅助压缩插件
    new OptimizeCssAssetsPlugin()
]

压缩HTML页面

new htmlWebpackPlugin({
    // 模板页面
    template: path.join(__dirname, './index.html'),
    // 压缩HTML
    minify: {
        // 移除空白
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
        // 移除属性中的双引号
        removeAttributeQuotes: true
    }
}),

vue配合webpack实现路由按需加载

步骤：

1 修改组件的引用方式

// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')

// 方式二: import() -- 推荐
// 注意：/* webpackChunkName: "newsinfo" */ 是一个特殊的语法，表示生成js文件的名称
const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ '../components/news/newsinfo.vue')

2 修改 webpack 配置文件的output

output: {
    // ------添加 chunkFilename, 指定输出js文件的名称------
    chunkFilename: 'js/[name].[chunkhash].js',
},