近况

之前本想做vue网课的项目的，但是心静不下来，css太差，把时间花在调整样式做页面上，感觉很难受，
所以没有继续下去了，上周整体没有学习新的知识，只是看看博客，感觉混了一周，现在是中秋节，放了三天假
在B站上看到一个新的vue网课，发现很多知识点是之前网课没有的，所以决定9月份剩余的时间用来看这个网课
讲到了很多vue3的内容，还是有必要学的，继续加油吧！

这篇博客主要是对之前vue2中一些项目配置做个总结，下面是具体内容：

Vue创建项目及目录配置

现在前端都是使用npm管理项目了，所以我们首先需要node环境，npm会随之一起安装，你可能需要配置一下
npm的镜像，配置npm镜像，百度一堆我就不在这说了，进入正题，npm创建vue项目一般使用vue脚手架

  • 安装vue脚手架：npm install @vue/cli -g
    这样没有指定脚手架版本安装，安装的是vue脚手架3，脚手架3和2在使用时命令上有些差异，现在大多用的
    vue-cli3吧，如果你用的脚手架3但是却希望输入脚手架2的命令时也能成功执行，那么你需要全局安装一个依赖
    npm install -g @vue/cli-init，安装好后，使用脚手架2的命令也能成功被执行

  • 使用脚手架创建vue项目
    vue-cli2初始化项目：vue init webpack study-vue-cli //项目名小写
    vue-cli3初始化项目：vue create study-vue-cli
    执行命令后需要的配置以及两者创建的项目差异在webpack那篇博客中已讲到，这里不再细说

  • 前端项目中目录结构的划分
    我使用vue-cli3创建vue2项目，下面是我看网课上配置的项目目录结构：

  • 将vue项目同步到github上
    因为我老是忘记git操作，索性在这里记录一下，下面是关于如何将本地项目同步到github上

    //之前写过博客关于如何在idea上使用git，有需要可以去找找
1，在github上创建好仓库
2，vue-cli3创建的项目都是自带git的，所以我们直接打开项目根目录配置远程仓库地址
	先拷贝远程仓库地址，再输入命令：git remote add origin 远程仓库地址
	注意：ssh地址比https地址好点，后续在推送时，不需要输入github账号密码。
3，git add .
	git commit -m "xxx"
	git push -u origin master	//password中输入tokenId，而不是github的密码

Vue使用vue-awesome-swiper的轮播图

swiper库是专门做轮播图的第三方库，而vue-awesome-swiper是基于swiper的Vue组件。
是swiper推荐的在vue中使用swiper的方式，下面是关于如何在vue项目中使用该库

  • 安装依赖：npm i swiper vue-awesome-swiper --save
    注意：该命令只能在vue2项目中被执行，将会安装vue-awesome-swiper@4.1.1和swiper@5.4.5
    安装vue-awesome-swiper4以上，必须安装swiper，总之按照我的版本安装就行。

  • 创建轮播图组件，然后挂载到其他组件中使用即可，下面是轮播图组件：

    <template>
  <swiper class="swiper" :options="swiperOption">
    <swiper-slide class="swiper-slide" :key="banner.acm" v-for="banner in banners">
      <a :href="banner.link">
        <img :src="banner.image">
      </a>
    </swiper-slide>

    <div class="swiper-scrollbar"></div> <!--//滚动条-->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'	//版本不同，样式路径不同，自己去node_modules中看

