vue开发中可能会遇到的东西6. x轴倾斜：使用el-tab时页面会卡死，在网上找了半天才找到一个有用的，使用el-r

平时开发的时候怕忘了，写下来一些经常遇到的和以后要求自己做到的格式规范等等

1.打包后出现img,css等等404

一般情况修改这两个地方就好（vue-cli2）

打开 config->index.js 找到 bulid （切记，是build）

  build: {    // Template for index.html    
        index: path.resolve(__dirname, '../dist/index.html'), // Paths    
        assetsRoot: path.resolve(__dirname, '../dist'),    
        assetsSubDirectory: 'static',    
        assetsPublicPath: './',         //把这个修改成 ./

第二个地方打开build->utils

 if (options.extract) {     
         return ExtractTextPlugin.extract({      
              use: loaders,        
              fallback: 'vue-style-loader',   
              publicPath:'../../'        //加上这一句      
         })    
  } 
else {    
  return ['vue-style-loader'].concat(loaders)    
  }  
}

router.js -> mode不要设置成history类型（如果要设置，需要后端配合）

2.解决ie,360浏览器白屏的问题

引入 babel-polyfill

npm install babel-polyfill -s

mian.js里面:

import "babel-polyfill"

3.props传值的一些用法

基本用法：通过数组的形式拿到值

<div id="app">
        <any-component :foo-message="fooMessage"></any-component>  
</div>

props: ['fooMessage'],

props验证：

type为传值的类型

require 必传的规则

default默认值（尽量不要和require同时使用）

 props: {
     fooMessage: {           
           type:Number,
           required: true   //必传
      },
    fooDefault: {           
           type:Number,
           defalut: 12   //默认值
     } },

当type为 Array 或 Object 时，default必须是函数

 props: {
     fooMessage: {           
           type:Array,
           default: function(){
                return ['foo', 'bar']
           }
      }
 },

自定义校验规则函数 validator

 props: {
     fooMessage: {           
          validator: function(value){
                return value>=0 && value<=128;
          }
     }
},

4.Echarts相关

1.重新生成图表:

this.myChart.setOption(option,true)

加一个true代表重新生成图表，不加代表只修改数据

2.同一页面调用同一echarts组件出现数据覆盖等情况或加载不出来

echarts图表要单独放在组件里面

this.myChart = echarts.init(this.$refs.bar_price)

通过ref拿到节点，通过document.getElementById()的方式会加载不出来

3.resize自适应

图表自适应宽度

 window.addEventListener('resize', () => {
        this.myChart.resize() 
 })

4.点击事件

//拿到点击柱状图的属性
this.myChar.on('click',function(params){
   
})
 或者
this.myChar.getZr().on('click',function(params){

})

柱状图，折线图等：

5.鼠标滚动：

 dataZoom: [{         
        type: 'inside',     //slider下面滚动条类型
        start:0,
        end:100    
 }],
//更多属性去看echarts文档

6. x轴倾斜：

 //这里面可以配置X轴文字样式 
axisLabel: {
    interval: 0,    //为0全部强制显示   
    rotate: 15     //倾斜度数
 }

7.echarts地图等：

 echarts.registerMap('MY', myJson) //注册  myJson为你的geoJson数据

配置geo：

geoJson 中国地图下载地址：

datav.aliyun.com/tools/atlas…

echarts社区，里面有很多图表，可以去研究研究：

gallery.echartsjs.com/explore.htm…

8.点击echarts图和点击背景

this.myChart.getZr().on('click',(params:any)=>{
       const pointInPixel = [params.offsetX, params.offsetY]
       if(this.myChart.containPixel('seriesMap', pointInPixel)){
           console.log('echarts图')
            
       }else{
          console.log('背景图')
        }
})

5.日期相关

可以使用 momentjs插件库：

momentjs.cn/

6.vue性能优化

1.路由懒加载

//原来的写法：import Home from '@/components/PC/Home'

//改成下面这种形式
const Home = () => import('@/components/PC/Home')

2.element-ui按需加载

先安装插件:

npm install babel-plugin-component -D

然后在babelrc中的plugins配置：

[
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
]

按需引用:

import { Button} from 'element-ui';

Vue.component(Button.name, Button);

具体看官网：element.eleme.cn/#/zh-CN/com…

3.echarts按需加载

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

具体看官网:

www.echartsjs.com/zh/tutorial…

4.cdn加载

狠下心来，将安装的一些依赖全删掉，用cdn引入，例如element,echarts,vue等

...
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

...
<body>
  <div id="app"></div>
  <!-- cdn 加速，减小 vendor.js 体积 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- built files will be auto injected -->
</body>

cdn网址：www.bootcdn.cn/

main.js中，可以这样引入下全局加载

import ElementUI from 'element-ui'Vue.use(ElementUI)

在 webpack.base.conf.js中（切记，不然页面会报错）

module.exports = {
...
      // 外部扩展，通过 cdn 引入，不会被webpack打包
	  externals: {
	    'vue': 'Vue',
	    'vue-router': 'VueRouter',
	    'vuex': 'Vuex',
	    'axios': 'axios'
	  }
  }

5.g-zip

这个需要后端配合，配置下nginx,然后前端的话，在config ->index.js里面

将 productionGzip设置为true ,然后再

npm install --save-dev compression-webpack-plugin

亲测，超级好用，速度快了特别多

7.element-ui踩坑

1.使用el-tab导致页面卡死

使用el-tab时页面会卡死，在网上找了半天才找到一个有用的，使用el-row el-col包住你要展示的内容。

差不多就这个样子:

<el-tabs>
  <el-tab-pane>    
        <el-row>      
           <el-col :span="24">            
              <div class="item>123456</div>
          </el-col>
     </el-row>
   </el-tab-pane>
<el-tabs>

这样之后页面就不会卡死了，element-ui的坑点！！！

2.使用日期时间选择器的时候点击清空的值会变成null

给了clearable属性后，清空的时候 v-model绑定的值会是null，调接口的是时候如果后端没做判断，就可能调接口时遇到问题

8.arcgis for js 从3.x升级 4.x

1.调用一个api方法 :

3.x：直接在页面里面 new esri.Graphic() 这种的

4.x : 一般把地图写成一个组件里面，然后在那边传值过来

然后在父组件里面接收，然后再new this.graphic({ }) 这样子去写

2. 4.x不支持在地图上添加gif动态图

3.在地图上画点、线、面时，坐标必须是4326格式，如果不是，那就要转换一下

当然，webMercatorUtils也是需要地图那边传过来的

_this.webMercatorUtils.webMercatorToGeographic(rings)     通过这个方法可以将  3857转成4326

具体升级差异可以看：

https://developers.arcgis.com/javascript/latest/guide/functionality-matrix/index.html