Vue Mint UI webpack Echarts坑持续更新中

1.vue中引入less。需要用cnpm install less less-loader --save-dev
然后不需要进行多余配置。直接cnpm run dev重启项目就可以在main.js中引入

2.Mint-ui中如果发现mt-swipe排版是上下排版，则需要引入import 'mint-ui/lib/style.css'

3.Mint-ui如果需要修改样式，则需要找到相应的class，然后加上!import.注意是style不是style scoped.

4.Mint-ui 使用里面组件注意需要先在main.js中引入

import { MessageBox } from 'mint-ui';
import { Indicator } from 'mint-ui';
import { Toast } from 'mint-ui';

Vue.prototype.$messagebox = MessageBox;
Vue.prototype.$indicator = Indicator;
Vue.prototype.$toast = Toast;

  this.$messagebox({
                    title: '温馨提示',
                    message: '开通会员或邀请3名好友注册即可查看~',
                })

5.Mint-ui 滑动加载组件 <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="spinShow" infinite-scroll-distance="50"></div>
表示很难用。 loadmore刚开始组件渲染出来就会调用。infinite-scroll-distance跟滑动距离有关系。
6.webpack打包，发现在线上可以看到原始代码。原因是需要配置index.js 下 build 里面的productionSourceMap为false。

7.移动端页面 echarts页面滑动异常卡顿，这个原因找了好久。
记住千万不要新建了一个echarts之后，用vue在本地持有它，这样他就会一直在内存中，也就是两份吧。要用系统的api this.$echarts.getInstanceByDom(echartsDom)来重新获取当前实例对象。

8.webpack cdn配置，

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: 'https://page.searchain.cn/',  主要是修改这里。

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

9.echarts要实现这种效果。

image.png

记住 2个series最基础的就可以不要动。
一个y轴，一个x轴，注意x轴一个属性。

  axisLine: {
                            onZero: true,//是否从0点开始
                        },

10.全局引入组件自定义组件
在main.js中

import Spinloading from './components/mt-Spinner/Spinloading' 

Vue.component('Spinloading',Spinloading);

Vue Mint UI webpack Echarts坑 持续更新中

推荐阅读更多精彩内容

Vue Mint UI webpack Echarts坑持续更新中