Vue2中引入使用ElementUI的教程詳解
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 中寫入以下內(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>
按需引入組件，組件全部名稱詳見官網(wǎng)；
3 總結(jié)
通常情況下，若是對(duì)性能沒(méi)有要求時(shí)，可以使用全局導(dǎo)入方式引入所有組件，若對(duì)頁(yè)面加載性能有要求，則最好使用按需加載方式引入組件，以防多余的資源加載增加頁(yè)面初始化耗時(shí)。
到此這篇關(guān)于Vue2中引入使用ElementUI的教程詳解的文章就介紹到這了,更多相關(guān)Vue2 ElementUI內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中的ESLint配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式
這篇文章主要介紹了Nuxt引用cookie-universal-nuxt在服務(wù)端請(qǐng)求cookie方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue代理模式解決跨域詳解的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue?2?如何添加?register-service-worker?實(shí)現(xiàn)緩存請(qǐng)求的問(wèn)題
這篇文章主要介紹了Vue?2?如何添加?register-service-worker?以實(shí)現(xiàn)緩存請(qǐng)求的目的,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
Vue封裝組件利器之$attrs、$listeners的使用
vue3 數(shù)組間取消強(qiáng)關(guān)聯(lián)的幾種實(shí)現(xiàn)方法
vue進(jìn)行圖片的預(yù)加載watch用法實(shí)例講解
前端單獨(dú)實(shí)現(xiàn)vue動(dòng)態(tài)路由的示例代碼