实际项目中的编码技巧总结（Vue篇）

本文目录 1.node-sass安装失败 2.动态引入和绑定背景图片 3.element批量删除功能实现 4.element提供的上传组件解决无权限的问题 5.写在data中的数据无法讲改变动态渲染到页面上 6.vue中定义全局变量的方法 7.beforeRouteEnter的书写位置 8.解决vue路由警告问题 9.让VScode保存时自动匹配ESlint规则 1.node-sass安装失败 使用别人的一个模板项目的时候，在npm install的时候报错提示node-sass啊没装失败，出现原因是npm 安装 node-sass 依赖时，会从 github.com 上下载 .node 文件。由于国内网络环境的问题，这个下载时间可能会很长，甚至导致超时失败。 解决方法是首先把node_modules文件夹删除，然后运行指令npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/先单独安装node-sass，再启用npm install安装其他依赖。 2.动态引入和绑定背景图片 vue中动态改变backgroundimage的写法 :style="{backgroundImage:'url(\''+themeBg+'\')'}" 动态的在data中引入路径的写法 themeBg: require("../../assets/images/e_center.png"), 3.element批量删除功能实现 在el-table标签中绑定事件 @selection-change="batchRemove" batchRemove(val){ console.log(val) }, 打印出来的是选中的列的数组集合 4.element提供的上传组件解决无权限的问题 解决思路：手动设置请求头 1.定义变量，获取token const token = localStorage.getItem("access-token"); 2.在data中设置要改变的请求头的信息MyHeader MyHeader: { Authorization: token } 3.组件中动态传入headers，即可解决401问题。 点击上传 5.写在data中的数据无法讲改变动态渲染到页面上 项目场景：数据确定会正常改变，但是变化不会自动触发页面上的显示，但是功能是正常的。 原因：就算数据是在data存在了，但是赋值的时候把某个属性给丢失了，vue也就失去了对其的检测能力。也就是说，在data中存在的数据以及对象属性需要一直存在，否则vue就会失去对其变化的监控。 6.vue中定义全局变量的方法 在mainjs中进行定义并将其挂载到vue实例中 var baseUrl = "http://110.50.111:8090"; Vue.prototype.$baseUrl = baseUrl 组件内进行使用 methods: { asd() { console.log(this.$baseUrl); } }, mounted() { this.asd() } 全局引用js直接在main.js中引用，就可以import remtools from './assets/js/setrem' 但是这个js只有在项目第一次加载的时候执行一次，切换路由的时候并不触发这个js 7.beforeRouteEnter的书写位置 beforeRouteEnter必须放在页面文件中，组件是监听不到路由的 beforeRouteEnter (to, from, next) { if (from.path === '/detail') { next((vm) => { // 更新列表数据方法 vm.updateData() }) } next() }, 8.解决vue路由警告问题 下面这三行是解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的方法，把代码放置到router文件夹的index.js文件中即可 const routerPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return routerPush.call(this, location).catch(error=> error) } 9.让VScode保存时自动匹配ESlint规则 首先需要找到VScode配置文件setting.json ctrl+shift+p 2.输入setting 3.选择 首选项：打开设置（json）即可. 这个文件存放的是一个JSON格式的数据，在{}中的最后增加如下代码 "editor.codeActionsOnSave": { ​ "source.fixAll.eslint": true } 这样的话，在修改代码只需要ctrl+s保存代码，代码规则就会自动按照ESlint的配置规则进行调整。

本文章由javascript技术分享原创和收集