【小白的進階史之vue---2】idea+vue+element專案整合

前言

這次做ops的運維繫統用到了vue+element開發，不自覺地喜歡上了vue，不僅介面美觀大方
而且就使用上而言Vue已經解決了之前jQuery很多痛點：

1. 無需擔心DOM回撥，這種複雜性已經被封裝。Vue的生命週期掛鉤將允許更精確的控制，如果它需要。
2. 在資料屬性counter和它渲染輸出DOM節點之間有一個明顯的之間的連結。無需心理DOM，你可以看到它在網頁上有保證，更新計數器不會弄亂你的DOM以意想不到的方式由於搖晃的節點選擇。不再需要DOM複製，你可以看到它在網頁上，保證更新計數器時不會由於靠不住的節點選擇以意想不到的方式弄亂你的DOM。
3. 我們沒有模稜兩可的API方法需要查詢或記住。不同的功能被很好的組織和分層在Vue建構函式物件中，或能通過指令直接應用到模板中的DOM節點，這些指令提供更多的易於理解的上下文。

因此，讓我們一起歡快地踏上vue旅程吧!

element-ui安裝

在vue專案整合好後(可參照【小白的進階史之vue—1】idea新建vue專案)，進行以下兩種方式均可安裝element-ui：

1. npm i element-ui -S命令進行安裝，如圖:
2. 也可以在package.json中新增，後通過npm(cnpm) install進行安裝:
   開啟package.json，找到devDependencies並在最後加上”element-ui”: “^2.4.11”
   安裝完後都要進行npm install 和 npm run dev操作

element-ui使用

安裝成功後，開啟main.js往裡面新增三行內容

App from './App';之前
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui' //新新增
import 'element-ui/lib/theme-chalk/index.css' //新新增，避免後期打包樣式不同，要放在import 

Vue.use(ElementUI)   //新新增
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

這樣就已經將element-ui成功整合進來了