欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論