elementui入门
1.前端服务器搭建
(1)创建一个static web project
(2) 安装 npm install -g vue-cli
(3) vue init webpack 项目名
(4)cd 项目名
npm run dev 运行服务
完成上面步骤后,就将vue.js项目放入到前端服务器中运行了。如果安装速度慢可以使用淘宝镜像代理:npm config set registry https://registry.npm.taobao.org
2.element安装
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 ,是一种很好的前端开发,可以很好的用来实现前后端分离
(1)安装
npm i element-ui -S
(2)引入elementui 在 main.js
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI) //引用
3.配置main.js(所有配置写在一起的,看的时候注意区分)
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
import axios from 'axios'//引入axios请求
import UserMock from './userMock.js'//引入假数据源
//配置axios的全局基本路径
axios.defaults.baseURL=''
//全局属性配置,在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
Vue.use(ElementUI) //引用elementui
//上面这行代码的意思 是阻止显示生产模式的消息
Vue.config.productionTip = false//默认配置false /* eslint-disable no-new */
new Vue({//挂载index中所有的路由和组件
el: '#app',
router,
components: { App },
template: '<App/>'
})
1.element组件使用 效果: 客户端(浏览器)输入地址-----> 根据路由进入相应的组件中---------->vue界面渲染,展示
步骤1:新建一个vue文件
<template>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="您好">
<p>欢迎您</p>
</el-dialog>
</div>
</template> <script>
export default {
name: 'elementUi01',
data () {
return {
msg: '欢迎来到vue',
visible:false
}
}
}
</script>
步骤2:在index.js中配置路由(浏览器访问的路径,以及组件的引入)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'//引入界面模板
import Elementui from '@/components/_01elementui' Vue.use(Router) export default new Router({//将路由导出到需要挂载的文件中,main.js
routes: [
{
path: '/',//访问路径
name: 'HelloWorld',
component: HelloWorld//组件名与上面导入的名称一致
},
{
path: '/_01elementui',
name: '_01elementui',
component: Elementui
},
上面只是一个简单的引入,其他还有很多组件和样式的使用,如el-button 按钮、el-tree 树形、el-table表格、el-form表单、el-pagination分页、el-container容器、el-layout布局
el-tabs页签 选项卡、el-dialog对话框、el-alert 提示框等,使用的方式一样,只是界面展示内容不同,就不再重复了。
4.mockjs:前端工程师 用来模拟的数据
安装mockjs
(1) npm install mockjs
(2)userMock.js(假数据生成的文件)文件引用 mockjs
let Mock=require('mockjs') ;
(3)在js生成数据 ,拦截axios请求(了解)返回自己生成的假数据,具体代码如下
测试:
let Mock=require('mockjs')
//定义一个数组
var dataList = [];
//循环16次生成数据,并将数据放入到数组中,得到一个装有假数据的集合dataList
for(var i=0;i<16;i++){
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}));
}
//分页,index是起始数据,size带表条数index*size,带表结束数据
function pagination(index, size, list){
return list.slice((index-1)*size,index*size);
}
//拦截axios请求opts,前端传入的参数 para new RegExp('/user/list',拦截的路径
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
//把上面得到的假数据赋值给list集合
var list =dataList;
console.log(opts.body)
//取出传递过来的参数的当前页
var index = JSON.parse(opts.body).page; //3
//写死的一页条数
var size = 10;
//总条数
var total = list.length
//调用分页方法,分页
list = pagination(index, size, list)
//拦截ajax请求后将假数据的结果返回
return {
'total': total,
'data': list
}
})
5.使用axios发送请求完成(vue.crud)
安装axios
1.cd 当前项目名
2.npm install axios --save
测试:具体代码如下
<template>
<div>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-form-item>
<el-input placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--users就是前端页面展示内容的数据-->
<el-table
:data="users"
style="width: 100%"
border
height="450px"
> <el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="phone"
label="电话">
</el-table-column>
<el-table-column
prop="createTime"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-col :span="24" class="toolbar">
<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
</el-pagination>
</el-col>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
total:0,
page:1
} },
methods:{
getUsers(){
//这个是对象 {key:value}
let para = {
page:this.page
} //加载数据
//发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
//res就是假数据返回的结果
this.$http.post('/user/list',para).then(res=>{
console.log(res);
//自动假数据封装成一个data对象
//将加数据取出后赋值给当前页面中的users,然后就可以展示了
this.users = res.data.data;
//
this.total = res.data.total;
});
},
//监听当前页面的改变
handleCurrentChange(val){
//currentPage
console.log(val);
//把当前页 赋值给page这个字段
this.page = val;
this.getUsers();
}
},
mounted(){
//页面加载完之后执行的方法
this.getUsers();
}
};
</script>
elementui入门的更多相关文章
- element-ui入门
element-ui入门 element-ui是一个ui库,它不依赖于vue.但是却是当前和vue配合做项目开发的一个比较好的ui框架. Layout布局(el-row.el-col) element ...
- elementui入门以及nodeJS环境搭建
1. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...
- ElementUI入门和NodeJS环境搭建
1. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它 ...
- 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)
[原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...
- elementUI+nodeJS环境搭建
一. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- 基于vue-cli、elementUI的Vue超简单入门小例子
- 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...
随机推荐
- ZeroC ICE的远程调用框架 ASM与defaultServant,ServantLocator
ASM与defaultServant,ServantLocator都是与调用调度(Dispatch)相关的. ASM是ServantManager中的一张二维表_servantMapMap,默认Ser ...
- drf序列化组件之视图家族
一.视图家族的分类 1.导入分类 from rest_framewok import views, generics, mixins, viewsets views:视图类 两大视图类:APIVi ...
- PHP-会话控制Cookie和Session
会话控制:就是为了我们在访问页面和页面之间的跳转是,能够识别到你的登录状态,已经你的登录时长等 在php的会话控制当中,涉及到两个概念Cookie和Session Cookie 会话控制 原理:在登录 ...
- 2018092609-2 选题 Scrum立会报告+燃尽图 02
此作业要求参见:[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组情况组长:迟俊文组员:宋晓丽 梁梦瑶 韩昊 刘信鹏队名 ...
- vue 父子组件传值,兄弟组件传值
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...
- python--数字灯管
import turtle import time def drawLine(draw): #绘制单段数码管 turtle.pendown() if draw else turtle.penup() ...
- Spring-boot(一)通过向导快速创建Spring-boot项目
通过向导快速创建Spring-boot项目 创建步骤: 选择Spring Initializr 填写组织和模块名 选择对应的模块 注:这里左侧的模块比较多,玩家可以根据自己的实际需要自由选择,此处暂时 ...
- scrapy实现自动抓取51job并分别保存到redis,mongo和mysql数据库中
项目简介 利用scrapy抓取51job上的python招聘信息,关键词为“python”,范围:全国 利用redis的set数据类型保存抓取过的url,现实避免重复抓取: 利用脚本实现每隔一段时间, ...
- sortColors
Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...
- 向mysql数据表中插入数据失败的原因
1.案例代码: $sql1="insert into content(category,subject,content,username,release_date) values('{$ca ...