vue踩坑(1)

1.添加新创建vue页面模板路由,实现子路由

import Main from './components/Main.vue'
......
......
......
const routes = [
    name: 'main', path: '/', component: Main,  //基本路由
    //子路由,实现局部路由
    children:[
       {name: 'login', path: '/main/login', component: Login},
    ]
];
//引入组件mode,消除url中的#
mode:"history",

页面调用局部路由方法:

//使用容器
  <el-container>
    <el-header>
     //如:
         <el-menu-item index="1">
          <router-link :to="{name:'xxx'}">aaa</router-link>
        </el-menu-item>
     </el-header>
    <el-main>
     //局部路由显示地点
      <router-view></router-view>
    </el-main>
  </el-container>

2.新建导航菜单:

Element UI
https://element.eleme.cn/#/zh-CN/component/menu
附;
引用element ui,结合局部路由会造成路由标签增添下划线和变蓝,可利用a标签对默认样式进行更改

  a {
    color: #FFD700;
    text-decoration: none;
  }

  a:hover {
    color: yellow;
  }

  a:active {
    color: red;
  }
  </style>

3.图片卡片式
组件 | Element
https://element.eleme.cn/#/zh-CN/component/carousel

<template>
    <div>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in imagesbox" :key="item.id">
          <img :src="item.src">
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        imagesbox: [{
          id: 1,
          src: 'static/img/traffic1.png',
        }, {
          id: 2,
          src: 'static/img/traffic2.jpg',
        }]
      }
    },
  }
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .d1 {
    color: #F0FFFF;
    text-indent: 4em;
    text-size:15px;
    /*font-color:#475669;*/
  }
</style>

4.创建表格

静态表格:
组件 | Element
https://element.eleme.cn/#/zh-CN/component/table
后台传参渲染表格:

<template>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="50"></el-table-column>
        <el-table-column prop="activitytype" label="活动类别" width="150"></el-table-column>
        <el-table-column prop="activitytime" label="活动时间" width="150"></el-table-column>
        <el-table-column prop="acticityspace" label="活动地点" width="150"></el-table-column>
        <el-table-column prop="meetnumber" label="活动人数" width="100"></el-table-column>
        <el-table-column prop="meetname" label="活动名称" width="300"></el-table-column>
        <el-table-column prop="connent" label="活动内容" width="600"></el-table-column>
      </el-table>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData:[],
      }
    },
    //页面创建初期自动实现方法
    created(){
      this.showactivity();
    },
    methods:{
      showactivity:function() {
        this.$http({
          method: 'get',
          url: 'xxxx',
        }).then(response => {
          const data = response.data;      
          console.log(data);
          for (var i = 0; i < data.length; i++) {
          //拿到后端返回的list集合或object集合,对表格进行渲染
            this.tableData = response.data;
          }
        }).catch(function (error) {
          alert(error);
        })
      }
    }
  }
</script>

5.对话框

<template>
    <div>
      <button @click="login">登录</button>
      <button @click="dialogFormVisible = true">注册</button>
      <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" :modal-append-to-body='false'>
        <el-form label-width="80px">
          <el-form-item label="院校">
            <el-select v-model="school1" placeholder="不能为空">
              <el-option label="xxxx" value="xxxx"></el-option>
              <el-option label="xxxx" value="xxxx"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="stuId1" placeholder="无法二次修改,请核对"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="stuName1" placeholder="不能为空"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="tel1" placeholder="不能为空"></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-select v-model="profession1" placeholder="不能为空">
              <el-option label="教师" value="教师"></el-option>
              <el-option label="学生" value="学生"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="password1" type="password" placeholder="不能为空"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
 </template>
<script>

  export default {
    data() {
      return {
        stuId: '',
        password: '',
        stuName: '',

        dialogFormVisible: false,
        school1:'',
        stuId1:'',
        stuName1:'',
        tel1:'',
        profession1:'',
        password1:'',

        error: {
          name: '',
          password: ''
        }
      }
    },

    methods: {
      login() {},
      onSubmit(){}
    }
  }
</script>

<style>
  .paper {
    height: 600px;
    width: 100%;
    background-size: cover;
    text-align: center;
    /*position: fixed;*/
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

</style>

6.form表单

组件 | Element
https://element.eleme.cn/#/zh-CN/component/form