vue2 项目开发使用到的东东

表单验证使用的是 vee-validate

ui组件使用的是 bootstrap element
时间选择组件 vue-datepicker
富文本编辑组件 vue-quill-editor
项目中使用到百度地图定位，翻阅资料发现这个很赞vue2 引入百度地图
导出Excel表格
Lodop打印插件如何在vue项目中使用lodop打印插件
图表 百度Echarts Echarts

---

① ElementUI 相关
刚开始使用Element UI的时候，总感觉官方提供的组件有限、样式就那么多，可以扩展的就是固定的暴露的一些属性和方法。要是用到实际项目中 有一定的局限性。可能满足不了自己的需求。这样认为还是 图样图森破，
还是太年轻了。
就拿普普通的 el-carousel 轮播图，就是所谓的跑马灯来讲。

carousel

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

官方提供的满足一个轮播组件的基本功能。扔进项目直接就能用
重写样式，直接解决。

但是有个问题，根据需求你可能不需要线形的指示器，你需要圆点形的指示器。傻眼了，NO

直接找到这块的源代码。页面查找，发现

<li class="el-carousel__indicator">
  <button class="el-carousel__button">
  <!---->
</button></li>

这一块在控制指示器的样式，ok，那就改呗
直接重写 el-carousel__button

  /*设置指示器的样式*/
  .el-carousel__button {
    width: 10px;
    height: 10px;
    border-radius: 5px;
  }

修改过后的样子

②发布相关
去掉路由后面 丑陋的 “#”

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

发布项目，在刷新阶段 404，可以参照这个
vue-router history 模式 iis 应该怎么配置呢
这个一般都可以解决问题。
或者自己写 rewrite规则
vue-router下的html5 history在iis服务器上的设置

③发布相关
打包时候去掉 console.log
找到 webpack.prod.conf.js 增加

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,   //增加这两句
        drop_console: true      //增加这两句
      },
      sourceMap: true
    }),

④发布相关
打包生成的静态文件里面有 一大堆的 .map文件。如何禁止生成
在 config目录下 index.js

（默认是true，修改为false）

⑤开发相关

时不我待，潜心code

---

资料推荐
vue2.0 子组件和父组件之间的传值（转载）
vue2 引入百度地图
Vue2.0---将页面中表格数据导出excel