nuxt以按需引入组件的方式使用ui框架

这里不对nuxt进行一个介绍，我们这里只介绍下ui框架如何在nuxt按需引入，ui框架如：vant-ui 、element-ui等。
我们以vant-ui按需引入为例，在vant-ui官网中，按需引入步骤如下：
1、npm i vant -S
2、npm i babel-plugin-import -D
3、.babelrc中配置，代码如下

// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

那我们在nuxt中又该如何配置呢？
步骤1和步骤2也是一样，接下去我们还需要两步的操作，
步骤3：:在plugins文件夹下新建一个van-ui.js目录如图：

里面放入需要用到的组件如：

import Vue from 'vue'
import { Button, Cell,CellGroup } from 'vant';
Vue.use(Button);
Vue.use(Cell);

步骤4：
在nuxt.config.js中修改两个地方，plugins模块和build模块：

/*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/vant-ui',     //引入我们的vant-ui.js
  ],
  build: {
	    /*
	    ** You can extend webpack config here
	    */
	    /*extend(config, ctx) {
	    },*/
	    babel: {                              //vant官网的步骤3就在这里配置
	      "plugins": [
	        ['import', {
	          libraryName: 'vant',
	          libraryDirectory: 'es',
	          style: true
	        }, 'vant']
	      ]
	    }
	  }

这样就可以实现按需引入了，其他ui框架也是一样的道理，希望对你有所帮助。