vue
光就一个字
这个作者很懒,什么都没留下…
展开
-
Ubuntu配置Nginx部署Vue SPA项目
Nginx网页服务器。默认配置即支持systemd服务(守护进程)。守护进程可见上一篇博客:linux二探# ubuntu 平台安装(默认启动)$ sudo apt install nginx# 查看服务状态$ sudo systemctl status nginx# 启动$ nginx# 退出$ nginx stop# 修改配置后重启$ nginx -s reload# 可以配合 ps -ax | grep nginx 来查看当前 Nginx 使用的端口# ps是 P原创 2021-11-22 18:36:02 · 1858 阅读 · 0 评论 -
Vite2+Vue3的h5开发模板——开箱即用
h5-vite-vue3-template开箱即用的 h5 开发模板。技术栈:Vite/Vue3/Scss/github仓库地址目录简介├── index.html # index.html 模板├── jsconfig.json # JavaScript 配置├── package.json # package.json├── public # 静态资源目录(不会被处理)│原创 2021-10-21 10:22:01 · 958 阅读 · 0 评论 -
vue2.0 动态适应浏览器窗口
1.data中给需要动态设置的数据一个初始值// html<div :style="styleObject">我是demo</div>// js data() { return { styleObject: { height: '900px' ...转载 2018-06-14 09:36:36 · 2403 阅读 · 0 评论 -
VUE v-html不能触发点击事件的解决方案
背景:后端返前端html格式的数据,前端用v-html解析渲染,如:<a @click="show(1)"></a>,a标签能成功渲染,但其绑定的事件无法触发。原因:vue没有将其作为vue的模板解析渲染解决方案:不用v-html而是component模板编译上干货:<template> <div class="hello">...原创 2018-07-12 16:20:56 · 27217 阅读 · 12 评论 -
vue-cli3.0 配置vue.config.js
// vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只列一部分,具体配置参考文档const fs = require('fs')module.exports = { // 部署生产环境和开发环境下的URL。 // 默认情况下,Vu...转载 2018-09-04 10:06:42 · 9570 阅读 · 0 评论 -
vue-cli3.0新建项目,卡在node-sass后创建失败
表现:vue create时,若在依赖中勾选了 CSS Pre-processors SCSS/SASS,,之后下载依赖时会卡在node-sass...一段时间后报错创建失败原因:vue-cli3.0默认使用yarn包管理工具而不是原来的npm,而由于众所周知的原因,yarn中node-sass,如果你不翻墙,默认下载极大可能会失败解决方法配置下 node-sass 的二进...原创 2018-09-03 10:26:27 · 3445 阅读 · 3 评论 -
vue-cli3.0引入px2rem与lib-flexible 移动端适配
关于移动端的适配,我喜欢用px2rem配合lib-flexible,非常方便,vue-cli3.0后,项目配置被大大精简了,这使得原来配置px2rem的文件不复存在,但其实只要掌握了正确的姿势,配置方法比原来更简单~新时代的移动端解决方案:vw(待补充)lib-flexible作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来...原创 2018-09-05 17:27:50 · 15373 阅读 · 16 评论 -
vue-cli3.0项目中使用vw——相比flexible更原生的移动端解决方案
以前喜欢用lib-flexible配合px2rem达到移动端适配的效果, 最近了解了下vw 与 vh单位,以viewport为基准,1vw 与 1vh分别为window.innerWidth 与 window.innerHeight的百分之一。安装命令行输入:yarn add postcss-px-to-viewport 或 npm i postcss-px-to-viewport -s...原创 2018-09-03 21:02:01 · 10398 阅读 · 0 评论 -
mpvue中,用getCurrentPages调用其他页的方法
背景小程序中的getCurrentPages()方法可以取得已打开页面的参数和方法,并能直接调用方法,mpvue中也可以获取,但无法直接调用方法方案解决方法是将方法挂在页面的vue实例下,跟methods同级而不是在methods内,即可...原创 2018-09-07 16:15:07 · 5698 阅读 · 6 评论 -
vue项目获取url参数
假设我们的url是http://www.demo.com/#/?channel=123&amp;user=user #前的内容不影响import Qs from 'qs'const query = Qs.parse(location.hash.substring(3))let channel = query.channellet user = query.user...原创 2018-09-14 11:16:58 · 14135 阅读 · 3 评论 -
Vue数据响应式核心代码解析
vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者2、实现一个指令解析器...原创 2018-11-19 19:26:02 · 345 阅读 · 0 评论 -
mpvue scroll-view自动回弹bug解决方案
表现设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方解决方案打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法function calcDiff(holder, key, newObj, oldObj) { if (newObj === oldObj || newOb...转载 2018-07-04 15:04:40 · 3490 阅读 · 9 评论 -
mpvue父子组件props传参失败的解决方案
表现父组件数据还未获取时就向子组件传props,导致子组件不到数据而报错。原因mpvue虽然同时兼容vue和小程序的生命周期,但有先后之差,了解更多请戳:理解mpvue的生命周期解决方案用v-if控制子组件的渲染,判定条件为传入的值,如:<child v-if='list' :list='list'></child> 这样,在没有父组件没有获取...原创 2018-06-27 14:22:22 · 6659 阅读 · 0 评论 -
在github上部署vue.js项目
1.修改打包路径将config文件夹下的index.js文件中build的assetsPublicPath属性改为./(注意不要改成dev的路径)2.打包 npm run build3. 上传将打包生成的dist文件夹中的内容上传到github的一个仓库中,此时仓库目录应如下,index.html在根目录 4. 设置github pages将对应仓库的setting的github pages原创 2017-12-24 17:53:58 · 3751 阅读 · 0 评论 -
Type of the default value for 'data' prop must be a function的解决方法
Type of the default value for ‘data’ prop must be a function的解决方法 在写形如prop: {type: Array; default: []}的代码时,eslint常会出现这样的错误提示,百度之未果,谷歌了才找到答案,辣鸡百度毁我青春(滑稽),作博一篇,希望能帮到喜欢百度找问题的的人~翻译: prop的默认值data必须是原创 2018-01-24 15:30:40 · 18176 阅读 · 1 评论 -
在手机上预览vue项目
最近在做web音乐app时,用到了高斯模糊,但pc看不出效果,便想在手机端预览,遂作博一篇1.修改config修改config文件夹下的index.js文件:module.exports = { dev: { host: '0.0.0.0' // 原为: hotst: 'localhost' }}2.查询本地ipctrl+r输入cmd原创 2018-01-25 15:48:36 · 9380 阅读 · 0 评论 -
Failed to mount component: template or render function not defined.
vue2.x 的报错:Failed to mount component: template or render function not defined.网上有很多解释,有关于vue的版本差异,有关于build的构建问题...最后发现是由于引入的组件还没有写的问题,把子组件补全就没报错了~原创 2018-01-10 17:21:25 · 6186 阅读 · 2 评论 -
vue.js降级(ios微信端audio不能播放的解决办法之一)
还是在做qq音乐webApp~快完成了,在ios上测试的时候,发现所有audio的音乐都不能播放几经搜索,找到了黄轶老师的一篇踩坑笔记 笔记中写的很多,关于为什么audio在ios上不能播放的根本原因和解决思路,受益颇多,感兴趣的推荐看下回到正题,降低vue的版本可以解决ios微信端audio不能播放的问题, 但是网上看了很多,关于可用的降级的方法很少(几乎没有),我是这么做的:原创 2018-02-03 14:18:56 · 3224 阅读 · 0 评论 -
用better-scroll做轮播图,不能无缝循环
现象:可以轮播,但不能循环(不能从第一张往前翻,不能从最后一张往后翻)按教程里给slider-group增加了2个slider的宽度,但他们出现在轮播图片的末尾(2个空白)第一张图没有对应dot,第二张图对应第一个dot,以此类推后经网友分享,发现0.1.15中可以正常运行,原来是better-scoll版本的问题,在新版本中,轮播图的bs对象需要这么配置(snap写在一个对象中):原创 2018-01-20 13:20:40 · 4117 阅读 · 14 评论 -
vue中,在本地缓存中读写数据的方法
1.安装good-storage插件cnpm i good-storage --save2.读/写的方法common/js/cache.js:import storage from 'good-storage'const SEARCH_KEY = '__search__'const SEARCH_MAX_LENGTH = 15// compare:findindex传入的...原创 2018-02-09 16:16:40 · 24764 阅读 · 6 评论 -
记录一个overflow:hidden引起的血案-仿QQ音乐webApp
今天回顾QQ音乐作品时,在手机上测试了一下,发现一个bug:等级页面跳转rank-detail时,没有像singer-detail一样整页显示,看起来就像是header and tab把rank -detail遮住了,但* pc上chrome调试工具和微信开发者工具测试均无此问题,于是开始找原因。以下记录我的思考过程:1。既然是被其他dom遮挡了,会不会是z-index优先级的问题=>...原创 2018-02-25 14:10:36 · 262 阅读 · 0 评论 -
vue项目中,全局引用sass
背景:sass的mixin与全局变量文件需在多处引入十分麻烦,可以通过sass-resources-loader达到全局注入,终身受益的目的。scss目录安装npm i sass-resources-loader --save -dev配置在build/utils.js文件的exports.cssLoaders函数内添加如下代码:exports.cssLoa...原创 2018-06-21 14:03:35 · 5935 阅读 · 0 评论 -
Vue2.0 之vue-resource 模拟服务端返回本地json数据
Vue2.0 之vue-resource 模拟服务端返回本地json数据的全部流程原创 2017-12-23 11:55:43 · 2774 阅读 · 1 评论