时间戳

首页 > 技术文章 > 技术博客总结

技术博客总结

liaolongkai 2021-06-27 10:59 原文

技术概述

学习了vue加element ui技术，用来做我们后台的界面，因为在原本的团队中，后台前端缺人，秉着哪里缺人往哪里搬的原则，我加入了前端小组，学习了vue的技术并成功完成了登录界面，难点主要在于学习一个新框架，很多东西都要·百度找

技术详述

因为我没有负责接口，单纯的界面设计部分。所以俺准备分成三部分讲image
首先先介绍html实现部分，我们需要在代码的main界面添加我们需要添加的组件


import { Button, Input, TableColumn, Table, Switch, Menu, RadioButton, Card, Radio,RadioGroup,MenuItem,Form,Checkbox,CheckboxGroup,Dialog,Tabs } from 'element-ui'

Vue.config.productionTip = false
Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
Vue.component(TableColumn.name, TableColumn)
Vue.component(Table.name, Table)
Vue.component(Switch.name, Switch)
Vue.component(Menu.name, Menu)
Vue.component(RadioButton.name, RadioButton)
Vue.component(Card.name, Card)
Vue.component(Radio.name, Radio)
Vue.component(RadioGroup.name,RadioGroup)
Vue.component(MenuItem.name,MenuItem)
Vue.component(Form.name,Form)
Vue.component(Checkbox.name,Checkbox)
Vue.component(CheckboxGroup.name,CheckboxGroup)
Vue.component(Dialog.name,Dialog)
Vue.component(Tabs.name, Tabs)

这些是添加element组件的代码需要什么就添加什么
在登陆界面设计时由于我是根据原型设计的，主要实现过程一步一步来，比如大片的绿色空白，我就用一个绿颜色的块，然后图标经过艰难设计最后才改成圆形，剩下的就是插入一些基本组件了

  
      <div>
    <img class="cai"  id="picture"  src="../assets/ed.png" >
     <span id="UI" @click="login">菜购</span>
    </div>
     <div id="login" class="login_form1" >
    <span id="word"  @click="login">菜购</span>
   <img   src="../assets/login2.png" id="message2">
    </div>
    <div class="login_form"  id="login1" >
        <span id="a"   @click="login">————</span>
        <span id="b" >Login</span>
        <el-input id="account"   class="input"  placeholder="请输入账号" v-model="input2" ></el-input>
        <el-input show-password style=" width: 250px;position:absolute;left:55px;top:240px;" id="password" class="input"  placeholder="请输入密码" v-model="input" ></el-input>
    <div id="choose" >
      <el-radio v-model="radio" label="1">超市</el-radio>
      <el-radio v-model="radio" label="2">店铺</el-radio>
    </div>
     <button id="login2"  class="login_btn el-button el-button&#45;&#45;primary is-round" type="primary" round  >登录</button>
    <div style="margin-top: 10px">
    <span id="c" >忘记密码？</span>
    </div>
    </div>
     
  </div>

这些是我经过界面设计的代码，本质上是组件的堆叠、
js部分由于和接口密切联系，统一交给组长陈志君负责，所以我涉猎较少
css部分，比较着重实现的部分就是位置的调放吧其中postion的绝对位置非常好用大部分情况下就是使用绝对位置来排放自己的图标和块

 #UI{
     color: #000000;
     font-size:30px;
     position:absolute;
    left:170px;
     top:50px;
 }
  .login_logo {
    height: 100%;
  }
  .login_btn {
    width: 300px;
    font-size: 16px;
    background-color:  #77c49d; 

    
  }

问题与解决

问题主要集中于极限编程那一天，一直出现版本错误，后来小组长删了一个组件解决了。第二个问题是不会写路由，后来学会了这段代码

import login from '../views/login'
import login from '../views/orderdetails'
Vue.use(VueRouter)

const routes = [{
  
    
        path: '/login',
        component: login
    },

然后就没什么大问题了，其他的组件堆叠，一天就做完了俩个页面

总结

vue框架只了解了个大概吧，现在的技术水平只到给我一个原型，界面能长得差不都的程度，其他功能等都还来不及学，在以后的实践或者工作中能够继续学习vue框架，因为觉得他还蛮好玩的

参考文献

最大的参考资料是element UI首页，也是我唯一用的官方资料
element UI首页

推荐阅读