推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
CDN:
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.引入Element
完整引入:
在 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)
});
3.应用
-
Element UI中图片地址处理
-
<template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="title" label="小区详情" width="380"> </el-table-column> <el-table-column prop="from" label="来源"> </el-table-column> <el-table-column prop="imgSrc" label="图片"> <template slot-scope="scope"> <el-image :src="'http://120.48.109.174:8081' + scope.row.imgSrc"> </el-image> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: 'Houses', data() { return { tableData: [], } }, created() { this.getList(); }, methods: { getList() { this.axios.get("http://120.48.109.174:8081/home/news?area=AREA%7C88cff55c-aaa4-e2e0").then(res => { console.log(res); let list = res.data.body; this.tableData = list; }) }, }, } </script>
4.其他组件库
移动端常用UI组件库Vant (https://vant-contrib.gitee.io/vant/#/zh-CN/)
Cube UI (https://didi.github.io/cube-ui/#/zh-CN)
Mint UI (http://mint-ui.github.io/#!/zh-cn)
PC端常用UI组件库Elment UI (https://element.eleme.cn/#/zh-CN)
IView UI (https://iview.github.io/)