vue學(xué)習(xí)（2）-Element組件使用

使用element ui進(jìn)行開發(fā)，能vue完美的結(jié)合在一起。反正他們是這么說的???

  1. npm安裝element

npm i element-ui -S

  1. 引入element
  • 在main.js中添加
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

  • 按需引入

    • 安裝babel-plugin-component，只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

    npm install babel-plugin-component -D

    • 將 .babelrc 修改為：
     {
     "presets": [
        ["es2015", { "modules": false }]
     ],
   "plugins": [["component", [
     {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-default"
     }
   ]]]
 }
    • 引入需要的組件
     import Vue from 'vue'
 import { Button, Select } from 'element-ui'
 import App from './App.vue'

 Vue.component(Button.name, Button)  //添加自己需要的組件button。。。
 Vue.component(Select.name, Select)
 /* 或?qū)憺?  * Vue.use(Button)
  * Vue.use(Select)
 */

 new Vue({
   el: '#app',
   render: h => h(App)
})

  • 開始使用

cnpm run dev

  • webpack中route.js負(fù)責(zé)前端的路由分配，這里先來開始一個(gè)Login界面的搭建。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 本文為2016年11月9日，『前端之巔』微信群在線分享活動(dòng)總結(jié)整理而成，轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭處注明來自『前端之巔』公眾...
    尾尾閱讀 10,870評(píng)論 3贊 32
  • 333 到了2.0以后，有哪些變化? 1.在每個(gè)組件模板，不在支持片段代碼組件中模板:之前:<template> ...
    magic_pill閱讀 291評(píng)論 0贊 0
  • 你相信愛情會(huì)有心有靈犀嗎，在合適的時(shí)間，合適的地點(diǎn)，我喜歡你恰好你也喜歡我。 陽光下的他美好如畫，一襲白衫，陽...
    玲瓏相思Y閱讀 262評(píng)論 0贊 0
  • 每一年的結(jié)束也是下一年的開始，看似又是一個(gè)春夏秋冬的輪回，實(shí)則是一個(gè)滾動(dòng)的車輪，以固定的形式悄然改變著一切。 兒時(shí)...
    今覺讀書樂閱讀 479評(píng)論 0贊 1
  • 一 飽醉豚喜歡說，互聯(lián)網(wǎng)上能夠賺錢的生意，主要是三個(gè)G，分別是賭博（Gambling）、游戲（Game）和Girl...
    劉淼閱讀 3,327評(píng)論 11贊 45

友情鏈接更多精彩內(nèi)容