Vue-elementUI 开发总结

• npm 使用淘宝镜像 npx nrm use taobao
• vue 注册全局组件

component.js
import XXX from 'XXX '
export default (Vue) => {
    Vue.component('XXX ', XXX );
}
main.js
import component from '../???/component'
Vue.use(component)

• vue 预防异步，出现意外的错误

this.$nextTick(()=>{
	//TODO
});
//页面渲染完成后执行

data(){
	return {
		tableData:[]
	}
}
let newTableData = [...];
this.tableData = JSON.parse(JSON.stringify(newTableData));
//给data里的变量重新赋值时，有可能data值变了，页面不重新渲染，使用JSON转换一次

this.$forceUpdate();
//强制刷新，还没弄清楚，上面的方法比这个有效

function functionOne(){
	return new Promise((resolve,reject)=>{
		resolve(
			//返回值
		);
	});
}

function functionTwo(){
	this.functionOne().then(res=>{
		// functionTwo TODO
	});
}
//使用Promise嵌套设置方法执行先后顺序

• Webpack分包打包

module.exports = (options = {}) => ({
    entry: {
        app: ["babel-polyfill", "./src/main.js"],
        echarts: './src/util/echarts.js',
        vendor: './src/vendor.js',
        theme: './src/util/theme.js',
        element: './src/util/element.js',
    },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        chunkFilename: '[id].js?[chunkhash]',
        publicPath: options.dev ? '/assets/' : publicPath
    },
    ...
});

//Echarts选择使用的组件
echarts.js
import 'babel-polyfill'
// import ECharts from 'echarts'
// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts');
// 引入图表
require('echarts/lib/chart/line');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/component/legendScroll');
require('echarts/lib/component/grid');
require('echarts/lib/component/dataZoom');

export default (Vue) => {
    Vue.prototype.$echarts = echarts;
}