vue开发中的"骚操作"

前言

在与同事协作开发的过程中，见识到了不少“骚操作”。因为之前都没用过，所以我愿称之为“高级技巧”！

Vue.extend

在交互过程中，有个需求就是点击图标弹出相关信息的弹窗，并且能够同时打开多个。这时就可以用Vue.extend方法手动挂载弹窗组件。

举例：

// 目录结构
/registry
    /videoDialog
        videoDialog.vue
        index.js
    /XXXDialog
        ···
    index.js

// videoDialog/index.js
import Vue from 'vue';
import videoDialog from './videoDialog.vue';

const videoDialogConstructor = Vue.extend(videoDialog);

function videoDialogInstance (data) {
    const dialogInstance = new videoDialogConstructor({
        el: document.createElement('div'),
        data () ({
            ...data
        })
    });
    document.body.appendChild(dialogInstance.$el);
}

export default function videoDialogDom () {
    Vue.prototype.$videoDom = videoDialogInstance
}

/index.js
import videoDialog from './videoDialog';
Vue.use(videoDialog);

// 用法
// video.vue
export default {
    method: {
        click() {
            this.$video();
        }
    }
}

在css中使用相对路径

在vue项目中，通过在webpack配置文件中配置alias属性增加文件路径的别名

// webpack.config.js
resolve: {
    alias: {
        '@': resolve('src'),
        '@assets': resolve('src/assets')
    }
}

// 在js文件中可以使用
import component from '@/component/xxx'

// 但是在css文件中使用'@assets/images/xxx.png'却会报错
background-image: url(@assets/images/xxx.png)

在css文件使用@assets/images/xxx.png的语法引用相对@assets的目录会报错。说明webpack没有正确识别资源的相对路径。

这是因为css文件是被css-loader所处理，url()中的路径会被css-loader视为绝对路径。因为并没有在css-loader中配置alias属性，所以会找不到@assets。

解决方法有两种：

• 在css-loader中配置alias，但是相同的别名却要配置两份，会显得冗余。
• 在引用路径之前添加～符号。background-image: url(～@assets/images/xxx.png)；webpack会将以～符号作为前缀的路径视作依赖模块去解析，这样alias配置就生效了。

同样的方法也可以用于非JS文件中。

自动加载模块

有些库会在项目里频繁用到，比如说lodash。而每次使用都得引用一次import _ from 'lodash'麻烦的很！

有一个方法可以自动加载模块：使用ProvidePlugin

new webpack.ProvidePlugin({
  _: 'lodash',
  // ...
})

// 或者只使用单个方法
new webpack.ProvidePlugin({
  _map: ['lodash', 'map']
  // ...
})

任何时候，当_被当作未赋值的变量时，lodash就会自动被加载，并且_会被这个 lodash输出的内容所赋值。

指定vue的时候要注意, 对于ES2015模块的default export，必须指定模块的default属性。

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})

公共组件、公共方法与公共指令的注入

在项目的开发中，一般都把重复使用的组件、方法抽象出来放到例如叫common的文件夹中。例如

/common
    /components
        index.js
    /utils
        index.js
    /directives
        index.js
    index.js

在前面这三个index.js文件中，一般是export出各个类型的函数，例如：

// components/index,js
export { component1 } from './component1.vue'
export { component2 } from './component2.vue'

// utils/index.js
export { method1 } from './method1.js'
export { method2 } from './method2.js'

// directives/index.js
export { directive1 } from './directive1.js'
export { directive2 } from './directive2.js'

然后统一在第四个index.js中，暴露一个install方法，在install里注入到全局

import * as Directives from './directives';
import * as Components from './components';
import * as Utils from './utils';

export default {
    install: (Vue) => {
        for (let name of Object.keys(Components)) {
            Vue.component(Components[name]['name'], Components[name]);
        }
        for (let name in Directives) {
            Vue.directive(name, Directives[name]);
        }
        Object.assign(Vue.prototype.$utils ? Vue.prototype.$utils : {}, Utils);
    }
};

只需在main.js文件中，使用vue.use方法

// main.js
import common from './common';
Vue.use(common);

干净利落！

Gzip加速

最后介绍一个插件：CompressionWebpackPlugin。它可以提供gzip压缩, 优化http请求, 提高加载速度。

// vue.config.js
const CompressionPlugin = require("compression-webpack-plugin");
configureWebpack:config => {
    if (process.env.NODE_ENV === 'production') {
         // 开启gzip压缩
        config.plugins.push(new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.js$|\.css$/,
            threshold: 10240, // 对超过10k的数据进行压缩
            cache: true, // 是否需要缓存
            deleteOriginalAssets:false  // 不删除源文件
        }))
    }
}

作者： zhangwinwin
链接：vue开发中的"骚操作"
来源：github