vue全家桶項目搭建之二——配置UI （將element-ui配置到vue項目當中）

目錄

一、安裝element-ui

二、引入 Element

1.完整引入

2.按需導入

---

一、安裝element-ui

npm i element-ui -S

二、引入 Element

這裏你可以引入整個 Element，或是根據需要僅引入部分組件也就是俗稱的按需加載。

1.完整引入

在main.js裏面配置

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //樣式要單獨導入
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

注意：樣式要單獨導入

2.按需導入

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然後，將 .babelrc 修改爲：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下來，就是你需要什麼組件就導入什麼組件，這樣就大大縮小了項目的體積。如果你只希望引入部分組件，比如 Button 和 Select，那麼需要在 main.js 中寫入以下內容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫爲
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

以上都參照了element官網，詳細請看官網：

https://element.eleme.cn/#/zh-CN/component/quickstart

接下來看

vue全家桶項目搭建之三——vue cli4.0+中使用proxy配置代理轉發

https://blog.csdn.net/qq_34645412/article/details/106099268

如果有更精闢的見解歡迎評論留言探討，一起探討，一起進步！若回覆不及時可聯繫：