qq_40291247的博客

在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）// 如：env.development // 开发env.beta // 测试env.production // 正式编辑新建的文件注意：全局变量仅除NODE_ENV和BASE_URL这两个保留变量外，其余自定义变量都需使用VUE_APP开头。.env文件里不允许存在注释 （这里只为了大家更好的阅读理解）// env.development NODE_ENV = 'development'VUE_.

仅替换主题色单纯的只是想换个主题颜色请参考ElementUI官网的自定义主题。链接: https://element.eleme.cn/#/zh-CN/component/custom-theme.实现自定义主题封装动态换肤色ThemePicker.vue组件。<template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v

state：vuex的基本数据，用来存储变量geeter：从基本数据(state)派生的数据，相当于state的计算属性mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。action：和mutation的功能大致相同，不同之处在于 Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步或多个同步操作modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非.

wb-upload参数：参数说明类型可选默认必填action自动上传必选参数，上传的地址String--否autoUpload是否自动上传booleantrue/falsefalse否data上传时附带的额外参数object--否listType上传样式类型Stringhead，text/picture/picture-card-是showFileList是否显示上传列表（上传头像，必须false）boolea

封装el-Upload目前在编项目中，页面有用到el-Upload，所以对el-Upload做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-Upload是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：我一直在考虑，分开封装还是一起封装，其实各有利弊吧，主要还是看实际项目。最终我选择了一起封装。上传的样式类型如（如：头像，照片墙 ，缩略图，列表缩略图，文件列表

wb-menu参数：参数说明类型可选默认必填active默认选中哪个（以index唯一名称为准）String--否openeds默认展开第几组Array[‘1’]--否isrouter是否使用 vue-router 的模式，以 index 作为 path 进行路由跳转Booleantrue/false-否trees菜单数据（参数看下面↓↓）Array--是backgroundColor菜单的背景色（仅支持 hex

封装el-Menu目前在编写管理端，页面有用到el-Menu，所以对el-Menu做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-Menu是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：样式，颜色，自定义，最重要的是；递归渲染（不用关心它的子集）等等.递归渲染实现。<template> <div> <div v

