一 简介
- 是一套基于 Vue 的网站组件库,用于快速构建网页,Element 提供了很多组件(组成网页的部件)供我们使用。
- 学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可。其官网地址:https://element.eleme.cn/#/zh-CN
- 所有的组件只需要把官方网站上的代码复制过来就好了,再稍加熟悉一下各部分代表什么,每个组件的最后有对每个属性的解释
- 分页:
二 入门
- 当前工程project1的路径下打开cmd,输入“npm install element-ui@2.15.3”,安装elementUI组件库
- 在mian.js中引入elementUI组件库
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
- 在views文件夹中新建文件夹element文件夹用于存放引用的组件,新建ElementVue.vue.将选择的组件代码复制到.vue文件中
- 在默认的app.vue中引入组件vue
- 修改Element中的代码
- 异步数据加载:
在 vue 项目中,对于 axios 的使用,分为如下 2 步:1. 安装 axios: npm install axios2. 需要使用 axios 时,导入axios: import axios 'axios'(.vue的script中)
3.挂数据
mounted(){ axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list") .then(resp=>{ this.tableData=resp.data.data; //响应数据赋值给数据模型 }); }