使用 vue-cli + element-ui 快速搭建項目

一、前言

vue2.0

的到來，憑借這其簡單易學、完善的API中文文檔、豐富的生态系統，成為國内目前十分受歡迎的前端

MVVM

架構， 

element-ui

是基于 

vue2.0

的 

ui

架構，由餓了麼團隊開發維護的，目前是vue的ui庫中最受歡迎的一個架構

element-ui官網 vue專題網站

在vue專題中可以看到各個

ui架構

的受歡迎程度

二、代碼操作

使用

vue-cli + element-ui

有兩種方式

方案一： 

①先使用

vue-cli

 搭建好項目， 

②再使用

npm install

對應的子產品、插件， 

③再去

webpack.conf.js

中進行配置各種檔案的加載器， 

④再去

.babelrc

 中配置插件

如果項目還沒開始編寫，就不要使用方案一了，如果項目已經啟動了一陣子了，那就得按以上要點每一步都得處理好，稍有不慎，就報錯了，這裡介紹一下方案二，就是使用 element-ui 提供的一個模闆

方案二： 

① 使用 git 指令

git clone https://github.com/ElementUI/element-starter.git

下載下傳官方提供的模闆， 

② 使用

cnpm intsall

下載下傳依賴的子產品（沒有淘寶鏡像 cnpm 可以使用

npm install

） 

③ 使用

npm run dev

跑項目

模闆的基本架構如下——和使用

vue-cli

 腳手架搭建的項目基本沒有差別，十分幹淨

項目跑起來後可以看到一個簡單的頁面——就比使用

vue-cli

搭建的項目的頁面多了一個

element-ui

按鈕元件

接下來就可以使用

element-ui

庫了~

本文作者：larger5

本文釋出時間：2018年01月31日

本文來自雲栖社群合作夥伴

CSDN

，了解相關資訊可以關注csdn.net網站。