vue 项目便于 高效开发的依赖

• vue项目保存代码后前端页面自动刷新
• vue 生产环境中项目打包bulid 移除 console.log
• vue 项目 添加 页面上方 NProgress进度条
• 安装
• 基本用法

vue项目保存代码后前端页面自动刷新

npm install webpack-dev-server

vue 生产环境中项目打包bulid 移除 console.log

github地址
安装babel-plugin-transform-remove-console 项目打包去除console

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

在vue项目中babel.config.js中：

module.exports = {plugins: ["transform-remove-console",],
}

如果只想在生产环境来去除console的话
建立一个生产环境配置数组来判断一下当前环境是否为生产环境，

是生产环境的话就放入transform-remove-console

在 serve 执行中 会输出 $ vue-cli-service serve --mode development--dashboard
在 bulid 执行中 会输出 $ vue-cli-service build --mode production --target app --no-module --dashboard
区分 development 和 production

// 创建生产环境中的plugins数组  发布阶段需要用到的 Babel插件
const prodPlugins = [];
// 判断当前环境是否为生产环境 如果是生产环境把transform-remove-console放入数组中
if (process.env.NODE_ENC === "production") {prodPlugins.push("transform-remove-console");
}module.exports = {plugins: [// 生产环境下plugins 扩展运算符把数组展开...prodPlugins,],
};

vue 项目 添加 页面上方 NProgress进度条

NProgress官网和Github地址

路由 跳转时 页面上方 和 右上角 会有一个加载进度

安装

使用npm安装

npm install --save nprogress

基本用法

main.js 引入

import NProgress from “nprogress”;
import “nprogress/nprogress.css”;

开关和关闭

	start()开启NProgress进度条done()关闭NProgress进度条

NProgress.start();
NProgress.done();

请求拦截里进行应用

// 配置请求的根路径
axios.defaults.baseURL = 'http://……'
// 请求拦截
axios.interceptors.request.use(config => {// 在 request 拦截器中，展示进度条 NProgress.start()NProgress.start()// console.log(config);config.headers.Authorization = window.sessionStorage.getItem('token')// 最后必须  return configreturn config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {NProgress.done()return config
})