前端技术栈：5分钟入门VUE+Element UI

前言

2021了，VUE都出3.0了，还不开始学习VUE？那不是一个全栈攻城狮的自我修养，虽然VUE出3.0了，但是入门还是建议VUE2.0 + Element UI，毕竟3.0还要等养肥了在学，现在教程太少，学习2.0之后在学3.0也能更加理解为什么要这么去改进

VUE是啥？简单来说就是一个JS框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

此处可以看VUE入门视频：https://learning.dcloud.io/#/?vid=0

本教程是给有一点基础的人进行VUE的快速入门，搭建一个单页面的增删改查。

效果演示

[图片上传失败...(image-56de9f-1612435593826)]

Nodejs

现在的前端都是模块化开发了，需要Nodejs的支持，到官网下载Nodejs一路Next即可安装，官网地址：https://nodejs.org/en/

安装好后打开cmd命令行窗口，输出node -v，如果有版本号说明安装成功，同样输入npm -V如果有版本号说明npm安装成功(npm为nodejs的包管理器)

json-server

在实战VUE之前先了解下json-server，顾名思义json服务器，在我们的入门实战中，不想引入太过于复杂的后端环境但是又想体验模块化的前端整个HTTP请求的完整过程，所幸Nodejs提供了json-server工具，方便快速的搭建简易服务器。

安装json-server

npm i json-server -g

i表示install，即安装
-g表示global，即全局安装

运行json-server

随便找个目录，创建一个db.json文件，内容如下

1{
2  "data": []
3}

然后在该目录下打开命令行窗口，执行

json-server --watch db.json

回显如下说明成功

1 \{^_^}/ hi!
2
3  Loading db.json
4  Done
5
6  Resources
7  http://localhost:3000/data
8
9  Home
10  http://localhost:3000
11
12  Type s + enter at any time to create a snapshot of the database
13  Watching...

测试json-server

http://localhost:3000/data是接口地址，直接用curl发送POST,DELETE,PATCH,GET请求模拟增删改查，只要测试一个通过了即可，其他的感兴趣可以测试下。

增(POST)

curl "http://127.0.0.1:3000/data" -H "Content-Type: application/json" -d "{\"name\":\"zhangsan\"}" -X POST

-H表示增加请求头
-d后面是数据
-X POST表示用POST请求

返回值如下

1{
2  "name": "zhangsan",
3  "id": 2
4}

再看一下我们刚才创建的db.json文件，里面多了我们刚才POST的数据。实际上就是存在了这个文件里面。

改(PATCH)

注意改的时候url后面跟上id

curl "http://127.0.0.1:3000/data/2"  -H "Content-Type: application/json" -d "{\"name\":\"lisi\"}"  -X PATCH

返回如下

1{
2  "name": "lisi",
3  "id": 2
4}

说明修改成功

查(GET)

curl "http://127.0.0.1:3000/data"  -X GET

直接查全部

1[
2  {
3    "name": "lisi",
4    "id": 2
5  }
6]

删(DELETE)

删除id为2的数据

curl "http://127.0.0.1:3000/data/2" -X DELETE

返回如下

{}

VUE实战

全局安装vue-cli

vue-cli是vue的脚手架，所谓脚手架说白了就是快速创建模板化的项目，不用每次创建项目都去重复那些固定化的操作，注意我们安装的是vue2.0的脚手架

npm install -g vue-cli

不要和vue3.0的混淆，vue3.0是npm install -g @vue/cli，此处不需要安装3.0，否则会冲突

全局安装webpack

webpack可以将vue项目打包成静态文件

npm install webpack -g

vue 2.0 + Element UI 项目搭建

基础版本搭建

随便找个目录输入如下命令

1# 初始化一个叫做vue2_elementui的项目，使用webpack模板
2vue init webpack-simple vue2_elementui
3
4# 进入项目目录
5cd vue2_elementui
6
7# 构建
8npm install
9
10# 运行
11npm run dev

经过上面的操作，打开http://localhost:8080/如果能看到下面的页面说明搭建成功了

前端技术栈：5分钟入门VUE+Element UI

引入Element UI

上面的先CTRL + C退出，下面安装Element UI依赖

1# 安装Element UI
2npm install element-ui -S
3
4# 顺便安装vue-router 和 vue-resource，前者是路由，后者是执行Ajax请求用到的依赖
5npm install vue-router vue-resource --S
6
7# 安装moment，事件选择组件
8npm install moment -S

-S表示只在该项目下安装，不是全局安装

打开main.js，引入上面安装的组件

