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