vue开发中的‘骚操作’

更新日期: 2022-01-11阅读: 853标签: 技巧

前言

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


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  // 不删除源文件
        }))
    }
}

来自:https://github.com/zhangwinwin/FEBlog/blob/master/blog/19.md

链接: https://fly63.com/article/detial/11135

微信小程序技巧_你需要知道的小程序开发技巧

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下微信小程序开发的一些技巧

微信小程序分享到朋友圈方法与技巧

小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友,小程序如何分享到朋友圈呢?使用canvas绘制一张图片,并用wx.previewImage预览图片,然后长按图片保存图片到手机。

前端新手程序员不知道的 20个小技巧

前端新手程序员不知道的 20个小技巧:作为前端开发者,使用双显示器能大幅提高开发效率、学编程最好的语言不是PHP,是English、东西交付之前偷偷测试一遍、问别人之前最好先自己百度,google一下、把觉得不靠谱的需求放到最后做,很可能到时候需求就变了...

小技巧:检查你本地及公共 IP 地址

本地的 IP 地址是分配给你计算机上的内部硬件或虚拟网卡的本地/私有 IP 地址。根据你的 LAN 配置,上述 IP 地址可能是静态或动态的。公共的 IP 地址是你的 Internet 服务提供商(ISP)为你分配的公共/外部 IP 地址。

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

26 个 jQuery使用技巧

禁用右键点击;禁用搜索文本框;新窗口打开链接;检测浏览器;预加载图片;样式筛选;列高度相同;字体大小调整;返回页面顶部;获取鼠标的xy坐标;验证元素是否为空;替换元素

提高网站加载速度的一些小技巧

为你网站的用户留下良好的第一印象是非常必要的。随着商业领域的竞争,拥有一个吸引人的网站可以帮助你脱颖而出。研究表明,如果加载时间超过3秒,会有 40% 的用户放弃访问你的网站

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

不常被提及的JavaScript小技巧

这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是我们又很容易忽略。Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!