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

2020-04-20 本文已影响0人前端辉羽

本文目录

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问题。

<el-upload class="upload-area" action="http://192.168.0.88:18002/api-operate/clouddocms/files/upload" :headers="MyHeader">
  <el-button icon="el-icon-upload" size="primary" type="primary">点击上传
  </el-button>
</el-upload>

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的配置规则进行调整。