快捷導(dǎo)航

Vue2使用cli腳手架引入ElementUI教程

更新時(shí)間：2025年08月26日 09:15:41 作者：xrkhy

本文介紹使用Vue CLI創(chuàng)建項(xiàng)目并集成ElementUI的方法,涵蓋完整引入與按需引入（需安裝babel-plugin-component及配置）,同時(shí)推薦VSCode插件vscode-element-helper輔助開(kāi)發(fā)

使用cli腳手架創(chuàng)建項(xiàng)目

可以參考我之前的博客Vue打包工具(構(gòu)建工具)和腳手架

整理目錄

ElementUI安裝并引入

安裝

我們打開(kāi)ElementUI官網(wǎng)

npm i element-ui -S

引入

完整引入

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

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)
});

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

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

module.exports = {
  // presets: [["es2015", { "modules": false }]], // babel-preset-es2015已被官方廢棄多年
  presets: [
    '@vue/cli-plugin-babel/preset'  // 使用 Vue CLI 內(nèi)置的現(xiàn)代預(yù)設(shè)
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下來(lái)，如果你只希望引入部分組件，比如 Button 和 Select，那么需要在 main.js 中寫(xiě)入以下內(nèi)容：

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);
/* 或?qū)憺?
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

Vscode 提示插件下載

打開(kāi)插件市場(chǎng)下載插件有提示vscode-element-helper

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決
這篇文章主要介紹了vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
如何理解Vue的.sync修飾符的使用
本篇文章主要介紹了如何理解Vue的.sync修飾符的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue 中命名視圖的用法實(shí)例詳解
這篇文章主要介紹了vue 中命名視圖的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-08-08
詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果（vue-cli）
本篇文章主要介紹了詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果（vue-cli），具有一定的參考價(jià)值，有需要的可以了解下
2017-08-08
vue router 源碼概覽案例分析
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過(guò)實(shí)例代碼案例分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-10-10
vue實(shí)現(xiàn)記事本功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)記事本功能，記事本可以進(jìn)行添加刪除事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
Vue2.0設(shè)置全局樣式(less/sass和css)
這篇文章主要為大家詳細(xì)介紹了Vue2.0設(shè)置全局樣式(less/sass和css)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue實(shí)現(xiàn)數(shù)字動(dòng)畫(huà)的幾種方案
本文介紹了三種使用Vue實(shí)現(xiàn)動(dòng)態(tài)數(shù)字動(dòng)畫(huà)的方案：使用Vue的響應(yīng)式數(shù)據(jù)與`setInterval`逐步更新數(shù)字,通過(guò)Vue的動(dòng)畫(huà)API和CSS動(dòng)畫(huà)效果為數(shù)字增加過(guò)渡效果,以及使用更高效的`requestAnimationFrame`來(lái)提供更加流暢的動(dòng)畫(huà)表現(xiàn),每種方案都詳細(xì)說(shuō)明了原理、實(shí)現(xiàn)步驟和代碼示例
2025-02-02
如何使用vite搭建vue3項(xiàng)目詳解
Vite 是一個(gè)面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開(kāi)發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項(xiàng)目的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue結(jié)合echarts實(shí)現(xiàn)繪制水滴圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合echarts實(shí)現(xiàn)水滴圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07