介紹
要想知道vue和elementui之間有啥關系,首先我們必須了解vue和elementui,只有對它們有所認識,才能更好的理解它們之間的關系。本文主要針對它們之間的關系做個簡短的介紹。
1.vue簡介
Vue 是一套用於構建用戶界面的漸進式 JavaScript 框架 ,開發者只需要關注視圖層, 它不僅易於上手,還便於與第三方庫或既有項目的整合。是基於MVVM(Model-View-ViewModel 即:視圖層-視圖模型層-模型層)設計思想。提供MVVM數據雙向綁定的庫,專注於UI層面。
element 是基於 vue 實現的一套不依賴業務的 UI 組件庫,提供了豐富的PC端組件,減少用戶對常用組件的封裝,降低了開發的難易程度。
3.vue與Element-Ui的關系
1.Element-Ui是基於vue封裝的組件庫,簡化了常用組件的封裝,提高了重用性原則;
2. vue是一個漸進式框架,Element-Ui是組件庫;
4.vue+Element-Ui的使用
第一步:安裝vue-cli手腳架(注:前提是保證安裝了nodejs,可通過打開cmd,輸入 node -v,檢查是否安裝,命令行顯示nodejs的版本,代表安裝成功)
第二步:nodejs安裝完成后使用命令安裝 vue 和vue-cli,命令如下:
cnpm install vue
cnpm install vue-cli -g
注:-g 表示全局安裝
第三步:初始化webpack,命令如下:
vue init webpack 項目名
第四步:初始化時根據提示填寫,完成后即可安裝element-ui,然后在index.js中引入全局注冊即可,如下所示:
安裝element-ui
cnpm install element-ui --save
index.js中引入全局注冊
import ElementUi from 'elemet-ui'
import '@/theme-et/index.css'
Vue.use(ElementUi)