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

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 config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

VUE 轮播组件 vue-awesome-swiper

官方文档
swiper demo 使用

安装： cnpm i vue-awesome-swiper

这样直接安装 容易报错 找不到路径，找不到swiper.css ……
原因： 没有带版本，npm默认给你装的是最新的
解决方法：安装（指定版本）

  javascript npm install vue-awesome-swiper@3 --save-dev 

//局部引用
<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
};
</script>
<style scoped >
.recommendPage .swiper-container{
  position: relative;
  width: 100%;
  height: 200px;
  background: pink;
}  
.recommendPage .swiper-container .swiper-slide{
  width: 100%;
  line-height: 200px;
  background: yellowgreen;
  color: #000;
  font-size: 16px;
  text-align: center;
}
</style>

三、例子
我写的是局部的,只需要在 在ha.vue页面 写好如下结构

1
2
3
4
5
6
7
8
9
10
<template>
   <div class=''>
	   <swiper>
	      <swiper-slide>
	       </swiper-slide>
	    </swiper>
  </div>
</template>
// 在script引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {};
  },
};
</script>
<style scoped >
</style>