随笔分类 -  vuejs

vuejs
摘要:vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示header 可以使用 this.$emit('header',false); 来控制header不显示 例如:test页面不需要显示header,在页面被创建的时候广播(this.$emit)告诉上级不显示header, 并且在当前页面写自己的header代码,就可以了 阅读全文
posted @ 2019-01-31 19:23 大自然的流风 阅读(19009) 评论(0) 推荐(2) 编辑
摘要:vue用mand-mobile ui做交易所移动版实战示例 阅读全文
posted @ 2019-01-31 16:51 大自然的流风 阅读(5879) 评论(0) 推荐(1) 编辑
摘要:Vue用axios跨域访问数据 axios是vue-resource的替代品,vue-resource不再维护。 安装axios:npm install axios 使用vue-cli开发时,由于项目本身启动本地服务是需要占用一个端口的,所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。 通过this.$http去调用axios,如果之前你的vue-resourse也是这么写的话,可以无缝切换。换成this.axios也是没有问题的。 proxyTable相关配置及使用说明: 在config/index.js文件中,找到dev对象下proxyTable对象进行跨域设置 阅读全文
posted @ 2019-01-31 11:32 大自然的流风 阅读(2561) 评论(0) 推荐(0) 编辑
摘要:vue axios使用form-data的形式提交数据 vue axios request payload form data 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,PHP后端未必能正常获取到,所以在发送之前,需要使用qs模块对其进行处理。 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios请求不携带cookie this.axios.defaults.withCredentials = true;// 跨域携带cookie 在跨域的情况下不仅前端要设置withCredentials,后端也是要设置Access-Control-Allow-Credentials的。 阅读全文
posted @ 2019-01-31 11:05 大自然的流风 阅读(27747) 评论(1) 推荐(0) 编辑
摘要:基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网 quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar(发音为/kweɪ.zɑɹ/)是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:响应式网站 阅读全文
posted @ 2019-01-28 14:05 大自然的流风 阅读(10710) 评论(0) 推荐(0) 编辑
摘要:Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。需要它的原因在于,你的代码可能是设计在浏览器端执行的,在node环境下测试可能有些bug暴露不出来;另外,浏览器有兼容问题,karma提供了手段让你的代码自动在多个浏览器(chrome,firefox,ie等)环境下运行。如果你的代码只会运行在node端,那么你不需要用karma。 Mocha是一个测试框架,在vue-cli中配合chai断言库实现单元测试。 Mocha的常用命令和用法不算太多,看阮一峰老师的测试框架 Mocha 实例教程就可以大致了解了。 而Chai断言库可以看Chai.js断言库API中文文档,很简单,多查多用就能很快掌握。 阅读全文
posted @ 2019-01-28 00:03 大自然的流风 阅读(2594) 评论(0) 推荐(0) 编辑
摘要:Vue将px转化为rem适配移动端 1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签,设置设备宽度以及缩放比例 4.安装px2rem-loader npm install px2rem-loader 5.配置px2rem-loader 阅读全文
posted @ 2019-01-27 23:53 大自然的流风 阅读(3201) 评论(0) 推荐(0) 编辑
摘要:vscode格式化代码 安装 VsCode 格式化代码插件 搜索并安装 Beautify 格式化代码插件 使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型 格式化对齐快捷键: Windows: Ctrl + K + F Windows:Shift + Alt + F Mac: Shift + Option + F Ubuntu: Ctrl + Shift + I 阅读全文
posted @ 2019-01-27 23:45 大自然的流风 阅读(44175) 评论(2) 推荐(1) 编辑
摘要:vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好 webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低 (1)、npm uninstall webpack-dev-server (2)、npm install webpack-dev-server@2.9.1 (3)、npm run dev =================== 如何执行npm uninstall webpack-dev-server 也报错的话只能用下面方法了 原因是你的node_modules有意外改动,导致依赖库不完整。 解决: 1.删除项目下的node_modules 2.在项目目录下重新执行npm install 或者cnpm install,会重新生成node_modules 3.执行npm run build 或者cnpm run build 4.执行npm run dev 或者cnpm run de 阅读全文
posted @ 2019-01-27 23:21 大自然的流风 阅读(56407) 评论(3) 推荐(2) 编辑
摘要:在vue项目中引入jquery cnpm install jquery --save 在main.js中引入,加入下面这行代码: import 'jquery' 注:有些项目是按需加载的,在main.js里面引入不起作用 需要在对应xx.vue里面引入import $ from 'jquery' 阅读全文
posted @ 2019-01-27 23:15 大自然的流风 阅读(7047) 评论(0) 推荐(0) 编辑
摘要:vue全局使用axios插件请求ajax Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方宣布停止更新vue-resource,并推荐大家使用axios,越来越多的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目会使用 Vuex 来管理数据。 之前一直使用的是 vue-resource插件,在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了; Axios 是一个基于 promise 的 HTTP 库,并没有install方法,所以是不能使用vue.use()方法的。 简单点就是每个文件引用一次,import axios from 'axios'; 全局使用的解决方法有很三种: 1.结合 vue-axios使用 2. axios 改写为 Vue 的原型属性 3.结合 Vuex的action 阅读全文
posted @ 2019-01-27 23:03 大自然的流风 阅读(2517) 评论(0) 推荐(0) 编辑
摘要:移动手机版要求我们在制作嵌入h5的时候去适配不同的手机。适配有多重模式,有flex、百分比等。字体大小的控制也有px、百分比、rem等单位,webpack中 px转rem。 vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别 1 安装依赖包 npm install postcss-pxtorem --save-dev 2 创建 .postcss.js文件,做webpack相关配置 阅读全文
posted @ 2019-01-26 10:30 大自然的流风 阅读(12178) 评论(0) 推荐(0) 编辑
摘要:快速搭建Vue项目 第一次安装vue项目 Vue推荐开发环境 Node.js 6.2.0、npm 3.8.9、webpack 1.13、vue-cli 2.5.1、webstrom2016 阅读全文
posted @ 2019-01-26 02:25 大自然的流风 阅读(649) 评论(0) 推荐(0) 编辑
摘要:vue mand-mobile按2.0文档默认安装的是1.6.8版本 npm list mand-mobile bigbullmobile@1.0.0 E:\webcode\bigbullmobile `-- mand-mobile@1.6.8 按2.0文档弄个底部导航的一直出不来,原来是默认安装的是1.6.8版本的 https://github.com/mand-mobile/vue-cli3-example 用vue-cli3重新创建个项目好了 阅读全文
posted @ 2019-01-24 16:22 大自然的流风 阅读(1066) 评论(0) 推荐(0) 编辑
摘要:请问这种列表的要用那个组件好呢? Cellitem 只能用到两列,这个要三列的怎么弄? mand的好像没有listview,grid组件的 问了mandmobile的群主说是可以通过Cellitem的slot插槽left default right来实现的 阅读全文
posted @ 2019-01-22 15:12 大自然的流风 阅读(2820) 评论(0) 推荐(0) 编辑
摘要:16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库,API简洁明了,上手快。从Vue推出以来,得到众多Web开发者的认可。 在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中,通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库。 PS:国内的UI组件大部分都只有一部分的,常用的头部导航,底部导航,listview,grid表格很多都是没有的。 阅读全文
posted @ 2019-01-21 09:41 大自然的流风 阅读(201102) 评论(4) 推荐(9) 编辑
摘要:vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现。 目前已实际应用于滴滴四大金融业务板块的10余款产品中。 丰富的组件,40+的实用组件,能够满足移动端开发的基本需求,尤其是对金融场景的需求进行了特别支持 统一的视觉规范 由滴滴金融设计师设计并维护,保证了应用的项目内部、项目之间都能保持高度的视觉一致性 阅读全文
posted @ 2019-01-19 17:11 大自然的流风 阅读(4092) 评论(0) 推荐(0) 编辑
摘要:vue用npm安装删除模块element-ui mint-ui 在vue项目中先引入了element-ui,后来发现移动版的需要用mint-ui,所以需要先卸载了再安装。 卸载element-ui: npm uninstall element-ui 然后再安装mint-ui: npm i mint-ui -S 阅读全文
posted @ 2019-01-18 18:42 大自然的流风 阅读(19414) 评论(3) 推荐(0) 编辑
摘要:vue运行时 eslint 报“import/first” WARN deprecated browserslist 问题解决 这个信息的意思是导入文件顺序不对,绝对导入应该放在相对导入前面。将绝对导入代码放到相对导入前面就行了。 原因是eslint是严格语法检查的,如果出现连续两个空行也会报错编译不过。 在搭建vue框架,新建一个webpack打包项目时,会出现 npm WARN deprecated browserslist 阅读全文
posted @ 2019-01-18 15:56 大自然的流风 阅读(3330) 评论(0) 推荐(0) 编辑
摘要:vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 config目录下缺少了index.js文件导致的 阅读全文
posted @ 2019-01-17 15:08 大自然的流风 阅读(25577) 评论(0) 推荐(2) 编辑