Vue入門——Vue-CLI結合ElementUI

Vue入門——Vue-CLI結合ElementUI

0.前言

Vue入門——Vue-CLI 4.X腳手架搭建

在搭建好Vue-CLI腳手架後，想結合比較流行的ElementUI

1.項目目錄下安裝ElementUI

我的項目路徑爲D盤vue文件夾下的vueblog，切換到這個路徑後執行以下安裝命令：

cnpm i element-ui -S

一定要切換到項目路徑，不然後面運行會有引用錯誤。

2.手動配置ElementUI並添加ElementUI按鈕

在項目src下的app.vue中添加如下代碼：

//手動配置ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

添加elementUI的按鈕組件代碼到App.vue，官網可複製： https://element.eleme.cn/#/zh-CN/component/button

		<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>

3.運行查看效果

切換至項目目錄下執行運行命令：

npm run serve

效果如圖，可看到加上去的按鈕組件：

如果運行有報錯，檢查第一步安裝ElementUI是否在項目目錄下。