Element ui 的使用

最近在研究vue，發現有一個組件|Element裏面的小插件簡直太棒了。

推薦給你們網址，須要的能夠進去轉一圈： http://element.eleme.io/#/zh-CN/component/quickstart

能夠引入整個 Element，若是擔憂整個css樣式太多，能夠根據須要僅引入部分組件。下面我就以DatePicker 日期選擇器爲例子，接下來讓咱們開始吧。

一、首先，我們先來安裝vue-cli 的腳手架,它能夠自動生成目錄

　　npm install vue-cli -g

二、安裝完成後，生成工程

　　vue init webpack vue2

　　這時會提示：（能夠默認，能夠修改）(Y)

　　project name:項目名稱(Y)

　　description:描述(Y)

       Author:做者名稱(Y)

　　Eslint to lint your code?是否安裝代碼風格檢查器(Y)

　　Setup unit tests with karma + mocha?   是否進行單元測試？(N)

　　Setup e2e tests with Nightwatch? 這個也是測試   （N）

　　

　　這時會出現一些提示，能夠回車，也能夠（ctrl+c）,

      

　　進入vue2目錄，按照他的提示，運行

　　　　cd vue2

　　　　npm install 

　　　　npm run dev

　　打開瀏覽器，運行http://localhost:8080/#/，就能夠看到如下界面了：

 　　

　　注：若是運行出錯，報錯：

　　

　　是端口被佔用的問題：能夠修改一下

 　　　config->index.js的port的值

　　　　

 

三、大的框架搭好了，接下來，讓咱們按照Element的文檔，配置DatePicker 日期選擇器

　　（1）藉助 babel-plugin-component，咱們能夠只引入須要的組件，以達到減少項目體積的目的。

　　　　首先，安裝 babel-plugin-component：（安裝完後，記得從新運行。）

　　　　npm install babel-plugin-component -D

　（1）修改.babelrc文件

　　　　{ "presets": [ ["es2015", { "modules": false }] ],

　　　　"plugins": [["component", [ { "libraryName": "element-ui", "styleLibraryName": "theme-default" } ]]]

　　　　 }

　　　　

　　（3）修改main.js文件　　　（還有更多的其餘插件，你們能夠參照文檔   http://element.eleme.io/#/zh-CN/component/quickstart ）　　　

　　　　　　import { DatePicker } from 'element-ui'

　　　　　　Vue.use(DatePicker)

　　　　　　

（4）修改hello.vue

　　能夠按照文檔，直接找到對應的組件datepicker　　

   <div class="block">
     <span class="demonstration">月</span>
     <el-date-picker
       v-model="value4"
       type="month"
       placeholder="選擇月">
     </el-date-picker>
  </div>

        打開顯示代碼，直接複製就ok了。

 

 （完成）

　　　　

謝謝你們的支持~~~有問題能夠問呦，互相學習。哈哈