关于Element,Vant, Ant-Design按需引入及坑

一.按需引入Element

1.安装Element

npm i element-ui -S

2.按需引入
按需引入借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
element-ui官网 https://element.eleme.cn/#/zh-CN/component/quickstart

先安装 babel-plugin-component：

npm install babel-plugin-component -D

然后把 .babelrc改为

注意 找不到.babelrc文件可以找babel.config.js文件，初始文件是这样

按照文档修改

module.exports = {
  presets: [
	  "@vue/cli-plugin-babel/preset",
	  ["es2015", { "modules": false }]
  ],
  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
   ]
};

新建一个element.js文件，我创建在components文件夹下

import Vue from "vue";
import { Button } from 'element-ui';
const list = [
	Button
]
//循环注册组件
list.forEach(ele => { 
  Vue.use(ele)
})

然后在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// 全局引入
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
// 按需引入
import "@/components/Element.js";

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

照着官网操作完，然后你会发现嘎嘎报错，原因就是这里

这是修改后的

module.exports = {
  presets: [
	  "@vue/cli-plugin-babel/preset",
	  ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
   ]
};

新建一个vant.js文件，我创建在components文件夹下

二.按需引入Vant

1.安装Vant

npm i vant -S

2.按需引入
按需引入借助 babel-plugin-import，它是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart

# 安装插件
npm i babel-plugin-import -D

也是在babel.config.js文件配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
      [
      	"import",
        {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }, "vant"
      ],
   ]
};

新建一个vant.js文件，我创建在components文件夹下

import Vue from "vue";
import { Button } from 'vant';
const list = [
	Button
]
//循环注册组件
list.forEach(ele => { 
  Vue.use(ele)
})

然后在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// 全局引入
//import Vant from 'vant';
//import 'vant/lib/index.css';
//Vue.use(Vant);
// 按需引入
import "@/components/vant.js";

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

这个还好，照着官网配置没有报错

三.按需引入Ant-design-vue

1.安装Ant-design-vue
我装的ant-design-vue是1.78版本（配置过程中ant-design版本过高或者less，less-loader版本不匹配都会报错，闹心）

npm i ant-design-vue@1.7.8 -S

2.按需引入
按需引入借助 babel-plugin-import ，它是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
https://2x.antdv.com/docs/vue/getting-started-cn

# 安装插件
npm i babel-plugin-import -D

也是在babel.config.js文件配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
      [
        "import",
        {
		 "libraryName": "ant-design-vue", 
		 "libraryDirectory": "es", 
		 "style": true
      	}
      ],	  
   ]
};

新建一个vant.js文件，我创建在components文件夹下

import Vue from "vue";
import { Button } from 'ant-design-vue';
const list = [
	Button
]
//循环注册组件
list.forEach(ele => { 
  Vue.use(ele)
})

然后在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// 全局引入
//import Antd from 'ant-design-vue';
//import 'ant-design-vue/dist/antd.css';
//Vue.use(Antd);
// 按需引入
import "@/components/Antd.js";

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

然后又是嘎嘎报错，
解决办法修改 “style"为"css”

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
      [
        "import",
        {
		 "libraryName": "ant-design-vue", 
		 "libraryDirectory": "es", 
		 "style": "css"
      	}
      ],	  
   ]
};

但是我是个特别固执的人，我就要"style": true;
那就解决报错吧，报错是因为less原因，因为ant -design-vue 是通过 less 编写的

安装 less 和 less-loader

安装 less :  npm i less --save-dev
安装 less-loader :  npm i less-loader --save-dev

我的安装版本

npm i less@4.0.0 --save-dev
npm i less-loader@8.0.0 --save-dev

然后在在vue.config.js文件配置

module.exports = {
  css: {
    loaderOptions: {
        less: {
          lessOptions:{
            javascriptEnabled: true,
          }
        }
    }
  },
};

ok, 能正常运行了！