uniApp +element 按需加载项目

说明

uniapp是基于vue做的框架，所以vue首页加载过慢基础文件过大问题也相应的继承了。那么为了解决首页加载过慢的问题，就需要按需加载我们所需要的插件组件。我下面介绍的按需加载是不基于babel-plugin-component的按需加载，babel-plugin-component本身就很大，所以如果只是对element单独进行按需加载，完全不需要babel-plugin-component。也可能是由于本人对babel不是很了解的原因。

1、解决pages.json没有按需加载功能

uniapp项目由于可以兼容多个平台（小程序、h5、app）所以目前还没有路由页面按需加载的功能。所以首次加载会在加载page内配置的所有页面，导致收也加载过慢。 解决办法。虽然没有页面按需加载，但是有组件按需加载的功能。那么我们转变一下思路，我们可以创建一个空页面（home.vue），然后在这个页面动态加载不同的组件（项目真正展示的页面）(error.vue)。

home.vue

<template>
  <view class="page">
    <!-- 错误页面 -->
    <error v-if="isErrorPage"></error>
  </view>
</template>
<script>
  export default {
    components: {
      error: resolve => {require(['@/components/error/error.vue'], resolve)}
    },
  	data() {
  		return {
        language: 'en',
        isErrorPage: false,
        isCallPage: false,
        option: {}
  		}
  	},
  	onLoad(option) {
      console.log(typeof(option));
      this.option = option;
      this._init_home();
      let type = option.type;
      switch(type){
        case 'call':  //电话会议
            this.isCallPage = true;
            break;
        default: 
            this.isErrorPage = true;
            break;
      }
  	},
  	methods: {
      _init_home(){
        this.isErrorPage = false;
      }
    }
  }
</script>

2、uniApp npm加载需要的插件

这个很简单，只需要直接在项目根目录下运行 npm init 一直回车就行。然后安装element插件按需加载。

文件目录：

安装element npm i element-ui -S

3、按需加载element

首先在根目录创建一个element文件，在文件内创建一个index.js文件。在main.js内引入，就可以了。

element/index.js

// 导入自己需要的组件
import "element-ui/packages/theme-chalk/lib/base.css";
import "element-ui/packages/theme-chalk/lib/icon.css";
import "element-ui/packages/theme-chalk/lib/select.css";
import "element-ui/packages/theme-chalk/lib/option.css";
import "element-ui/packages/theme-chalk/lib/option-group.css";


import Icon from 'element-ui/lib/icon';
import select from 'element-ui/lib/select';
import option from 'element-ui/lib/option';
import optionGroup from 'element-ui/lib/option-group';
const element = {
  install: function (Vue) {
    Vue.use(select)
    Vue.use(option)
    Vue.use(optionGroup)
    Vue.use(Icon)
  }
}
export default element

main.js

//按需引入element
import element from './element/index'
Vue.use(element)

总结

完成以上步骤就搭建好uniapp+element为基础的项目了。希望对大家有所帮助。如有更好的方法或babel方面的，留言沟通😜。