![](https://img-blog.csdnimg.cn/20210318131323455.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
VUE
vue框架相关
红烧金鱼草
爱笑的女孩运气不会太差~
展开
-
vue-cli3 webpack打包优化,提升网站性能
最近为了提升网站性能,考虑了一下打包优化。加载包越小,服务器响应越快。webpack这个打包神器,研究得还不够透彻。于是学习一下。打包优化,一般从以下几个方面考虑:一、代码压缩1.去掉.map文件.map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。有了.map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。操作:module.exports = { // ... productionSou...原创 2020-06-18 18:04:31 · 1136 阅读 · 0 评论 -
vue项目如何做seo优化?
一、ssrvue-cli+nuxt.js ssr的原理就是服务器端渲染,然后返回。用nuxt的话,最好是项目刚开始就使用,不然就要重构代码,费时费劲,成本很高,对服务器的压力还是比较大。但是优点是首屏加载速度会比较快。二、预渲染:prerender-spa-plugin插件只针对部分页面。如果是详情页,希望seo收录每个详情页的信息,则不太适用。或者项目过大的情况,配置过多,打包会很漫长。参考1:https://www.jianshu.com/p/56949dab75e5参考2:htt.原创 2020-06-18 17:25:58 · 3464 阅读 · 0 评论 -
vue-cli3 webpack配置多环境打包,解决浏览器缓存
问题1:当时遇到本地,测试服,线上不同的配置,然后一直改代码。就很坑。于是想到多环境打包。问题2:每次上线后,都有以前的缓存,导致页面不能更新,都需要通知使用者强刷。但是这种方法使用感太差了。【webpack打包文件加上版本号和时间戳】:const webpack = require('webpack');const path = require('path');const Timestamp = new Date().getTime();module.exports = { p原创 2020-06-16 22:13:20 · 622 阅读 · 0 评论 -
点击弹框外任意元素隐藏弹框
1.使用监听方法。点击元素不是弹出框则隐藏<template> <div v-if="showAlert" class="alert" style="position: fixed;top: 100px;width: 200px;height: 200px;background: #ccc;">测试弹框 </div>&l...原创 2019-12-05 11:54:00 · 795 阅读 · 0 评论 -
vue使用element-ui的上传,input输入框,单选多选按钮等组件
1.引入element-ui --- 复选框+上传+输入框// element-uiimport {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.component( 'checkbox', Checkbox );...原创 2019-05-13 17:58:09 · 8686 阅读 · 0 评论 -
vue Bus 学习
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。转载链接:http://www.cnblogs.com/fanlinqiang/p/7756566.html...转载 2019-05-23 17:05:34 · 104 阅读 · 0 评论 -
vue项目国际化 vue-i18n以及踩坑解决 小姐姐手把手教你VUE国际化~
1.安装配置- 安装 $ npm install vue-i18n或者:<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>impor...原创 2019-06-05 15:59:31 · 21103 阅读 · 32 评论