搭建前端项目
脚手架
1.创建一个static web项目
2.基于脚手架安装webpack环境
vue init webpack
路由前和本身yes 后no
3.运行
npm run dev
如果半路失败了，你可以直接在控制台输入：npm install
如果查看js有报错 请alt + 回车，切换es6语法
如果打开Vue页面，显示的是文本 需要在setting安装Vue插件
自己写第一个单页面
1.在src/components 里面copy + edit
2.在index.js中引入你自定义的组件
import HelloWorld2 from '@/components/HelloWorld2'
3.配置路由规则
{
path: '/hello',
name: 'test',
component: HelloWorld2
}
浏览器访问
单页面组件
见文档
单页面组件的编写和使用步骤
一：单页面组件包含三个部分:
1. html
<template>
2.css
<style scoped>
3.js(重要)
export default { 里面相当于new vue里的内容
name: 'test',
data () {
return {
msg: '我自己写的第一个组件'
}
},
methods:{
},
mounted(){
},
components:{
}
}
二：如何单页面
将当前页面交给路由使用
1.在路由中引入我们写好的组件
2.配置路由规则
ElimentUi
入门
基于vue前端的ui框架, 有很多已经用vue开发好的可以直接引用的组件。我们可以使用这些组件快速开发前端项目。
1.安装
ctrl+c 终止批处理操作吗(Y/N)? y
npm i element-ui -S
2.引用
在main.js中Vue核心组件下面写入以下内容:
import ElementUI from ‘element-ui’; //引入核心js组件
import ‘element-ui/lib/theme-chalk/index.css’;//引入依赖的样式
Vue.use(ElementUI) //告诉使用
1.写component
2.路由引入组件
3.路由配置访问路径
npm run dev
浏览器访问
table案例
:data：绑定数据 v-model
el-table-column ：一列
prop：申明属性
label：表头/标签
保留一列宽度不写,以撑满对应行
mounted加载函数
Mockjs
是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
1.使用mockjs来mock数据
2.需要将我们模拟的数据交给项目使用
0.通过页面中的钩子函数，发送请求从mock中拿数据
0.将mock返回的数据绑定给data中的属性tableData
1.下载安装mock.js
npm install mockjs
0.根目录创建demo1.js，加入如下代码 即1.使用mockjs来mock数据
let Mock=require('mockjs')
let data=Mock.mock({
// name|规则:值
'list|5':[
{
'id':1,
'name':'测试'
}
]
})
console.log(JSON.stringify(data))
0.执行命令 node demo1.js
2.根目录新创建一个文件夹mock,然后文件夹下创建tableMock.js, tableMock.js里面copy代码, 用来模拟数据
import Mock from 'mockjs' // 引入mock 即1 使用mockjs来mock数据
var dataList = []
for (var i = 0; i < 15; i++) {
dataList.push(Mock.mock({ //随机生成数据放入dataList
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}))
}
//index开始的位置 size 每页显示的条数 list 总体数据
function pagination(index, size, list) {
return list.slice((index-1)*size, index*size) //截取,用来分页,含前不含后
}
// 获取用户列表
Mock.mock(new RegExp('/user/list'), 'post', (opts) => { //模拟接收ajax请求的后端接口
var list =dataList;
console.log(opts.body)
var index = JSON.parse(opts.body).page;
var size = 10;
var total = list.length
list = pagination(index, size, list) //分页参数(currentPage,pageSize)
return {
'total': total, //回调返回结果
'data': list
}
})
3.将自己mock的数据交给项目管理
main.js 引入 import tableMcock from “…/mock/tableMock”
然后需要使用axios来发送请求，获取模拟数据
axios
1.安装axios
npm install axios --save
2.引用axios
a.局部使用: 在script脚本中引入
import axios from "axios"
b.全局使用: 在main.js中引入
import axios from "axios"
//配置axios的全局基本路径 t
axios.defaults.baseURL='http://localhost:8080'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
代码使用：
<script>
export default {
name: 'test',
data(){
return {
tableData:[],//页面初始化的时候，不应该有数据
total:0 //补充
}
},
methods:{
getTables(){
this.$http.post("/user/list",{"currentPage":1})
.then(result=>{
result = result.data;
this.tableData = result.rows; //赋值
this.total = result.total;
})
.catch(result=>{
alert("报错了")
})
}
},
mounted(){ //在页面加载完成后触发 一般用来加载数据（从后端去拿数据）
this.getTables(); //不要在这里发送ajax请求去获取数据
}
}
</script>
EasyMock/fastmock
在线 mock 服务
department列表页实现
department.vue
<template>
<div class="hello">
<el-table
:data="rows"
height="500"
border
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="phone"
label="电话"
width="160">
</el-table-column>
<el-table-column
prop="email"
label="邮箱"
width="280">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="400">
</el-table-column>
<el-table-column
fixed="right"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="big">查看</el-button>
<el-button type="text" size="big">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
align="right"
background
layout="prev, pager, next"
:total=total
:page-size="pageSize"
:current-page="currentPage"
@current-change="getDepartments"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: 'department',
data () {
return {
rows:[],
total:0,
pageSize:10,
currentPage:1
}
},
methods:{
/*handleCurrentPage(currentPage) {
this.currentPage = currentPage;
this.getDepartments();
},*/
getDepartments(currentPage){
if(currentPage){
this.currentPage = currentPage;
}
this.$http.post("/department/list",{"currentPage":this.currentPage})
.then(result=>{
if(result){
result = result.data;
this.rows = result.rows;
this.total = result.total;
}
}).catch(result=>{})
}
},
mounted(){
this.getDepartments();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloWorld2 from '@/components/HelloWorld2'
import myButton from '@/components/myButton'
import myTable from '@/components/myTable'
import department from '@/components/department'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: 'test',
component: HelloWorld2
},
{
path: '/myButton',
name: 'myButton',
component: myButton
},
{
path: '/myTable',
name: 'myTable',
component: myTable
},
{
path: '/department',
name: 'department',
component: department
}
]
})
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'
Vue.config.productionTip = false
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)
/*全局引入我们的mock数据*/
import tableMcock from "../mock/tableMock"
import axios from 'axios'
//配置axios的全局基本路径 t
axios.defaults.baseURL='http://localhost:8080'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
tableMock.js
import Mock from 'mockjs' // 引入mock
var dataList = []
for (var i = 0; i < 100; i++) {
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{10}$/,
'email': '@email',
'address': '@county(true)',
'date': '@date("yyyy-MM-dd")'
}))
}
//开始的位置 size 每页显示的条数 list 总结数据
function pagination(currentPage, pageSize, list) {
// index = 2 size 10 list.slice(10,20)
return list.slice((currentPage-1)*pageSize, currentPage*pageSize)
}
// 获取用户列表
Mock.mock(new RegExp('/department/list'), 'post', (opts) => {
var list =dataList;
console.log(opts.body)
var currentPage = JSON.parse(opts.body).currentPage;
var pageSize = 10;
var total = list.length
list = pagination(currentPage, pageSize, list)
return {
'total': total,
'rows': list
}
})
测试：http://localhost:8080/#/department文章来源：https://www.toymoban.com/news/detail-537271.html
分页流程分析
文章来源地址https://www.toymoban.com/news/detail-537271.html
到了这里，关于B064-基础环境-前端环境 单页面组件 ElementUI Mock axios的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
