快捷導(dǎo)航

Vue2中引入使用ElementUI的教程詳解

更新時(shí)間：2024年03月18日 09:10:11 作者：Saga?Two

這篇文章主要為大家詳細(xì)介紹了Vue2中引入使用ElementUI教程的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下

1 安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack打包工具配合使用。（本項(xiàng)目使用安裝方式）

npm i element-ui -S

也可以使用其他的包管理起進(jìn)行安裝：

# Yarn
$ yarn add element-ui

# pnpm
$ pnpm install element-ui

2 引入

ElementUI分為全局引入和按需引入兩種方式，一般在工程項(xiàng)目中，如果使用全局引入，則項(xiàng)目初始化時(shí)會(huì)導(dǎo)致不必要的資源加載，為提升項(xiàng)目性能，建議進(jìn)行按需引入。以下我們對(duì)兩種引入方式進(jìn)行介紹。

2.1 全局引入

2.1.1 引入

在 main.js 中寫(xiě)入以下內(nèi)容：

import Vue from 'vue';
import ElementUI from 'element-ui';
//樣式文件需要單獨(dú)引入
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

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

以上代碼便完成了 Element 的引入。

2.1.2 使用

引入完成之后就可以使用組件了，如下示例為使用container組件和button組件：

效果如下：

代碼如下：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-main>
          Main
          <el-button type="primary">按鈕</el-button>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
export default {};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

2.2 按需引入

可以使用babel-plugin-component這個(gè)Babel插件。這樣，你可以只引入你實(shí)際使用的組件和它們的樣式，從而減小項(xiàng)目體積和構(gòu)建時(shí)間。

2.2.1 引入

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后，將 .babelrc 或者babel.config.js文件修改為：

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

2.2.2 使用

若想實(shí)現(xiàn)上圖效果，按需引入時(shí)需要將使用的所有組件都引入進(jìn)來(lái)，代碼如下：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-main>
          Main
          <el-button type="primary">按鈕</el-button>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script>
import Vue from "vue";
import { Button, Container, Header, Aside, Main, Footer } from "element-ui";
Vue.use(Button);
Vue.use(Container);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Header);

export default {};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

按需引入組件，組件全部名稱(chēng)詳見(jiàn)官網(wǎng)；