vue
maggie_live
这个作者很懒,什么都没留下…
展开
-
使用vue-cli3开发项目,module.export为undefined,导致第三方库fecha无法使用
1.引用`import fecha from “…/…/utils/date.js”,一直报错。2.调试date.js发现module.export为undefined,不走第一条件句。 if (typeof module !== 'undefined' && module.exports) { module.exports = fecha; } else if (...原创 2019-10-24 10:37:46 · 2734 阅读 · 0 评论 -
动手搭建一个类vue文档风格博客VuePress
[[toc]]前言本文基于VuePress1.x版本。VuePress由两部分组成:一个极简静态网站生成器,界面十分简洁,容易上手;为书写技术文档而优化的默认主题,为了支持Vue及其子项目的文档需求。它是如何工作的一个VuePress网站是一个由Vue、Vue Router和Webpack驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染...原创 2019-09-05 11:51:50 · 628 阅读 · 0 评论 -
vue 12种通信方式
Vue组件间的通信方式1. props传递数据在父组件中使用儿子组件<template> <div> 父组件:{{mny}} <Son1 :mny="mny"></Son1> </div></template><script>import Son1 from "./Son1";expor...原创 2019-08-14 11:52:45 · 376 阅读 · 0 评论 -
vue自定义指令
自定义指定的注册方法分为全局注册和局部注册,比如注册一个v-focus的指令,用于input、textare元素初始化时自动获取焦点。// 全局注册Vue.component('focus', { ...});// 局部注册var app = new Vue({ el: '#app', directives: { focus: { ... } ...原创 2019-07-17 15:22:18 · 118 阅读 · 0 评论 -
如何通过动态更改vue中的样式?
通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖,它主要用法是动态更新HTML元素上的属性。绑定class的几种方式1.对象语法给v-bind:class设置一个对象,可以动态地切换class。例如:<div id="app"> <div :class="{'active': isActive}">&...原创 2019-07-17 10:57:38 · 2227 阅读 · 0 评论 -
vue-cli3创建项目(1)
创建项目1.打开新的终端 / 命令行窗口。2.使用命令npm i -g @vue/cli。3.运行完后输入命令vue ui,浏览器上自动打开http://localhost:8000地址。4.浏览器打开显示:5.点击创建6.手动配置项目7.选择功能,可以引入babel、TypeScript、Progressive Web App(PWA)Support、Router、Vuex等功...原创 2019-07-12 16:09:36 · 661 阅读 · 0 评论 -
webpack4 TypeError: htmlWebpackPlugin.getHooks is not a function
1.使用vue-cli3,打包产生的问题;解决方案:npm i htnl-webpack-plugin@next参考https://github.com/jantimon/html-webpack-plugin/issues/1068原创 2019-05-31 14:59:01 · 3809 阅读 · 2 评论 -
vue-cli3 适配移动端rem
使用vue-clinpm install -g @vue/cli // 使用vue-cli3版本自定义功能配置TypeScriptTypeScriptProgressive Web App (PWA) SupportRouterVuexCSS Pre-processorsLinter / FormatterUnit TestingE2E Testing...原创 2019-05-17 17:48:30 · 6187 阅读 · 0 评论 -
vue-cli3 使用svg-sprite-loader的使用
1.为什么使用svg-sprite-loader?用来根据导入的svg文件自动生成symbol标签并插入html,接下来就可以在模板忠方便地使用svg-sprite技术了通常我们项目都是使用iconfont阿里巴巴图标矢量库,缺点:操作繁琐,每次ui需要加一些新的图标的时候,都要重新下载图标库的项目,然后把整体的文件(其中包括css,svg,ttf,woff等)替换掉。如果更改名称的...原创 2019-05-13 11:00:56 · 2947 阅读 · 0 评论 -
element-ui插件datepicker日期选择器控制选择时间范围
单日期选择器1.今天以及今天之后的日期<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker><script>export ...原创 2019-05-24 17:46:25 · 7198 阅读 · 1 评论 -
vue-cli 统一封装axios,使用拦截器统一出来请求前和请求后处理
Axios是基于Promise机制实现的异步的链式请求框架。体积小,源码易懂。非常适合做基础的请求库。拦截器的作用,在请求钱对发送的数据、逻辑进行处理,或者在响应后对响应数据做处理。请求前处理配置相同的请求数据,如headers、token添加loading效果1.axios的封装1.使用vue-cli创建项目首先在vue-cli项目的src路径下新建utils和api文件夹,在u...原创 2019-05-10 09:35:13 · 4714 阅读 · 5 评论 -
vue中使用编辑器vue-quill-editor踩过的坑
结合vue+element-ui+vue-quill+editor二次封装成组件1.图片上传分析原因项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差。引入elem...原创 2019-03-20 18:04:40 · 19053 阅读 · 2 评论 -
vue-cli3报错 Jest TypeError: Path must be a string. Received undefined
通过命令安装最新的vue-clinpm install -g @vue/clioryarn global add @vue/cli通过命令vue ui 打开图形化界面的报错报错信息这是环境变量导致的,安装node的时候默认安装目录是在系统变量中,而node全局安装包的目录是在用户的path中。系统查询可执行文件的属性是先查询系统path变量,然后在查询用户path变量,所以nod...原创 2019-01-11 14:38:57 · 8999 阅读 · 0 评论 -
vue 内联样式
<div class="dialog" :style="{'padding-left':labelWidth}"></div><div class="dialog" :style="{backgroundImage:'url('+IMG_SRC+')'}"></div><div :style=&原创 2018-10-25 20:02:49 · 2492 阅读 · 0 评论 -
vue中使用element-ui监听键盘事件,input只能输入纯数字
1.element-ui的input监听事件 vue中element-ui在使用el-input的时候,由于el-input在输入框的外层添加了一层的<div class="el-input"></div>,把input隐藏在子级,所以el-input添加上了keyup无响应;<el-input v-model="id" placeholder="ID" ...原创 2018-09-30 09:29:59 · 27007 阅读 · 4 评论 -
vue element-UI table嵌套表格 无法更新视图
1.点击“编辑”,当前的div显示“删除”;2.查看row.isShow = true,但是视图没有更新;代码如下:<template> <el-table :data="tableData4" style="width: 100%" max-height="250"> <el-table-column fi...原创 2018-08-07 19:36:37 · 8512 阅读 · 0 评论