vue学习（2）-Element组件使用

• 参考Element官网：http://element.eleme.io/#/zh-CN/component/installation

使用element ui进行开发，能vue完美的结合在一起。反正他们是这么说的🙄️

1. npm安装element

npm i element-ui -S

2. 引入element

• 在main.js中添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

• 按需引入

  • 安装babel-plugin-component，只引入需要的组件，以达到减小项目体积的目的。

  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)
   /* 或写为
    * Vue.use(Button)
    * Vue.use(Select)
   */
  
   new Vue({
     el: '#app',
     render: h => h(App)
  })
  

• 开始使用

cnpm run dev

• webpack中route.js负责前端的路由分配，这里先来开始一个Login界面的搭建。