1import Vue from 'vue'
2import App from './App.vue'
3
4import ElementUI from 'element-ui'
5import 'element-ui/lib/theme-chalk/index.css'
6Vue.use(ElementUI)
7
8import axios from 'axios'
9import moment  from 'moment'
10
11Vue.filter('moment', function (value, formatString) {
12  formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
13  return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
14});
15
16Vue.prototype.$axios = axios
17
18new Vue({
19  el: '#app',
20  render: h => h(App)
21})

打开APP.vue，修改如下

1<template>
2  <div id="app">
3     <img src="./assets/logo.png">
4    <div>
5      <el-button @click="startHacking">element ui 安装成功</el-button>
6    </div>
7  </div>
8</template>
9<script>
10export default {
11  methods: {
12    startHacking () {
13      this.$notify({
14        title: 'It works!',
15        type: 'success',
16        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
17        duration: 5000
18      })
19    }
20  },
21  components:{
22    UserInfo
23  }
24}
25</script>
26
27<style>
28#app {
29  font-family: Helvetica, sans-serif;
30  text-align: center;
31}
32</style>

最后再次运行

npm run dev

如果出现下面的页面，而且点击页面会出现右边的提示框，说明Element UI安装成功

前端技术栈：5分钟入门VUE+Element UI

简单增删改查页面

用户信息组件UserInfo.vue

1<template>
2  <div class="info">
3    <h1>用户信息管理界面</h1>
4    <el-row>
5      <el-col :span="20" :push='2'>
6        <div>
7          <el-form :inline="true">
8            <el-form-item style="float: left" label="查询用户信息:">
9              <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
10            </el-form-item>
11            <el-form-item style="float: right">
12              <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
13            </el-form-item>
14          </el-form>
15        </div>
16        <div class="table">
17          <el-table
18            :data="searchUserinfo(keyUser)"
19            border
20            style="width: 100%">
21            <el-table-column
22              type="index"
23              label="序号"
24              align="center"
25              width="60">
26            </el-table-column>
27            <el-table-column
28              label="日期"
29              align="center"
30              width="120">
31              <template slot-scope="scope">
32                <span>{{ scope.row.date | moment}}</span>
33              </template>
34            </el-table-column>
35            <el-table-column
36              label="姓名"
37              align="center"
38              width="100">
39              <template slot-scope="scope">
40                <span>{{ scope.row.name }}</span>
41              </template>
42            </el-table-column>
43            <el-table-column
44              label="邮箱"
45              align="center"
46              width="160">
47              <template slot-scope="scope">
48                <span>{{ scope.row.email }}</span>
49              </template>
50            </el-table-column>
51            <el-table-column
52              label="标题"
53              align="center"
54              width="160">
55              <template slot-scope="scope">
56                <span>{{ scope.row.title }}</span>
57              </template>
58            </el-table-column>
59            <el-table-column
60              label="评价"
61              align="center"
62              width="200">
63              <template slot-scope="scope">
64                <span>{{ scope.row.evaluate }}</span>
65              </template>
66            </el-table-column>
67            <el-table-column
68              label="状态"
69              align="center"
70              width="160">
71              <template slot-scope="scope">
72                <span>{{ scope.row.state }}</span>
73              </template>
74            </el-table-column>
75            <el-table-column label="操作" fixed="right">
76              <template slot-scope="scope">
77                <el-button
78                  size="mini"
79                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
80                <el-button
81                  size="mini"
82                  type="danger"
83                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
84              </template>
85            </el-table-column>
86          </el-table>
87        </div>
88      </el-col>
89    </el-row>
90    <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
91    <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
92  </div>
93</template>
94
95<script>
96import AddUser from './AddUser'
97import EditUser from './EditUser'
98export default {
99  name: 'info',
100  data () {
101    return {
102      tableData:[],
103      dialogEdit:{
104        show:false,
105      },
106      dialogAdd:{
107        show:false
108      },
109      keyUser:"",
110      form:{    //编辑信息
111        date:'',
112        name:'',
113        email:'',
114        title:'',
115        evaluate:'',
116        state:''
117      },
118    }
119  },
120  methods:{
121    getUserInfo() {
122      this.$axios.get('http://localhost:3000/data').then(res => {
123        console.log(res)
124        this.tableData = res.data
125      })
126    },
127    hanldeAdd(){  //添加
128      this.dialogAdd.show = true;
129    },
130    handleEdit(index,row){  //编辑
131      this.dialogEdit.show = true; //显示弹
132      this.form = {
133        date:row.date,
134        name:row.name,
135        email:row.email,
136        title:row.title,
137        evaluate:row.evaluate,
138        state:row.state,
139        id:row.id
140      }
141      console.log(row)
142    },
143    handleDelete(index,row) {
144      // 删除用户信息
145      this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
146        this.$message({
147          type:"success",
148          message:"删除信息成功"
149        })
150        this.getUserInfo()    //删除数据，更新视图
151      })
152    },
153    searchUserinfo(keyUser) {
154      return this.tableData.filter((user) => {
155        if(user.name.includes(keyUser)) {
156          return user
157        }
158      })
159    }
160  },
161  created(){
162    this.getUserInfo()
163  },
164  components:{
165    AddUser,
166    EditUser
167  }
168}
169</script>
170
171<!-- Add "scoped" attribute to limit CSS to this component only -->
172<style scoped>
173h1{
174  font-size: 30px;
175  color: #333;
176  text-align: center;
177  margin: 0 auto;
178  padding-bottom: 5px;
179  border-bottom: 2px solid #409EFF;
180  width: 300px
181}
182</style>

