vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，...
vw 解决方案1. 安装并配置PostCss插件代码如下:npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S2. 对 PostCss 进行配置找到在根目录中的.postcssrc.js，对PostCSS插件进行配置 module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},// to edit target browsers: use "browserslist" field in package.json"postcss-write-svg": ...
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案 使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方（如OSS），减小服务器压力按需加载三方资源，如iview,建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小webpack开启gzip压缩若首屏为登录页，可以做成多入口，登录页单独分离为一个入口使用CDN资源,减小服务器带宽压力 在index.html中引入cdn资源 ...<...
关于Vue中路由使用history模式，开发微信H5页面分享时在安卓上签名有效成功，但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中，路由使用History模式下，在使用微信分享时，在微信开发者工具上一切正常。在安卓上一切正常。 但是！！！在IOS上反复报签名错误。 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号，接着下面分享出来自定义内容是安卓分享正常,话不多说上图！！！！我的代码:需求描述...
个人思路 获取后台返回头像url，判断图片宽度，高度。 如果宽度>高度， 使其高度填充盒子 两边留白。 如果宽度<高度，使得宽度填充盒子 上下留白。 效果图：缺陷：懒加载图片 会出现闪烁代码实现 <template>// 外面要给一个div并且限制宽度和高度，text-align center，overflow hidden<div class="head">// userInfoList.avatar 是后台返回给我的头像URL<img v-lazy="userInfoList.avatar" id="userhead" alt=""/> </div><div cla...
微信授权登录是一个非常常见的场景,利用微信授权登录,我们可以很容易获取用户的一些信息,通过用户对公众号的唯一openid从而建立数据库绑定用户身份.微信授权登录的机制这里不做详述,微信官方文档已有详述,简述就是通过跳转微信授权的页面,用户点击确认后,微信会跳到回调页面,此时回调页面url上会携带code参数,通过code参数,后端可以拿code换取拥护openid,或者用户信息 在vue项目中,通常是一个SPA应用,即所有的页面都是同一个html,通...
前言背景情况 vue - 2.5.11vue-cli 使用模板 webpack-simplehttp请求：axiosVue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+，即是 ie9 及更高的版本。经过测试，Vue 的核心框架 vuejs 本身，以及生态的官方核心插件（VueRouter、Vuex等）均可以在 ie9 上正常使用。 Vue 的作者尤雨溪对于Vue 的学习建议 中有提及为了将项目更好的生态化/工程化，要尽可能学习及使用新的 ECMAScript 规范。目前 ES6/ES2015 是可用度和稳定度较高的...
前言公司分好几个后台模块，统一使用vue+elementUi框架开发，每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的，包括左侧边栏，上方的面包屑等 用户在使用的时候，可能要切换别的系统就要在浏览器里，新打开窗口，再输入网址，回车。 总结来说，低效，所以现在想将几个系统融合到一个里边，并且每次切换系统的时候保留用户的操作。https://github.com/Mrblackant/vueIframe 效果如图：实现思路1.结合iframe开...
方法 后台更改header使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）Jquery jsonp后台更改header header(Access-Control-Allow-Origin:*);//允许所有来源访问 header(Access-Control-Allow-Method:POST,GET);//允许访问的方式使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建） 打开config/index.js,在proxyTable中添写如下代码： proxyTable: { /api: { target: 填写请求源地址, //源地址 chan...
在 vuejs 相关项目开发过程中，我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理。事实上，在实际的使用中 vuex 可以说是相当繁琐的，每一次的需求增加需要增加 Mutations-Type 、 Action 和 Mutations , 为了简化这一操作，我们可以将 mutations 和 action 合并，简化流程如下：在此种思想的引导下, muse-model 诞生了，以简单优雅的方式完成整个项目的状态管理。 什么是 muse-modelmuse-model 并不...
遇到的问题 使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错。 在网上查找了一下，原来是HTML5 History 模式引发的问题，具体为什么，vue官方已经给出了解释，你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了，官方给出的解决方案中没有说tomcat下，怎么决解。 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的候选资源...
美团点评近日开源了 mpvue ，这是一个使用 Vue.js 开发小程序的前端框架。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。 mpvue 的核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js...
同一个生产部署项目，基内外网的访问路径并不相同，内网是基于域名根目录来访问，而外网却指向了一个子目录。 eg. ： vue-router: history模式 内网环境：192.168.1.1:8080/index.html 外网环境：domain.com/ttsd/index.html 由于开发出来的项目是要部署在客户方，且客户并不想单独拿一个域名（或子域）来部署，这时，打包后的程序就要作一些配置方面的修改了。 修改配置文件 1、把打包后的资源引用修改为相对路径 找到 config/ind...
写在前面：我只是一个前端小白，文章中的提到可能会有不足之处，仅提供一个参考。若有不完善的地方，欢迎各位大佬指出！，希望对你有帮助！ 好了，入正题。其实之前也被这问题困扰过，在网上也查了一番，没找到解决方法。直到今天，在GitHub 冒昧地向大佬提了一个 issue，才点醒了我。其实是因为太过急功近利了，没有认真阅读 vue-baidu-map 提供参考文档，也有可能是看过然后忘记了！ 首先要明确一点（文档原话）：由于百度地图 J...
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数，变成 /register?plan=private router.push({ path: register, query: { plan: private }}) 然后，我就这样写了： this.$router.push({path:manage, query: {id: tasklist}})1 结果很明显，失败了。然后我就默默的再次看了一下官网，结果发现了这句话 // 命名的路由 router.push({ name: user, params: { userId: 123 }}) // 带查询参数，变成 /register?plan=p...