本文介绍了如何使用Vue.js、ElementUI和axios开发一个简单的单页应用。Vue是一个流行的渐进式JavaScript框架，ElementUI是提供丰富组件的UI库，axios则是一个高效的HTTP库。通过结合这三个工具，即便是后端开发者也能轻松创建出界面友好的应用。文章中展示了如何集成这些工具，并给出了包含用户列表展示、查询、编辑和状态管理等功能的代码示例。
订阅专栏
最近Vue已然比较火，公司后台系统的前端也在逐渐改造成Vue。
Vue一个渐进式JavaScript框架，官网：Vue.js；
ElementUI：饿了么开源的前端UI组件库，里面很多组件可以直接拿来使用，很方便，有了它，后端程序猿也能开发出好看的页面了！
官网： https://element.eleme.cn/#/zh-CN/component/installationElement - The world's most popular Vue UI framework
axios：易用、简洁且高效的http库，官网：axios中文网|axios API 中文文档 | axios。
接下来，使用Vue、ElementUI、axios来开发一个简单小应用。
先上代码index.html：
<!DOCTYPE html>
<html>
<head>
<title>Vue + ElementUI + axios 开发单页应用</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<el-tabs type="border-card">
<el-tab-pane label="用户列表">
<el-form :inline="true" ref="form" :model="searchForm" label-width="80px">
<el-form-item label="姓名:">
<el-input v-model="searchForm.fullName" size="small" style="width: 150px" />
</el-form-item>
<el-form-item label="">
<el-button type="primary" size="small" icon="el-icon-search" @click="search">查询</el-button>
</el-form-item>
<el-form-item label="">
<el-button type="info" size="small" icon="el-icon-delete" @click="clearSearch">重置</el-button>
</el-form-item>
</el-form>
<el-table :data="searchList" border>
<el-table-column prop="id" label="id" width="80">
</el-table-column>
<el-table-column prop="account" label="账户" width="120">
</el-table-column>
<el-table-column prop="fullName" label="姓名">
</el-table-column>
<el-table-column prop="sex" label="性别">
</el-table-column&
最低0.47元/天 解锁文章
扫一扫
2033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