这是列表主组件，查询和展示用的，长下面这样

[图片上传失败...(image-e10941-1612435593825)]

其中引入了AddUser组件和EditUser组件

添加用户组件AddUser.vue

1<template>
2  <div class="hello">
3    <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show">
4      <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
5        <el-form-item label="日期" prop="date">
6          <el-date-picker
7            v-model="formDate.date"
8            type="date"
9            placeholder="选择日期">
10          </el-date-picker>
11        </el-form-item>
12        <el-form-item label="姓名" prop="name">
13          <el-input v-model="formDate.name"></el-input>
14        </el-form-item>
15        <el-form-item label="邮箱" prop="email">
16          <el-input v-model="formDate.email"></el-input>
17        </el-form-item>
18        <el-form-item label="标题" prop="title">
19          <el-input v-model="formDate.title"></el-input>
20        </el-form-item>
21        <el-form-item label="评价" prop="evaluate">
22          <el-input v-model="formDate.evaluate"></el-input>
23        </el-form-item>
24        <el-form-item label="状态" prop="state">
25          <el-input v-model="formDate.state"></el-input>
26        </el-form-item>
27      </el-form>
28      <div slot="footer" class="dialog-footer">
29        <el-button @click="dialogAdd.show = false">取 消</el-button>
30        <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button>
31      </div>
32    </el-dialog>
33  </div>
34</template>
35
36<script>
37export default {
38  name: 'AddUser',
39  props:{
40    dialogAdd:Object
41  },
42  data () {
43    return {
44      formDate:{
45        date:'',
46        name:'',
47        email:'',
48        title:'',
49        evaluate:'',
50        state:''
51      },
52      formrules:{
53        date:[{required:true,message:"日期不能为空",trigger:"blur"}],
54        name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
55        email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
56      }
57    }
58  },
59  methods:{
60    dialogFormAdd(formdong) {
61      this.$refs[formdong].validate((valid) => {
62        if (valid) {
63          this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
64            this.$message({
65              type:"success",
66              message:"添加信息成功"
67            })
68            this.dialogAdd.show = false;
69            this.$emit('update');
70
71          })
72          this.formDate  = ""
73        } else {
74          console.log('error submit!!');
75          return false;
76        }
77      })
78    }
79  }
80}
81</script>
82
83<!-- Add "scoped" attribute to limit CSS to this component only -->
84<style scoped>
85
86</style>

这是添加用户信息组件

前端技术栈：5分钟入门VUE+Element UI

编辑用户组件EditUser.vue

