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了。

 

 （完成）

　　　　

谢谢你们的支持~~~有问题能够问呦，互相学习。哈哈