美文网首页前端
前端技术栈:5分钟入门VUE+Element UI

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

作者: 代码狂魔 | 来源:发表于2021-02-04 18:46 被阅读0次

    目录

    前端技术栈: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文件,内容如下

    {
      "data": []
    }
    

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

    json-server --watch db.json
    

    回显如下说明成功

      \{^_^}/ hi!
    
      Loading db.json
      Done
    
      Resources
      http://localhost:3000/data
    
      Home
      http://localhost:3000
    
      Type s + enter at any time to create a snapshot of the database
      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请求

    返回值如下

    {
      "name": "zhangsan",
      "id": 2
    }
    

    再看一下我们刚才创建的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
    

    返回如下

    {
      "name": "lisi",
      "id": 2
    }
    

    说明修改成功

    查(GET)

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

    直接查全部

    [
      {
        "name": "lisi",
        "id": 2
      }
    ]
    

    删(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 项目搭建

    基础版本搭建

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

    # 初始化一个叫做vue2_elementui的项目,使用webpack模板
    vue init webpack-simple vue2_elementui
    
    # 进入项目目录
    cd vue2_elementui
    
    # 构建
    npm install
    
    # 运行
    npm run dev
    

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

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

    引入Element UI

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

    # 安装Element UI
    npm install element-ui -S
    
    # 顺便安装vue-router 和 vue-resource,前者是路由,后者是执行Ajax请求用到的依赖
    npm install vue-router vue-resource --S
    
    # 安装moment,事件选择组件
    npm install moment -S
    
    • -S表示只在该项目下安装,不是全局安装

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

    import Vue from 'vue'
    import App from './App.vue'
    
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.use(ElementUI)
    
    import axios from 'axios'
    import moment  from 'moment'
    
    Vue.filter('moment', function (value, formatString) {
      formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
      return moment(value).format("YYYY-MM-DD"); // value可以是普通日期 20170723
    });
    
    Vue.prototype.$axios = axios
    
    new Vue({
      el: '#app',
      render: h => h(App)
    })
    
    

    打开APP.vue,修改如下

    <template>
      <div id="app">
         <img src="./assets/logo.png">
        <div>
          <el-button @click="startHacking">element ui 安装成功</el-button>
        </div>
      </div>
    </template>
    <script>
    export default {
      methods: {
        startHacking () {
          this.$notify({
            title: 'It works!',
            type: 'success',
            message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
            duration: 5000
          })
        }
      },
      components:{
        UserInfo
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
    </style>
    
    

    最后再次运行

    npm run dev
    

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

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

    简单增删改查页面

    用户信息组件UserInfo.vue

    <template>
      <div class="info">
        <h1>用户信息管理界面</h1>
        <el-row>
          <el-col :span="20" :push='2'>
            <div>
              <el-form :inline="true">
                <el-form-item style="float: left" label="查询用户信息:">
                  <el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
                </el-form-item>
                <el-form-item style="float: right">
                  <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="hanldeAdd()">添加</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="table">
              <el-table
                :data="searchUserinfo(keyUser)"
                border
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  align="center"
                  width="60">
                </el-table-column>
                <el-table-column
                  label="日期"
                  align="center"
                  width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.date | moment}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="姓名"
                  align="center"
                  width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="邮箱"
                  align="center"
                  width="160">
                  <template slot-scope="scope">
                    <span>{{ scope.row.email }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="标题"
                  align="center"
                  width="160">
                  <template slot-scope="scope">
                    <span>{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="评价"
                  align="center"
                  width="200">
                  <template slot-scope="scope">
                    <span>{{ scope.row.evaluate }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="center"
                  width="160">
                  <template slot-scope="scope">
                    <span>{{ scope.row.state }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <AddUser :dialogAdd="dialogAdd" @update="getUserInfo"></AddUser>
        <EditUser :dialogEdit="dialogEdit" :form="form" @updateEdit="getUserInfo"></EditUser>
      </div>
    </template>
    
    <script>
    import AddUser from './AddUser'
    import EditUser from './EditUser'
    export default {
      name: 'info',
      data () {
        return {
          tableData:[],
          dialogEdit:{
            show:false,
          },
          dialogAdd:{
            show:false
          },
          keyUser:"",
          form:{    //编辑信息
            date:'',
            name:'',
            email:'',
            title:'',
            evaluate:'',
            state:''
          },
        }
      },
      methods:{
        getUserInfo() {
          this.$axios.get('http://localhost:3000/data').then(res => {
            console.log(res)
            this.tableData = res.data
          })
        },
        hanldeAdd(){  //添加
          this.dialogAdd.show = true;
        },
        handleEdit(index,row){  //编辑
          this.dialogEdit.show = true; //显示弹
          this.form = {
            date:row.date,
            name:row.name,
            email:row.email,
            title:row.title,
            evaluate:row.evaluate,
            state:row.state,
            id:row.id
          }
          console.log(row)
        },
        handleDelete(index,row) {
          // 删除用户信息
          this.$axios.delete(`http://localhost:3000/data/${row.id}`).then(res =>{
            this.$message({
              type:"success",
              message:"删除信息成功"
            })
            this.getUserInfo()    //删除数据,更新视图
          })
        },
        searchUserinfo(keyUser) {
          return this.tableData.filter((user) => {
            if(user.name.includes(keyUser)) {
              return user
            }
          })
        }
      },
      created(){
        this.getUserInfo()
      },
      components:{
        AddUser,
        EditUser
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1{
      font-size: 30px;
      color: #333;
      text-align: center;
      margin: 0 auto;
      padding-bottom: 5px;
      border-bottom: 2px solid #409EFF;
      width: 300px
    }
    </style>
    
    

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

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

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

    添加用户组件AddUser.vue

    <template>
      <div class="hello">
        <el-dialog title="添加用户信息" :visible.sync="dialogAdd.show">
          <el-form :model="formDate" ref="formdong" label-width="100px" :rules="formrules">
            <el-form-item label="日期" prop="date">
              <el-date-picker
                v-model="formDate.date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formDate.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formDate.email"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="formDate.title"></el-input>
            </el-form-item>
            <el-form-item label="评价" prop="evaluate">
              <el-input v-model="formDate.evaluate"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-input v-model="formDate.state"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAdd.show = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormAdd('formdong')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      name: 'AddUser',
      props:{
        dialogAdd:Object
      },
      data () {
        return {
          formDate:{
            date:'',
            name:'',
            email:'',
            title:'',
            evaluate:'',
            state:''
          },
          formrules:{
            date:[{required:true,message:"日期不能为空",trigger:"blur"}],
            name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
            email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
          }
        }
      },
      methods:{
        dialogFormAdd(formdong) {
          this.$refs[formdong].validate((valid) => {
            if (valid) {
              this.$axios.post('http://localhost:3000/data',this.formDate).then(res => {
                this.$message({
                  type:"success",
                  message:"添加信息成功"
                })
                this.dialogAdd.show = false;
                this.$emit('update');
    
              })
              this.formDate  = ""
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    
    

    这是添加用户信息组件

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

    编辑用户组件EditUser.vue

    <template>
      <div class="hello">
        <el-dialog title="编辑用户信息" :visible.sync="dialogEdit.show">
          <el-form :model="form" ref="formEdit" label-width="100px" :rules="formrules">
            <el-form-item label="日期" prop="date">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="评价" prop="evaluate">
              <el-input v-model="form.evaluate"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-input v-model="form.state"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEdit.show = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormEdit('formEdit')">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props:{
        dialogEdit:Object,
        form:Object
      },
      data () {
        return {
          formrules:{
            date:[{required:true,message:"日期不能为空",trigger:"blur"}],
            name:[{required:true,message:"用户名不能为空",trigger:"blur"}],
            email:[{required:true,message:"邮箱不能为空",trigger:"blur"}],
          }
        }
      },
      methods:{
        dialogFormEdit(formEdit) {
          this.$refs[formEdit].validate((valid) => {
            if (valid) {
              this.$axios.put(`http://localhost:3000/data/${this.form.id}`,this.form).then(res => {
                this.$message({
                  type:"success",
                  message:"编辑信息成功"
                })
                console.log(res)
                this.dialogEdit.show = false;
                this.$emit('updateEdit')
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>
    
    

    编辑和新增类似

    在APP.vue中引入组件

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

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

    <template>
      <div id="app">
         <img src="./assets/logo.png">
        <div>
          <el-button @click="startHacking">element ui 安装成功</el-button>
        </div>
        <hr>
        <UserInfo></UserInfo>
      </div>
    </template>
    
    <script>
    import UserInfo from './UserInfo'
    export default {
      methods: {
        startHacking () {
          this.$notify({
            title: 'It works!',
            type: 'success',
            message: 'We\'ve laid the ground work for you. It\'s time for you to build something epic!',
            duration: 5000
          })
        }
      },
      components:{
        UserInfo
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Helvetica, sans-serif;
      text-align: center;
    }
    </style>
    
    

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

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

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

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

    总结

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

    main.js

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

    组件三件套

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

    <template>
     //定义该组件的模板
    </template>
    
    <script>
    import com1 from 'XXX'
    import com2 from 'XXX'
    export default {
      name: '组件名字',
      data () {
        return {
            //定义组件数据
          },
        }
      },
      methods:{
        //定义组件方法
      },
      created(){
        this.getUserInfo()
      },
      components:{
        com1,com2//定义改组件引用的其他组件
      }
    }
    </script>
    
    <style>
    //定义该组件用到的样式
    </style>
    
    

    组件的属性

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

    <script>
    export default {
      name: 'AddUser',
      props:{
        dialogAdd:Object
      }
    }
    </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

    推荐

    推荐一个通用后端项目:https://panjiachen.github.io/vue-element-admin-site/zh/guide/

    vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

    </article>

    相关文章

      网友评论

        本文标题:前端技术栈:5分钟入门VUE+Element UI

        本文链接:https://www.haomeiwen.com/subject/jatitltx.html