项目-使用element-ui

项目-使用element-ui

• 安装/命令行中

# --save 保存到生产依赖 -S   
# --save-dev  保存到开发依赖 -D
# npm 5.0 版本以上省略  默认安装到生产依赖
npm i element-ui -S

• 使用/main.js中

import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

+Vue.use(ElementUI);

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

• 验证：（App.vue)中

<div id="app">
    App <el-button type="success">成功按钮</el-button>
</div>

附：

使用示例：（登录模块-绘制表单）

分析：

<!-- el-form 表单容器 -->
<!-- :model="form" form数据  表示整个表单内所有元素的数据集合 -->
<!-- label-width="80px" 统一设置 文章描述 宽度 -->
<el-form ref="form" :model="form" label-width="80px">
  <!-- el-form-item 表单项 label="活动名称" 文字描述-->   
  <el-form-item label="活动名称">
    <!-- 表单元素 -->  
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

最终代码：

 <!-- 卡片 element-ui 组件 -->
    <el-card class="my-card">
      <img src="../../assets/images/logo_index.png" alt="">
      <el-form :model="loginForm">
        <el-form-item>
          <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.code" placeholder="请输入验证码" style="width:236px;margin-right:10px"></el-input>
          <el-button>发送验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-checkbox :value="true">我已阅读并同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width:100%">登 录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

总结：使用element-ui组件的方式

• 根据需要找组件
• 看组件的示例，符合需求。
  • 找到：
    • 示例代码
    • 分析代码
    • 自己需求使用
  • 参考提供的事例demo
    • 找符合要求的例子
    • 分析它的源代码
    • 遇见不认识的属性 函数 事件
    • 提供详细的说明文档 属性说明 函数说明 事件说明
  • 没找到：
    • 参考组件使用文档
      • 属性
      • 事件
      • 函数