本篇的內容包含

• 如何在Vue專案中安裝Element UI套件
• 如何透過babel-plugin-component只引用需要的元件進專案
• 透過npm安裝reset-css
• 使用Element UI套件拉出基本版面配置

安裝Element UI套件

在終端機輸入以下指令，即在Vue Clie 3.0的專案中安裝Element UI套件

vue add element

在Vue中引用Element UI

方法一：完整引用

完整引用非常方便，只要一句use就搞定，但是可能有很多不會用到的部分也一起被引用進來：
在src\main.js加入以下內容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

即可完整引用Element UI的元件。

方法二：部分引用

部分引用可以只取有使用到的部分元件來引入使用，相較之下是輕量化的使用方式

• 部分引用的方式，需要搭配babel-plugin-component套件

npm install babel-plugin-component -D

修改babel.config.js的內容如下

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

• 更改babel.config.js完成之後，需要重啟服務才會生效
• 修改main.js，加入以下程式，引入基本版面配置所需要的檔案

import { Container, Button, Menu, MenuItem } from "element-ui";
Vue.use(Container);
Vue.use(Button);
Vue.use(Menu);
Vue.use(MenuItem);

測試一下引用有沒有成功

在App.Vue加入使用button的語法：

<el-button type="primary">我是按鈕</el-button>

可以看到上面多了一個Element UI主色調的按鈕：

拉一個基本的版面配置

我的後台規劃成這樣基本的版型配置：

安裝reset-css，清除瀏覽器預設樣式

在終端機輸入以下指令安裝：

npm install --save reset-css

在main.js加入以下引用：

import "reset-css";

使用Container 布局容器實做版面配置

修改App.Vue的<template>為以下：

<template>
  <div id="app">
    <el-container>
      <el-header class="header">我是header</el-header>
      <el-container class="content">
        <el-aside class="aside">Aside</el-aside>
        <el-main class="main">Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

這時畫面會看起來像這樣，全部糊在一起看不太清楚

加入一點SCSS

修改App.Vue的SCSS成為這樣

<style lang="scss">
.header {
  background-color: #0fb0ef;
}
.content {
  height:calc(100vh - 50px);
  .aside {
    width: 200px;
  }
  .main {
    background-color: #e8e5e5;
  }
}
</style>

加入之後畫面會變成這樣，你覺得舒服多了

基本版面這樣就完成喽～