Vue + Element UI項目初始化

1.安裝相關組件

1.1安裝Node

檢查本地是否安裝node 

node -v

 

若是沒有安裝，從Node官網下載

CentOS安裝 

curl -sL https://rpm.nodesource.com/setup_10.x | bash -

yum install -y nodejs

  

1.2安裝npm

npm -v

若是沒有安裝：使用該指令安裝： 

npm install -g npm

1.3安裝webpack

 webpack -v

若是沒有安裝，經過如下指令安裝：

 npm install webpack -g

若是缺失相關組件，選擇「y」進行安裝。

1.4vue腳手架

 vue-cli -v

若是沒有安裝，經過如下指令安裝：

 npm install vue-cli -g

 

2.建立Vue項目

選擇在項目建立的文件夾打開powershell，運行該指令 

vue init webapck ElementDemo

 

若是出現下面的錯誤，將項目的名稱換爲全小寫便可（不可有漢字）

 以後全選擇默認便可

可能項目的建立會出現一些錯誤，不要緊，出現最後的初始化完成便可

運行該命令完成組件安裝

npm install

運行該命令啓動程序

npm start 或 npm run dev

 運行結果以下圖

 

3.添加Element

Element中文站點

Element Unpkg下載

此處咱們須要下載 /lib/index.js 以及 /lib/theme-chalk/index.css 兩個文件

3.1添加Element引用

可是此處咱們使用另一種方法，修改package.json文件

運行該命令完成組件安裝

npm install

3.2應用Element UI

添加以下的引用，將Element全局引用到Vue框架

在App.vue中添加一下幾行代碼

保存文件，頁面會自動刷新（此時powershell仍需在運行狀態）

最下方出現一排咱們設置的按鈕且已經應用了Element的樣式，說明Element添加成功

 

4.常見錯誤

若是頻繁出現文件缺失，先安裝cnpm

 

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

而後將npm install指令替換爲cnpm install

 

 

5.參考

Vue2.0 + Element-UI + WebAPI實踐：簡易我的記帳系統

vue2.0+element+node+webpack搭建的一個簡單的後臺管理界面

Vue下面安裝Element 的詳細步驟

Timymce官方Demo