1<template>
2  <div class="hello">
3    <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show">
4      <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
5        <el-form-item label="日期" prop="date">
6          <el-date-picker
7            v-model="form.date"
8            type="date"
9            placeholder="选择日期">
10          </el-date-picker>
11        </el-form-item>
12        <el-form-item label="姓名" prop="name">
13          <el-input v-model="form.name"></el-input>
14        </el-form-item>
15        <el-form-item label="邮箱" prop="email">
16          <el-input v-model="form.email"></el-input>
17        </el-form-item>
18        <el-form-item label="标题" prop="title">
19          <el-input v-model="form.title"></el-input>
20        </el-form-item>
21        <el-form-item label="评价" prop="evaluate">
22          <el-input v-model="form.evaluate"></el-input>
23        </el-form-item>
24        <el-form-item label="状态" prop="state">
25          <el-input v-model="form.state"></el-input>
26        </el-form-item>
27      </el-form>
28      <div slot="footer" class="dialog-footer">
29        <el-button @click="dialogEdit.show = false">取 消</el-button>
30        <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button>
31      </div>
32    </el-dialog>
33  </div>
34</template>
35
36<script>
37export default {
38  name: 'HelloWorld',
39  props:{
40    dialogEdit:Object,
41    form:Object
42  },
43  data () {
44    return {
45      formrules:{
46        date:[{required:true,message:"日期不能为空",trigger:"blur"}],
47        name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
48        email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
49      }
50    }
51  },
52  methods:{
53    dialogFormEdit(formEdit) {
54      this.$refs[formEdit].validate((valid) => {
55        if (valid) {
56          this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
57            this.$message({
58              type:"success",
59              message:"编辑信息成功"
60            })
61            console.log(res)
62            this.dialogEdit.show = false;
63            this.$emit('updateEdit')
64          })
65        } else {
66          console.log('error submit!!');
67          return false;
68        }
69      })
70    }
71  }
72}
73</script>
74
75<!-- Add "scoped" attribute to limit CSS to this component only -->
76<style scoped>
77
78</style>

编辑和新增类似

在APP.vue中引入组件

APP.vue修改如下，其中import UserInfo from './UserInfo'表示引入组件

<UserInfo></UserInfo>表示调用该组件

1<template>
2  <div id="app">
3     <img src="./assets/logo.png">
4    <div>
5      <el-button @click="startHacking">element ui 安装成功</el-button>
6    </div>
7    <hr>
8    <UserInfo></UserInfo>
9  </div>
10</template>
11
12<script>
13import UserInfo from './UserInfo'
14export default {
15  methods: {
16    startHacking () {
17      this.$notify({
18        title: 'It works!',
19        type: 'success',
20        message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
21        duration: 5000
22      })
23    }
24  },
25  components:{
26    UserInfo
27  }
28}
29</script>
30
31<style>
32#app {
33  font-family: Helvetica, sans-serif;
34  text-align: center;
35}
36</style>

最后打开页面，看看是否能增删改查

前端技术栈：5分钟入门VUE+Element UI

此时，项目结构如下图所示

[图片上传失败...(image-ae5dd1-1612435593825)]

总结

此处假设你已经看过VUE基础视频了：https://learning.dcloud.io/#/?vid=0

main.js

main.js很重要，里面定义了入口组件APP.vue；引入了项目所需要的包

组件三件套

分别是template，script，style，新组件就这样来定义

1<template>
2 //定义该组件的模板
3</template>
4
5<script>
6import com1 from 'XXX'
7import com2 from 'XXX'
8export default {
9  name: '组件名字',
10  data () {
11    return {
12        //定义组件数据
13      },
14    }
15  },
16  methods:{
17    //定义组件方法
18  },
19  created(){
20    this.getUserInfo()
21  },
22  components:{
23    com1,com2//定义改组件引用的其他组件
24  }
25}
26</script>
27
28<style>
29//定义该组件用到的样式
30</style>

组件的属性

在AddUser.vue组件中，有一个键叫props，里面有一个dialogAdd

1<script>
2export default {
3  name: 'AddUser',
4  props:{
5    dialogAdd:Object
6  }
7}
8</script>

这表示该组件可以用到的属性，在UserInfo.vue里面这么引用AddUser组件的

<AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>

在AddUser上面绑定了一个dialogAdd属性，这会传到AddUser.vue组件里面控制AddUser的显示与隐藏，有点像父子组件之前的通信

$emit触发自定义事件

在AddUser.vue组件中，有一个自定义事件

this.$emit('update');

这会给父组件UserInfo触发一个update事件，父组件自然会调用@update中定义的方法getUserInfo重新查询数据并加载页面，总结两句话就是：

父组件可以使用 props 把数据传给子组件
子组件可以使用 $emit 触发父组件的自定义事件

Element UI

ElementUI相关问题可以参考官方文档：https://element.eleme.cn/#/zh-CN/component/installation

前端技术栈：5分钟入门VUE+Element UI

前言

效果演示

Nodejs

json-server

安装json-server

运行json-server

测试json-server

增(POST)

改(PATCH)

查(GET)

删(DELETE)

VUE实战

全局安装vue-cli

全局安装webpack

vue 2.0 + Element UI 项目搭建

基础版本搭建

引入Element UI

简单增删改查页面

用户信息组件UserInfo.vue

添加用户组件AddUser.vue

编辑用户组件EditUser.vue

在APP.vue中引入组件

总结

main.js

组件三件套

组件的属性

$emit触发自定义事件

Element UI

推荐

评论区

相关推荐