脚本宝典收集整理的这篇文章主要介绍了我的 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

小节

最近学的有些吃力啊，感觉有些难理解，原理就先不说了，我怕误人子弟，要是有人看到这里啦的话，你要意会啊意会！加油！

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的我的 Vue.js 学习日记 （十） - element-ui与vue-router路由与.vue单文件组件全部内容，希望文章能够帮你解决我的 Vue.js 学习日记 （十） - element-ui与vue-router路由与.vue单文件组件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。