Vue.js 2.0 + Element (1) 安裝

學習寫前端vue.js一段時間後，發現到每個UI component都要自己寫的話，非常費時、費工，重點還不見得好看，故而練習額外UI framework: Element。

前端框架: Vue.js 2.0

UI框架: Element

Vue.js安裝

安裝 vue-cli

$ npm install -g vue-cli

建立一個新的vue專案

$ npm init webpack [vue專案名稱]

進入vue專案

$ cd [vue專案名稱]

安裝相依的npm套件

$ npm install

跑一個初步的開發模式範例網站

$ npm run dev

後續想要建立一個實際產品網站，可以跑下面指令

$ npm run build

Element安裝

在main.js寫入程式碼

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’
Vue.use(ElementUI)

或是你可以使用CDN方式引入

在程式碼增加:

<link rel=”stylesheet” href=”https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src=”https://unpkg.com/element-ui/lib/index.js"></script>

大功告成!

如果你覺得文章很棒或有幫助到您，不妨幫我點個拍手吧! 謝謝…