【Vue教程系列：第二篇】Vue項目添加ElementUI

1. 在上一篇，搭建環境，創建vue項目目錄結構如下：

編寫工具，本人推薦：Visual Studio Code

 

 

2. 進入到項目文件夾，執行加載element-ui組件命令：

npm i element-ui -S

 

 

3. 在main.js代碼里添加對element-ui的引用：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

 

4. 在項目里使用element-ui控件

 components/HelloWorld.vue文件（注意：vue模板只能有一個根對象）

<template>
  <div>
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
  </div>
</template>

 

效果如下（main.js 默認的圖片及文字我已去掉）：

 

至此，element-ui已經成功引入vue項目，vue組件的使用詳細操作，請參考vue官方使用文檔：

https://element.eleme.cn/#/zh-CN/component/installation

 

Vue系統文章會持續更新，歡迎大家繼續關注！！！