element-ui简单使用

element-ui 简介

名词说明：

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
• Element-UI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
• npm: Nodejs下的包管理器。
• webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
• vue-cli: 用户生成Vue工程模板。
  官方文档地址： [http://element-cn.eleme.io/#/zh-CN/component/installation)

安装与使用

1、安装node.js

node.js在官网下载后直接下一步即可

2、安装npm

npm config set prefix  "D:\nodejs\node_global" //设置全局地址
npm config set cache "D:\nodejs\node_cache"
npm config set registry=http://registry.npm.taobao.org //配置镜像站
npm install npm -g // 更新npm

3、安装vue

npm install vue -g
npm install vue-router -g
npm install vue-cli -g // 安装vue脚手架

4、新建vue模板工程

vue init webpack demo //VUE脚手架创建项目，一直enter到工程创建
cd demo // 进入创建的工程
npm install --save axios    //主要用来发送请求，可理解为ajax
npm install element-ui -S  //element-ui框架
npm install qs -S　　//包装传回后台的数据防止接收不到
npm install vue-router  //vue路由

5、添加element-ui引用
修改工程src下的main.js为以下内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

启动项目

npm run dev

至此，vue工程建立成功，引入element-ui框架，开发同事可以在各种模块中添加element-ui组件进行开发

5、element-ui使用

下面演示element-ui使用

1、修改\src\components\HelloWorld.vue文件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <el-input v-model="input" placeholder="请输入内容" style="width: 100px;"></el-input>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="text">文字按钮</el-button>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <span class="demonstration">带快捷选项日期选择控件</span>
    <el-date-picker
      v-model="datavalue"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions1">
    </el-date-picker>
  <div style=" width: 800px;margin-left: 500px">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      radio: '2',
      input: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value: '',
      datavalue: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}

</script>

<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .demo {
    display: inline;
    margin: 40px;
    border: solid;

  }
</style>

2、启动项目

npm rum dev

3、打开 本地项目地址
如图，组件引入成功，开始你的征程吧…

如果你发现错误，请指出，如果你觉得有帮助，请点赞！