![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
清虚桂意
这个作者很懒,什么都没留下…
展开
-
eslint禁止检查注解
/* eslint-disable space-before-function-paren *//* eslint-disable space-before-function-paren */// eslint-disable-next-line vue/valid-template-root原创 2020-12-15 14:01:14 · 3468 阅读 · 0 评论 -
Vue基于Element-ui实现表格弹窗组件
效果图使用方式acTable1 () { this.$modalTable({ title: "表格一", tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },原创 2021-11-04 10:58:56 · 5100 阅读 · 2 评论 -
Vue自定义实现Element-ui中Message组件
原文创建message.vue文件首先创建message.vue来规定message组件显示的内容<template> <transition name="message-fade"> <div v-if="visible" :class="wrapClasses"> <img class="message_img" :src="typeImg" /> <span>{原创 2021-11-03 16:16:12 · 1292 阅读 · 0 评论 -
vue中vuex的使用方法(详解)
文件概要项目地址index.js文件import Vue from 'vue'import Vuex from 'vuex'import moduleA from './modules/moduleA'import moduleB from './modules/moduleB'Vue.use(Vuex)export default new Vuex.Store({ modules: { moduleA, moduleB }, state: { "indexName原创 2021-10-12 11:21:57 · 2480 阅读 · 0 评论 -
vue项目移动端适配解决方法(最新)
参考文档vant组件库移动适配方案有待验证,看起来比较靠谱vue项目移动端适配解决方法使用 rem 单位进行适配,推荐使用以下两个工具:lib-flexiblepostcss-pxtorem注意:因为lib-flexible主要用于手机自适应,当屏幕尺寸大于540px时,它设置html标签的font-size固定为54px,并不能根据屏幕尺寸调整html标签的font-size的大小,所以如果还想适配电脑端可以修改源码vue项目移动端、pc端适配方案(px转rem)1,安装 lib-fle原创 2021-09-29 09:35:26 · 2392 阅读 · 0 评论 -
vant 组件库按需引用
文档官网安装vantnpm i vant -S自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。1、安装 babel-plugin-importnpm i babel-plugin-import -D2、将 babel.config.js文件修改为module.exports = { presets: [ '@vue/cli-plugin-babel/preset'原创 2021-09-28 17:40:39 · 543 阅读 · 0 评论 -
ant design of vue 组件库按需引用
安装ant design of vuenpm i --save ant-design-vue方式一: 自动按需引入组件 (推荐)babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。1、安装babel-plugin-import插件npm i babel-plugin-import -D2、修改babel.config.js里代码,增加如下代码:module.exports = { presets: ["@v原创 2020-12-25 11:09:28 · 773 阅读 · 0 评论 -
element UI 组件库按需引用
文档官网安装ant design of vuenpm i element-ui -S自动按需引入组件 (推荐)借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。1、安装 babel-plugin-componentnpm install babel-plugin-component -D2、将 babel.config.js文件修改为module.exports = { presets: [ '@vue/cli-plug原创 2021-09-28 16:54:29 · 146 阅读 · 0 评论 -
vue中watch监听详解
【代码】vue中watch监听详解。原创 2021-09-01 09:31:16 · 962 阅读 · 0 评论 -
vue-cli3根据不同环境配置打包命令
在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为development;npm run build 时会把process.env.NODE_ENV设置为production;此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。一、创建环境配置文件1、.env.development文件(开发环境)NODE_ENV=developmentVUE_APP_ENV=development原创 2021-05-10 16:23:45 · 582 阅读 · 0 评论 -
vue组件封装之图片点击放大预览(BigImg)
组件/* eslint-disable space-before-function-paren */ /* eslint-disable space-before-function-paren */ //eslint-disable-next-line vue/valid-template-root<template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view"原创 2021-01-06 14:13:20 · 1228 阅读 · 0 评论 -
vue引入外部js文件(第三方js工具或者jq库)
方法一:静态资源导入(或者cdn资源加载)在public文件夹下的index.html文件使用script标签对插件进行引用。可以是项目中的静态资源,也可以是远程资源。例如://本地静态资源,直接放在public文件夹下<script type="text/javascript" src="./wangEditor.min.js"></script>//cdn资源加载<script type="text/javascript" src="https://unpk原创 2020-12-07 17:18:33 · 11631 阅读 · 0 评论 -
vue打印功能详解
vue中打印功能安装Print包npm install vue-print-nb --savemain.js全局注册import Print from 'vue-print-nb'Vue.use(Print);使用指定需要打印的div容器,本次叫printTest。可直接写使用组件库,没必要非得写行内样式。 <div id="printTest" > <p>锄禾日当午</p> <p>汗滴禾下土原创 2020-08-31 09:26:30 · 2218 阅读 · 0 评论 -
vue导出pdf文件(汇总)
方法一:vue-print-nb插件官网地址npm安装npm install vue-print-nb --savemain.js全局注册import Print from 'vue-print-nb'Vue.use(Print);组件使用<template> <div class="home"> <button v-print="printObj">导出pdf</button> <div id="printMe原创 2020-07-23 20:48:27 · 7731 阅读 · 2 评论 -
vue导出Word文件(模板导出)
一、安装js依赖1、docxtemplater官方地址cnpm install docxtemplater pizzip -S2、jszip-utils官方地址cnpm install jszip-utils -S3、jszip官方地址cnpm install jszip -S4、FileSaver官方地址cnpm install file-saver --save二、创建Word模板首先,根据格式样式要求,使用word制作出模板,数据使用{变量}代替。条件判断变量循原创 2020-07-23 09:15:44 · 6186 阅读 · 5 评论 -
vue使用md5加密
当前端给后端传输用户密码等敏感信息时,前端需要使用使用md5加密,防止信息被窃取。后端再将已经加密过的信息再进一步加密存于数据库中。npm安装npm install --save js-md5全局注册使用1、在main.js中全局注册import md5 from 'js-md5';Vue.prototype.$md5 = md5;2、组件使用console.log( this.$md5('123456') ) //e10adc3949ba59abbe56e057f20f883e组原创 2020-06-23 16:09:55 · 574 阅读 · 0 评论 -
vue调试工具vue-devtools安装
github 克隆vue-devtools官方项目地址git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git此处安装v5.1.1分支,因为如果直接git clone下载的是最新的develop分支,而develop是测试分支,不是正式分支。当然也可以直接切换主分支后再git clone。具体原因打开vue-devtools,安装依赖包cd vue-devtoolscnpm install修改manifest.json文原创 2020-06-23 10:27:29 · 1470 阅读 · 0 评论 -
vue中window.onresize的使用
重点:window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的clientWidth获取,然后通过watch监听clientWidth的值,即可触发组件事件App.vue代码<script>export default { name: 'app',原创 2020-05-25 19:57:41 · 3136 阅读 · 3 评论 -
vuex模块化使用详解
vuex模块化原创 2020-05-21 14:26:41 · 1622 阅读 · 0 评论 -
vue导出Word文件(数据流方式)
安装依赖:jquery 和file-savernpm install jquery file-saver --savejquery.wordexport.js// 导入js文件import $ from 'jquery'import saveAs from 'file-saver'if (typeof $ !== "undefined" && typeof saveAs !== "undefined") { (function ($) { $.fn原创 2020-05-18 10:26:02 · 7089 阅读 · 0 评论 -
vue路由传参三种方式
路由传参原创 2020-04-21 20:58:20 · 479 阅读 · 0 评论 -
前端通过src路径下载图片
前端通过src路径下载图片方案js方式下载vue方式下载vue项目将图片转base64码后再转成文件类型最后上传腾讯云(一下代码可以忽视,我自己项目的需求)方案创建一个img元素以及一个canvas元素,然后将图片绘制到canvas,再通过canvas的toDataUrl() API可以将图片转base64码,然后模拟点击事件即可下载图片。注意:在本地或者网站下载外链url图片时涉及到跨域,...原创 2020-05-18 13:49:48 · 3459 阅读 · 0 评论 -
vue中使用wangeditor富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器先敬上官网wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的功能不是很复杂,那么选它没错了,刚好能满足你!第一步:先保证你的电脑中安装有node,当然使用cdn也可以,下载到本地也行,我这里用的vue-cli,顺便下载到项目依赖中了本地下载:...原创 2021-01-29 16:54:36 · 2531 阅读 · 0 评论 -
vue导出Excel表格(简单)
一、安装依赖npm install -S file-saver xlsxnpm install -D script-loader二、下载文件在 /src 目录下新建 vendor文件夹,用于存放 Blob.js 和 Export2Excel.js 文件。百度网盘下载地址链接: https://pan.baidu.com/s/1efys5Awc5BxMdK71Jy1vKw 提取码: k...原创 2020-05-15 16:33:41 · 756 阅读 · 0 评论 -
vue项目移动端、pc端适配方案(px转rem)
vue项目移动端、pc端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度,自动设置html的font-sizepx2rem-loader 自动将px单位转换成rem一、第一步先安装 flexible和 px2rem-loader(命令行安装)npm i lib-flexible -Snpm i px2rem-loader -D简要介绍这两个包...原创 2020-02-06 13:18:30 · 19797 阅读 · 0 评论 -
使用vue-cli3创建vue项目
vue-cli3快速创建项目vue-cli3快速创建项目全局安装vue命令创建项目配置选择路由模式css的预处理选择ESLint + Prettier语法检查方式选择单元测试配置文件保存配置vue-cli3快速创建项目全局安装vue命令npm install -g @vue/cli安装完成后查看版本vue -V创建项目vue create my-project配置选择Ple...原创 2019-10-16 14:02:42 · 575 阅读 · 0 评论 -
vue项目集成sass/scss
vue-cli3提供了两种方式集成sass/scss创建项目时选择预处理器sass手动安装sass-loader安装sass方法一:创建vue项目时选择预处理器sass使用vue-cli3创建vue项目Vue CLI v4.5.15? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features原创 2019-08-17 16:43:33 · 13284 阅读 · 0 评论 -
基于vue cli3的移动端适配解决方法(px转rem)
基于vue cli3的r移动端适配问题基于vue-cli3的vue项目移动端样式适配,lib-flexible和postcss-px2rem1,第一步先安装 flexible和 postcss-px2rem(命令行安装)npm install lib-flexible --savenpm install postcss-px2rem --save简要介绍这两个包的用途:flexib...原创 2019-08-23 14:26:21 · 3992 阅读 · 1 评论