Vue 專案 引入第三方餓了嗎元件(ElementUI)
阿新 • • 發佈:2018-12-31
#建立一個基於webpack模板的新專案
vue init webpack d:\nodeworkspace\nodeone
# 切換至專案路徑
cd d:\nodeworkspace\nodeone
# 安裝專案依賴檔案
cnpm install
# 專案啟動
cnpm run dev
第二步:引入餓了嗎元件(ElementUI)
1、開啟cmd 視窗,切換到vue 所在目錄,執行如下指令: cnpm i element-ui s
第三步:vue 專案引用ElementUI.,(注意紅色字型部分)
src/router/index.js
import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(Router) Vue.use(ElementUI) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] })
元件引用相關樣式:src/components/Hello.vue
<template> <div class="hello"> <!-- 文字繫結--> <h1>{{ msg }}</h1> <!--html 繫結--> <div v-html="message"></div> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul> <el-button type="primary">主要按鈕</el-button> <el-button type="text">文字按鈕</el-button> </div> </template> <script> export default { name: 'hello', data () { return { msg: '歡迎來到菜鳥教程', message:'<p>歡迎來到菜鳥A大隊</p>', } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
效果展示: