vue项目开发小技巧

 解决$router.push跳转到一个相同的路由报错问题

修改push方法，在router/index.js导入VueRouter的时候，进行全局的处理，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)

生产环境去掉console打印

babel-plugin-transform-remove-console插件的使用

安装指令

npm install babel-plugin-transform-remove-console --save-dev

安装完成后在项目的babel.config.js文件中添加transform-remove-console字符串，由于babel.config.js是全局文件，说以我们需要判断是否是环境，代码如下：

let plugins = [];
// if判断是否为开发环境,非开发环境下控制台去掉console打印,也可去掉if判断，整个项目不会出现console.log(不建议)
if (process.env.NODE_ENV != "dev") {
  plugins.push("transform-remove-console");
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: plugins
};

.env全局默认配置文件的使用

 文件内部

在package.json中配置

 

 运行下面的指令就可以在开发的时候模拟打包部署到线上的情况

npm run serve.prod

js中通过process.env.NODE_ENV获取当前的运行环境

vue使用 ::after ::before 伪元素 动态改变content内容（在css中使用变量）

<!--  div标签中添加 :contentText，里边的内容指向 content -->
<div :contentText="content" class="test"></div>
 
 
export default {
    data() {
        return {
            // 可以修改的内容
            content:'动态的内容'
        }
    }
}
 
<style>
 
// 使用attr 绑定对应的contentText ，获取其中的值
.test::before {
    content: attr(contentText);
}
</style>

/deep/和>>>和::v-deep的使用

在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

注意，/deep/在vue 3.0会报错
如果/deep/报错，可采用::v-deep，效果基本一样，有人说::v-deep能加快编译速度，但是我在网上没有找到相关资料，无从验证。

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

深度作用选择器 >>>
（注意，只作用于css）
但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。
想修改element-ui某个深层元素也有其他方式解决；
解决方法之一：除非你将 scoped 移除，或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）

axios.CancelToken结合拦截器终止请求

import Vue from 'vue';
import axios from 'axios';
import router from '../router'

//新创建一个vue实例
let vue = new Vue();

axios.defaults.timeout = 60000; //60000的超时验证
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

// 添加请求拦截器
axios.interceptors.request.use(function (config) {

  // 在发送请求之前做些什么
  let token = localStorage.getItem('token')
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
    config.headers.token = token; //这个字符串里的token可以不写
  }
  if(config.url=="/admin/user/login"){//请求过期，终止全部请求，只有到登录接口才可以重新请求
    source = CancelToken.source();
  }

  config.cancelToken = source.token; // 全局添加cancelToken

  return config
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // console.log('response==',response)
  if (response.status === 200) {
    switch (response.data.code) {
      case 200:
        return response.data;
      case 400:
        // 登录信息已经过期
        source.cancel('token过期,终止后续请求'); // 取消其他正在进行的请求
        vue.$alert('您的登录信息已经过期，请重新登录', '系统提示', {
          confirmButtonText: '确定',
          callback: action => {
            router.push({
              name: "Login"
            }); //确认过期，回到登录页
          }
        })
        break;
      default:
        vue.$notify.error({
          title: "错误",
          message: response.data.msg
        });
    }

  } else {
        vue.$notify.error({
          title: "错误",
          message: response.data.msg
        });
  }
});

label标题换行

<FormItem :label="'密 \n 码：'" prop="oldPwd">
          <Input placeholder="请输入原密码" type="password" v-model="formValidate.oldPwd" />
        </FormItem>

/deep/.ivu-form-item-label {
    white-space:pre-line
}

在项目中经常遇到label过长，导致布局不美观，通过 :label="'密 \n 码：'"配合white-space:pre-line，可以让文本换行，优化页面布局