個人 Vue.js 學習日記 （十） - element-ui與vue-router路由與.vue單文件組件

上節回顧

上節學習瞭如何用webpack + vue-cli 去安裝一個基於vue基礎項目框架，其實按照順序來，原本是第九節應該是看組件的，不過由於種種緣由，實在是受不了了，因此決定提早先把webpack關於vue的這門課先補上，因此說今天就來看組件吧！

前言

由於前些天我已經看過組件這一張了，基礎知識多少要有一點啦，因此這一節就基於目前已有的知識來寫吧。

首先這一節必須基於vue-cli生成的基架來學習。

其次這裏涉及到了一點vue-router路由的一點點知識。

這裏將經過路由與.vue單文件組件實現跳轉。

另外，同時從今天開始我也要同時開始學習element-ui的使用了，因此今天也要配合使用element-ui

本節目標

基於element-ui vue-router .vue但頁面組件 實現頁面跳轉的Demo

Element-ui

1.安裝

在項目文件夾上打開cmd，執行：npm i element-ui -S

2.引入

打開src文件夾下的main.js

主要用到這三句話

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

main.js完整代碼

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

如今能夠在項目中使用Element-ui的組件了！

1.建立組件

1.新建student-list.vue組件

1.首先說一下，組件通常都放在src - components目錄下，因此說咱們在components下新建一個文件夾，就叫作student

2.在student文件夾右鍵 -> 新建 -> Vue Component，名字：student-list，若是不使用這個名字的話，下面的代碼要相應的修改

3.把下面代碼粘進去...

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性別"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年齡">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'student-list',
  data () {
    return {
      tableData: [{
        name: '張楚嵐',
        sex: '男',
        age: '23'
      },
      {
        name: '馮寶寶',
        sex: '女',
        age: '99'
      },
      {
        name: '趙方旭',
        sex: '男',
        age: '59'
      },
      {
        name: '肖自在',
        sex: '36',
        age: '男'
      }
      ]
    }
  }
}
</script>

<style scoped>

</style>

2.新建student-add.vue組件

方式同上，也放在student文件夾下，名字：student-add

完整代碼：

<template>
  <el-form ref="form" :model="student" label-width="80px">

    <el-form-item label="姓名">
      <el-input v-model="student.name"></el-input>
    </el-form-item>

    <el-form-item label="性別">
      <el-radio-group v-model="student.sex">
      <el-radio label="1">男</el-radio>
      <el-radio label="2">女</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="年齡">
      <el-input v-model.number="student.age" type="number"></el-input>
    </el-form-item>

    <el-form-item>
    <el-button plain>添加</el-button>
    <el-button plain @click="onBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'student-add',
  data () {
    return {
      student: {
        name: '',
        sex: '1',
        age: 0
      }
    }
  },
  methods: {
    onBack () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>

3.新建frame.vue組件

1.在components文件夾上右鍵,新建vue組件，名稱：frame

2.完整代碼：

<template>
  <el-container>
    <el-header>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">學員管理</template>
          <el-menu-item index="1-1"><router-link to="/student/list" tag="div">學員列表</router-link></el-menu-item>
          <el-menu-item index="1-2"><router-link to="/student/add" tag="div">添加學員</router-link></el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>

</template>

<script>
import studentAdd from './student/student-add'
import studentList from './student/student-list'

export default {
  name: 'frame',
  components: {
    studentAdd,
    studentList
  }
}
</script>

<style scoped>

</style>

2.配置路由

1.打開router文件夾下的index.js

2.引入並配合新建立的3個.vue組件的路由

3.完整代碼：

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Frame from '@/components/frame'
import StudentList from '@/components/student/student-list'
import StudentAdd from '@/components/student/student-add'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Frame,
      children: [
        {
          path: '/student/list',
          component: StudentList
        },
        {
          path: '/student/add',
          component: StudentAdd
        }
      ]
    }
  ]
})

tip:這裏稍微涉及到一點嵌套路由

tip:src目錄下有一個App.vue，進去把這個圖片先註釋掉（由於他很礙事的說）以下：

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view/>
  </div>
</template>

3.運行

在項目目錄下運行cmd，執行：npm run dev

tip:必定要在項目目錄下運行哦

以後沒有錯誤的話就能夠正確的跑起來啦

截圖：
http://localhost:1801/index#/student/list

http://localhost:1801/index#/student/add

小節

最近學的有些吃力啊，感受有些難理解，原理就先不說了，我怕誤人子弟，要是有人看到這裏啦的話，你要意會啊意會！加油！