在Vue中使用Element

在e:\vue\2020.4.3中，已創建vue項目。

但還沒有下載element-ui，在e:\vue\2020.4.3中，輸入npm install --save element-ui，回車，自動安裝。

然后，在e:\vue\2020.4.3目錄下，輸入cnpm run dev，然后根據提示復制到瀏覽器中運行即可使用element-ui了。

 

 

有時候項目中只用到ElementUI中的幾個組件，全局引入會增加項目體積，所以按需引入更合適。

//引入按鈕組件（Button）和下拉選擇器組件（Select）
import { Button, Select } from 'element-ui';
//將引入的組件注冊為全局Vue組件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或寫為
 * Vue.use(Button)
 * Vue.use(Select)
 */

使用已注冊的組件

<template>
  <div id="app">
        <el-button type="primary">主要按鈕</el-button>
        <el-button type="success">成功按鈕</el-button>      
  </div>
</template>

其他組件基本與上面引入方法類似，不過也有區別，官網也有介紹，大部分組件都是以import { XXXX } from 'element-ui'的方式引入，然后以Vue.component(XXX.name, XXX);或者Vue.use(XXX)的方式注冊，當然也有例外，