wb-page参数：参数说明类型可选默认必填background是否为分页按钮添加背景色booleantrue/falsefalse否hideOnSinglePage只有一页时是否隐藏booleantrue/falsefalse否total总条数number--是pageSize每页显示多少条number-10否pageSizes每页显示个数选择器的选项设置number[]-[10, 20, 30, 40,

封装el-Pagination目前在编写项目中，每个页面都有el-Pagination，所以对el-Pagination做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-taPaginationble是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：其实很简单，几乎不用考虑其他问题，照猫画虎就可以了。直接搬过来用。（除非有特殊需求，在进行改造）组件使用方法：(

封装el-table目前在编写项目中，每个页面都有el-table，所以对el-table做了二次封装, 组件在个人开发使用不错，但不确定能满足各种业务需求，所以这里主要和大家分享一下设计思路。用一次爽一次，越用越爽。分析问题：el-table是element-ui库的表单组件，如果我们要将其进行二次封装，那么需要考虑几个问题：动态表头嵌套表头表格显示内容类型自定义（文字，图片，超链接等）表格和分页联动表格事件的处理等等.动态表头实现。正常情况下，我们使用table： &lt

wb-table参数：参数说明类型可选默认必填data表格渲染数据Array--是max-height表格的最大高度String--否stripe是否为斑马纹booleantrue/falsetrue否isRadio是否显示单选框booleantrue/falsefalse否ischeckBox是否启用浮动模式（浮动模式下带有重置功能）booleantrue/falsefalse否isIndex是

elementUI表单的全局验证：使用ElementUi搭建框架的时候，大家应该都有考虑过怎么做全局验证，毕竟复制粘贴什么的是最烦了，这里分享下个人的解决方法。分析问题：一般验证规则，主要是是否必填，不为空，以及参数类型的验证。 基于这个条件，我们开始找找思路, 单个字段的验证是这样的：name: { required: 是否必填, validator: 自定义规则, message: 失败提示消息(非自定义时触发), trigger: 触发方式 pat

添加自定义事件案例 <el-input v-if="item.type === 'input' || item.type === 'password'" v-model="data[item.value]" :type="item.type" :placeholder="getPlaceholder(item)" @blur="blurEvent(item.event)" <!--这个是.

wb-form参数：参数说明类型可选默认必填data绑定的表单数据objest--是rules校验对象（全局校验定义为空对象）objest--否field-list渲染表单数据Array--是list-type-info可放置options(如：celect /rodio/picker等)objest--否type是否启用浮动模式booleantrue/falsefalse否className给f

组件模板<template> <transition name="fade" @after-leave="afterLeaveFn" @after-enter="afterEnterFn"> <div class="message" :style="style" v-show="isShow" @mouseenter="emptyTimeFn" @mouseleave="clearTime.

const routes = [ { path: '/', name: 'Home', component: Home, redirect:'/Consume', // 默认显示的子路由 children: [ { path: 'Consume',//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。...

::v-deep尝试一下::v-deep .el-button{ background: rebeccapurple; }

安装三个依赖包npm install -S file-savernpm install -S xlsxnpm install -D script-loader在项目中创建一个文件夹（一般是在src目录下创建）把Blob.js和 Export2Excel.js这两个文件夹放到新建的文件夹内Blob.js ↓↓↓/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey.

安装三个依赖包： npm install -S file-saver npm install -S xlsx npm install -D script-loader创建文件夹- 在src目录下创建一个exportExcel的文件夹- 把Blob.js和 Export2Excel.js，放在exportExcel文件夹里Blob.js/* eslint-disabl...

期望的结果是支持 import、require 或者直接使用 script 标签的形式引入开发组件我们使用 webpack-simple 模板: vue init webpack-simple <project-name>接下来，老规矩，打开终端，目录切换到当前开发目录，安装依赖，启动项目：npm installnpm run dev既然是封装组件，那我们在...

悬停上去一直闪烁解决方案：1，循环的，要把事件放在最外层（包裹层）2，在最外层元素添加样式：pointer-events: none；完美解决！

通常一些小型的项目，没必要大费周章的搭建脚手架，直接以CDN的方式引入vue.js 即可享受到vue的便利性那么我们想用到vue中的一些功能，比如axios 呢。注意：Axios与Qs必须配合使用，否则后台会拿不到数据CDN引入：Axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></scrip...

支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过font-size,color来调整样式。兼容性较差，支持 ie9+,及现代浏览器。/**通用css*/ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; ...

使用 Vue.directive(id, [definition]) 定义全局的指令来进行自定义指令思路：在用户登陆后，根据用户id读取用户的所有权限数据，放入本地的storage进行存储，之后，定义指令，如果用户含有此按钮权限，则在页面显示出来参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v-前缀，但是： 在调用的时候，必须在置顶的名称前加上 v-前缀来进行调用参...

第一步，下载Echartsnpm install echarts --save第二步，引入echartsmain.js//引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts //引入组件第三步，初始化。html<template> <div id="Sta...

html<template> <div> <table> <thead> <tr> <th>名称</th> <th>数量</th> </tr> </thead> ...

多说无益，直接上代码↓↓↓<template> <el-form ref="ruleForm" :rules="ruleForm" :model="form" label-width="100px" :inline="true"> <el-form-item label="自编码" prop="goodsCode"> <el-inpu...

localStorage除非人为手动清除，否则会一直存放在浏览器中，但是很多情况下我们可能需要localStorage有一个过期时间，比如我们将用户身份认证 token 保存在客户端，1周之内有效，超过一周则要重新登录，那么这种需求该怎么实现呢要知道，localStorage本身并没有提供过期机制，既然如此，那就只能我们自己来实现了，我们可以直接给其原型上加上这样一个方法Storage.pro...

第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示，解决办法：找到utils.js文件，加 publicPath: ‘…/…/’function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, post...

如果想在普通的HTML页面引入jQuer库的话，直接使用即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法一、安装jQuery依赖在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：npm install jquery --save# 如果你更换了淘宝镜像，可以使用cnpm来安装，速度更快cnpm install jquery...

一，在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件<input @keyup.enter="function">属性名键值.deletedelete（删除）/BackSpace（退格）.tabTab.enterEnter（回车）.escEsc（退出）.spaceSpace（空格键）.leftLeft（左箭头）.upUp（上箭头）.rightRigh.

在config/index.js中指定host: 'localhost', // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined原因：portfinder新...

一，原因是，因为打包后css和img是同级，所以要改：build→utils.js→找到如下// Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin...

为什么要使用 vue-cli3. 1. 模板更加制定化 2. 配置更加简洁使用 npm 全局安装 vue-cli//请事先装好node.jsnpm install -g @vue/cli# oryarn global add @vue/cli创建项目vue create my-project选择项目类型Vue CLI v3.11.0? Please ...

安装了sass需要的安装包！npm install node-sass --savenpm install sass-loader --savenpm install style-loader --save或者npm install node-sass sass-loader style-loader --savecli2 sass全局变量 还得需要一个包npm ...

webpack提供了删除console的插件：安装terser-webpack-pluginnpm install terser-webpack-plugin -D然后在vue.config.js文件里写插件的配置module.export = { configureWebpack: (config)=>{ if(process.env.NODE_ENV === ...

原因webpack打包后-webkit-box-orient被移除，所以导致失效。解决方案一：在原有的CSS添加以下属性 display: -webkit-box; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; /*! autoprefixer: off */ -w...