![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
qq_1872583947
有志者事竟成
展开
-
vue-i18n使用时出现警告——Value of key ‘**‘ is not a string or function !
vue-i18n使用时出现警告:在配置vue-i18n时,设置silentTranslationWarn: true, 去除国际化警告const i18n = new VueI18n({ // 设置本地语言 // 值: en | zh locale: getLanguage(), messages, silentTranslationWarn: true, // 去除国际化警告});...原创 2021-07-13 14:50:52 · 6765 阅读 · 4 评论 -
element 封装选择下拉树 select-tree
业务需求中要求使用选择下拉树,也就是select和tree的组合新建一个公共组件在components下新建SelectTree文件夹->新建index.vue<template> <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle" :placeholder="placeholder" ref="select" > &l转载 2021-05-24 20:28:44 · 1553 阅读 · 0 评论 -
vuex namespaced的作用以及使用方式
namespaced属性用于解决不同模块的命名冲突问题在业务模块中,导出时使用namespaced: trueexport default { namespaced: true, state, mutations, actions,};用法:①在getters.js中state.user.name就是state.名称.存储字段const getters = { ... name: state => state.user.name,};export defaul原创 2021-05-24 16:04:44 · 1301 阅读 · 0 评论 -
Echarts高度自适应
在开发数据大屏的时候,有需求要求echarts图表能自适应宽度和高度原理:在监听页面大小变化的时候,先监听echarts父级元素的高度变化,计算出echarts的高度,然后再调用echarts的resize函数关键代码window.addEventListener("resize", () => { if (this.subItemsEcharts) { // 计算echarts高度 this.setEchartsHeight('sub-items', 'sub-ite原创 2021-04-30 11:03:05 · 2155 阅读 · 0 评论 -
vue-cli组件引入assets目录下的图片
方式一:绑定src<img class="bg-img" :src="zuoshangbeijing" />...data() { return { zuoshangbeijing: require("@/assets/images/dashboard/iocn_zuoshangbeijing.webp") }; },方式二:在style中引入background: url('~@/assets/images/dashboard/iocn_zuos原创 2021-04-27 11:30:33 · 1952 阅读 · 0 评论 -
element-ui的pagination分页 增加首页和末页
在使用element-ui的pagination分页时,发现没有跳转到首页和末页的icon,那么现在就自己来实现一下这个功能实现的原理是利用slot来自定义内容,就是带有首页和末页的完整分页由两个pagination组件组成<el-pagination class="ahead-page" :current-page="tablePage.currentPage" :page-sizes="pageSizeArr" :page-size="t原创 2021-04-22 11:37:13 · 3173 阅读 · 1 评论 -
vxe-table国际化
在使用vxe-table时需要用到国际化vxe-table组件国际化自定义部分那么怎么配置呢?1、安装vue-i18nnpm i -S vue-i18n2、新建lang文件夹目录结构index.jsi18n基本配置import Vue from 'vue'import VueI18n from 'vue-i18n'// 引入vxe-table的组件国际化import zhCN from 'vxe-table/lib/locale/lang/zh-CN.js'impo原创 2021-04-22 10:53:06 · 1381 阅读 · 1 评论 -
Vue中watch对象内属性的方法
vue提供了watch方法,用于监听实例内data数据的变化。通常写法是:new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } }转载 2021-04-21 14:11:14 · 884 阅读 · 0 评论 -
vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。
运行vue -V时,报错:vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。解决办法如下:以管理人员身份打开 PowerShell执行:get-ExecutionPolicy,如果回复Restricted,表示状态是禁止的执行:set-ExecutionPolicy RemoteSigned选择Y...原创 2021-04-20 19:39:45 · 597 阅读 · 0 评论 -
vue-cli 编译时警告entrypoint size limit
npm run dev后产生如下警告解决办法:在vue.config.js中配置module.exports = { //webpack配置 configureWebpack: { //关闭 webpack 的性能提示 performance: { hints:false } // 或者控制体积大小及提示文件类型 //警告 webpack 的性能提示 performance: { hints:'war原创 2021-04-20 14:30:06 · 998 阅读 · 0 评论 -
devServer.proxy配置——vue.config.js
在vue-cli3.0或者vue-cli4.0中配置跨域代理1、新建vue.config.js文件module.exports = {... // 其他配置devServer: { proxy: { '/api': { target: 'http://192.125.155.51:9900',// 代理地址 changeOrigin: true,// 如果接口跨域,需要进行这个参数配置 //ws: true, // pro原创 2021-04-20 09:44:36 · 451 阅读 · 0 评论 -
Vue的实例属性和方法
vue除了常规用法外,还有一些实例属性和方法,在此总结记录下Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的数据属性区分。一、实例属性1、vm.$data:获取data里的数据,相当于用this获取2、vm.$options:用来获取定义在data外的数据和方法的复制代码export default { name: "Test", data() { return { }; }, //在data外面定义的属性和转载 2021-02-05 17:51:25 · 841 阅读 · 0 评论 -
vue2.0的contextmenu右键菜单
1.事情对象<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.onloa转载 2021-01-26 15:32:46 · 513 阅读 · 0 评论 -
Vue按键修饰符,鼠标按钮修饰符
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键。按键码keyCode 实际键值48到57 0到965到90 a到z(A到Z)112到135 F1到F248 BackSpace(退格)9 Tab13 Enter(回车)20 Caps_Lock(大写锁定)32 Space(空格键)37转载 2021-01-26 15:27:24 · 567 阅读 · 0 评论 -
vue screenfull无效的原因
版本升级的原因,将screenfull.enabled改为screenfull.isEnabled原创 2020-11-29 19:16:18 · 2284 阅读 · 1 评论 -
vue中echarts宽度自适应
把echarts的resize在created中配置一下就好created() { window.addEventListener('resize', () => { if (this.myChart) { this.myChart.resize() } }) },原创 2020-11-26 11:03:55 · 259 阅读 · 0 评论 -
vue-devtools安装-谷歌浏览器
1、下载或克隆版本下载地址:https://github.com/vuejs/vue-devtools/或者克隆git clone https://github.com/vuejs/vue-devtools.git2、安装依赖cnpm install3、修改manifest.json文件将persistent的false值改为true,修改后的内容:"background": { "scripts": [ "build/background.js" ],原创 2020-11-26 11:10:37 · 132 阅读 · 0 评论 -
vue项目 页面进度条实现 Nprogress
安装:npm i Nprogress -S在main.js中引入:import NProgress from 'nprogress'import 'nprogress/nprogress.css'在路由导航守卫中使用:import Nprogress from "nprogress";import "nprogress/nprogress.css";Nprogress.configure({ showSpinner: false }); // showSpinner:进度环显示隐藏r原创 2020-11-16 15:34:28 · 117 阅读 · 0 评论 -
vue computed 和 watch 的区别和运用的场景?
computed 和 watch 的区别和运用的场景?computed:是计算属性,依赖其它属性值,类似于过滤器,对绑定到view的数据进行处理,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;watch 更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;computed特性1.是计算值,2.应用:就是简化tempalte里面{{}}计算和处理props转载 2020-11-16 11:47:11 · 148 阅读 · 0 评论 -
vue-cli打包时去掉console
安装插件npm install babel-plugin-transform-remove-console使用(修改 babel.config.js)// 生产环境下清除console打印const plugins = []if (process.env.NODE_ENV === 'production') { plugins.push('transform-remove-console')}module.exports = { presets: [ '@vue/cli-plu转载 2020-11-13 17:47:02 · 603 阅读 · 2 评论 -
Uncaught (in promise) Error: Redirected when going from “/login?redirect=%2Fdashboard“ to “/dashboar
vue项目报错:Uncaught (in promise) Error: Redirected when going from “/login?redirect=%2Fdashboard” to “/dashboard” via a navigation guard.解决办法在router文件下的index.js中添加下面的代码const originalPush = Router.prototype.push;Router.prototype.push = function push(locat原创 2020-11-13 16:55:31 · 6648 阅读 · 6 评论 -
error ‘***‘ is defined but never used no-unused-vars
**错误原因**项目安装了eslint规范,ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误解决方案一、在package.json文件内加入如下代码:然后保存重启项目。二 、找到.eslintrc.js文件,在rules里面添加上如下代码,就可以去掉提示了。...原创 2020-11-05 14:30:00 · 185 阅读 · 0 评论 -
Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
vue-cli开发是报Cannot assign to read only property ‘exports’ of object '#'的错误可能原因是:在某个js文件中混用了import 和module.exportsimport {} from ‘’;module.exports={};正确的写法是:import和export一对,require和module.exports一对...原创 2020-10-29 15:37:50 · 764 阅读 · 0 评论 -
vue中有关.env,.env.development,.env.production的相关介绍
1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件.env 全局默认配置文件,不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件2,关于内容注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX3,关于文件的加载:根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”比如执行npm run serve命令,转载 2020-10-29 14:48:52 · 635 阅读 · 0 评论