export default {
  name: 'MySwiper',
  title: 'swiper循环',
  props: {					//父组件传递数据给子组件
    banners: Array
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOption: {				//轮播图的配置
        // 一个屏幕展示的数量
        slidesPerView: 1,
        // 间距
        spaceBetween: 0,
        // autoplay: true,
        // 环状轮播
        loop: true,
        // 分页器配置
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        // 箭头配置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper {
  width: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  background-color:#ffffff;
}
.swiper img{
  width:100%
}
</style>

Vue使用elementUI的轮播图

elementUI中把轮播图叫做Carousel走马灯，然后我们看下配置步骤

  • 安装element-ui依赖：npm i element-ui -S

  • 在main.js中注册插件

    import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

  • 创建轮播图组件，案例这里使用了父子组件传值，使用props接收图片

    <template>		
  //设置图片自适应，动态绑定高度
  <el-carousel indicator-position="outside" :height="bannerH +'px'">
    <el-carousel-item v-for="banner in banners" :key="banner.acm">
      <img :src="banner.image">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "MySwiper2",
  props: {
    banners: Array	//接收父组件传递过来的图片数组
  },
  data(){
    return {
      bannerH:200
    }
  },
  methods:{
    setBannerH(){	
      this.bannerH = document.body.clientWidth / 1.95
    }
  },
  mounted(){
    this.setBannerH()
    window.addEventListener('resize', () => {
      this.setBannerH()
    }, false)
  }
}
</script>

<style scoped>
.el-carousel__item img{
  width: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

Vue使用echarts可视化库

echarts，一个基于 JavaScript 的开源可视化图表库，下面看看在vue中是如何使用的：

  • 安装echarts依赖：npm install echarts -S

  • 在main.js中配置全局引用

    如果你多个组件都用到了echarts，你需要配置一下全局引用，在main.js中配置
import * as echarts from 'echarts'	//echart中所有组件全部引入，你可以查下怎么引入部分组件
Vue.prototype.$echarts = echarts

  • 创建自己的echarts组件，然后挂载到其他组件中就可以使用了，下面是创建的echarts组件：

    <template>
  <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
  <div id="wanyi" :style="{width: '500px', height: '500px'}"></div>
</template>

<script>
//import * as echarts from 'echarts';	//如果你只在一个组件中使用echarts，你可以使用局部引用
export default {
  name: 'MyEcharts',
  mounted() {
    //mounted中是第三方库最早使用时机
    this.start();
  },
  methods: {
    start(){
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('wanyi');
      var myChart = this.echarts.init(chartDom);
      var option;

      //样式
      var itemStyle = {
        opacity: 0.7,
        borderWidth: 3,
        borderColor: '#235894'
      };
      
      // 指定图表的配置项和数据
      option = {
        series: [{
          name: 'pie',
          type: 'pie',
          selectedMode: 'single',
          selectedOffset: 10,
          clockwise: true,
          label: {
            fontSize: 18,
            color: '#235894',
            position: 'inside'
          },
          /*labelLine: {
            lineStyle: {
              color: '#235894',
              length: '2px'
            }
          },*/
          data: [
            {value: 1048, name: '搜索引擎'},
            {value: 735, name: '直接访问'},
            {value: 580, name: '邮件营销'},
            {value: 484, name: '联盟广告'},
            {value: 450, name: '视频广告'}
          ],
          itemStyle: itemStyle
        }]
      };
      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
</style>

  • echarts是专门做图表的库，更多配置操作请访问，echarts配置项

Vue使用vue-image-lazyload实现图片懒加载

图片懒加载指的是，之前我们请求图片都是一次性全部请求下来，响应给用户，但我们看淘宝之类的购物平台
商品图片都是只加载一部分，你不断往下划才会加载下面的部分，图片需要在屏幕上显示时，才加载这张图片
这就是图片懒加载，下面是使用该第三方库的步骤：

  • 安装依赖：npm i vue-lazyload -S //i是install简写

  • 在入口函数main.js中注册插件

    import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

/*
  // 配置项
  const loadimage = require('assets/img/common/loading.gif')
  // const errorimage = require('assets/img/common/error.gif')
  Vue.use(VueLazyload, {
    preLoad: 1.3, //预加载的宽高比
    loading: loadimage, //图片加载状态下显示的图片
    // error: errorimage, //图片加载失败时显示的图片
    attempt: 1, // 加载错误后最大尝试次数
  })
*/
...略

  • 只是单纯的注册插件：Vue.use(VueLazyload)，那么你需要在图片被加载的时候使用v-lazy代替:src，见下面代码：

    <swiper-slide class="swiper-slide" :key="banner.acm" v-for="banner in banners">
  <a :href="banner.link">
  	<img v-lazy="banner.image">		//:src="banner.image" 改成 v-lazy="banner.image"
  </a>
</swiper-slide>

Vue配置路径别名和跨域

之前的博客中讲到过配置项目的路径别名，有了路径别名，我们可以很容易的引用项目中的文件
而跨域则是解决浏览器的同源策略问题，我们只需在vue.config.js中进行如下配置：

module.exports = {
  configureWebpack: {
    resolve: {
      /*配置项目路径别名*/
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views'
      }
    }
  },
  devServer: {
    proxy: {
      '/api': { // 请求的代称，写在Axios里的BaseUrl
        target: 'http://123.207.32.32:8000', // 真实请求URl
        ws: true,
        changeOrigin: true, // 允许跨域
        pathRewrite: { //替换，通配/api的替换成对应字符
          '^/api': '' //当你的接口中没有/api字眼时，采用这种，直接替换成空即可
          // '^/api': '/api'   //当你的接口中刚好有/api 时，采用这种方式
        }
      },
      /*'/api2': {
        target: 'https://act.mogujie.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }*/
    }
  }
}

2021年10月8日更新一下内容：
配置代理分为下面两种方式：

  • 简单的配置

    module.exports = {
  devServer: {
    proxy: "http://localhost:5000"
  }
}

    优点：hexo 配置简单，请求资源时直接发给前端(8080)即可
    缺点：不能配置多个代理，不能灵活的控制请求是否走代理
    工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器(优先匹配前端资源)
    换句话说，如果代理地址是：http://localhost:8080/test.txt，这个test.txt文件存在前端项目的public目录中，
    则该请求不会被代理，后端接收不到这个请求。而是直接将该public目录中文件交给浏览器。

  • 复杂点配置

    module.exports = {
  devServer: {
    proxy: {
      '/home': {
        target: 'http://api.qingyunke.com',
        //是否支持websocket，默认为true
        ws: true, 
        // 用于控制请求头中的host值,true则表示不暴露自己的host字段，host字段与目标服务器字段一致。默认为true
        changeOrigin: true, 
        pathRewrite: {
          '^/home': ''
          // '^/home': '/home'
        }
      }
    }
  }
}

    “/home”是路径前缀，使用在请求地址的端口号后面，表示请求是代理请求，请求本地服务器将请求转发给代理的地址中，
    即上面的http://api.qingyunke.com，而当我们发送请求:http://localhost:8080/home/getAllUser时，
    虽然本地服务器代理了，但是发送到目标地址的真正请求是：/home/getAllUser而我们接收的请求是：/getAllUser，
    所以我们需要配置pathRewrite，将请求中”/home”改成””