• 章十九、JavaVUE —— 框架、指令、声明周期、Vue-cli、组件路由、Element

    目录

    一、 框架

    ●  vue.js 框架

    ●  特点

    ●  Vue 安装

    二、 第一个vue程序

    ●  创建项目

    ​编辑

    ●  导入 vue.js

    ●  创建vue对象，设置属性，使用模版渲染到页面

    介绍 — Vue.js (vuejs.org)

    三、 vue指令

    ●  v-text

    ●  v-html

    ●  v-on

    ●  v-model

    ●  v-show

    ●  v-if

    ●  v-bind

    ●  v-for

    四、 Vue 实例生命周期

     Vue 生命周期图示（取自Vue2官方文档）：

    五、 vue-cli 搭建项目

    ●  主要的功能

    ●  需要的环境

    测试：

    ●  使用 HbuilderX 快速搭建一个 vue-cli 项目

    ​编辑

    ●  如果下载网上的cli 文件没有node_modules

    ●  启动项目

    ●  打包项目

    六、 组件路由

     ●  创建vue文件（网页本体）​编辑

    ●  安装router

    ●  搭建（在router目录中的index.js文件中导入vue文件和其他）

            • 创建 router 目录

            • 在 router 目录 中创建 index.js 文件,在其中配置路由

            • 使用路由

            • 在 main.js 中配置路由（代码最终运行）

            • 路由导航守卫

            • 路由嵌套

            • 路由传参

    七、 ElementUI

    ●  安装 ElementUI

    npm i element-ui -S

    ● 练习

    登录界面

    管理界面

    专业

    学生

    index.js文件

     

    一、 框架

            什么是框架？如同盖高楼大厦一样，高楼的框架先一步搭建好，实现将许多基本功能实现封装，后续只需要填充内容即可。

    框架：就是在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率

    ●  vue.js 框架

    Vue 是前端的主流框架之一，用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。是对js进行的封装，而非代替js

    ●  特点

    1.体积小： 压缩后 33K

    2.更高的运行效率：

            用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交。

    3.双向数据绑定,简化 Dom 操作

            通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象，把更多的精力投入到业务逻辑上。

            其中 MVVM 是 Model-View-ViewModel（即M-V-VM） 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

    4 生态丰富、学习成本低

            市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发！对初学者友好、入门容易、学习资料多

    ●  Vue 安装

    安装 — Vue.js (vuejs.org) 下载

    方式 1:直接用

    方式 2:命令行工具 (CLI)

    安装教程给出了更多安装 Vue 的方式。不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

    二、 第一个vue程序

    ●  创建项目

    在新建项目中选择vue项目（普通模式）

    然后将 v3.2.8 版本删掉（我们先学习2.0版本）

    ●  导入 vue.js

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		
    7. 		<script src="js/v2.6.10/vue.min.js">script>
    8. 		
    9. 	head>
    10. 	<body>
    11.  
    12.  
    13. 	body>
    14. html>

    ●  创建vue对象，设置属性，使用模版渲染到页面

    介绍 — Vue.js (vuejs.org)

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		
    7. 		<script src="js/v2.6.10/vue.min.js">script>
    8. 		
    9. 	head>
    10. 	<body>
    11. 		
    12. 		<div id="app">
    13. 			{{ message }} {{name}} 
    14. 			<input v-model="name" />
    15. 		div>
    16.  
    17. 		<script>
    18. 			// 创建一个 vue对象
    19. 			var app = new Vue({
    20. 				el: '#app', //将vue对象和 div对象监听绑定 ，绑定挂载点
    21. 				// Vue 会管理 el 选项命中的元素及其内部的后代元素 可以使用其他的闭合标签，但不能使用 HTML 和 body
    22. 				// #id - id选择器
    23. 				// .class - class选择器
    24.  
    25. 				data: { //定义数据 可以定义多个
    26. 					message: 'Hello Vue!', //属性与属性之间用 ','分隔
    27. 					name: "jim"
    28. 				}
    29. 			})
    30. 		script>
    31.  
    32.  
    33.  
    34. 	body>
    35. html>

    代码解析:

    {{ 变量 }} ,插值表达式获取 data 数据

    new Vue();  创建 Vue 对象(VM 对象)

    el:数据挂载的 dom 对象

    data:{ message:’hello world’} model 数据

    Vue 会管理 el 选项命中的元素及其内部的后代元素

    可以使用其他的选择器（像 .class 是class选择器），但是建议使用 ID 选择器

    可以使用其他的闭合标签，但不能使用 HTML 和 BODY

    data 中 定义着 Vue 要用到的数据

    data 中可以写复杂类型的数据,如对象,数组

    三、 vue指令

            指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

    ●  v-text

    作用是设置标签的文本内容

    默认写法会替换全部内容，使用差值表达式可以替换指定内容

    内部支持写表达式

    非凡英才

    {{message}}非凡英才

    ●  v-html

    作用是设置标签的文本内容

    默认写法会替换全部内容，使用差值表达式可以替换指定内容

    内部支持写表达式

    非凡英才

    {{message}}非凡英才

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		
    11. 		<div id="app">
    12. 			<p>{{message}} aaaap> 
    13. 			<p v-text="message">aaaap> 
    14. 			<p v-html="message">aaaap>
    15.  
    16. 			<p v-text="html">p> 
    17. 			<p v-html="html">p> 
    18.  
    19.  
    20. 		div>
    21. 		<script>
    22. 			var app = new Vue({
    23. 				el: '#app',
    24. 				data: {
    25. 					message: 'Hello Wrold!',
    26. 					html: 'Hello World'
    27. 				}
    28. 			})
    29. 		script>
    30.  
    31. 	body>
    32. html>

    ●  v-on

    作用是为元素绑定事件

    事件名不需要写 on 指令可以简写为@

    绑定的方法定义在 methods 属性中,可以传入自定义参数

    methods:{

            test(a,b){

                    alert(a);

            }

    }

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			
    12. 			<input type="button" value="按钮1" v-on:click="test1()"> 
    13. 			<input type="button" value="按钮2" @click="test2(2)"> 
    14. 			<input type="button" value="按钮3" @click="test3()">
    15. 			<input type="button" value="按钮4" @click="test4()">
    16. 			<p>{{message}}p>
    17. 		div>
    18.  
    19. 		<script>
    20. 			var app = new Vue({
    21. 				el: '#app',
    22. 				data: {
    23. 					message: 'Hello World'
    24. 				},
    25. 				methods: { //函数定义在 vue对象内
    26. 					test1() {
    27. 						alert(this.message + ':1'); //直接用自身对象
    28. 					},
    29. 					test2(a) { //同样可以传参
    30. 						alert(this.message + ':' + a);
    31. 					},
    32. 					test3() { //修改内容
    33. 						this.message = "aaaaaaaaa";
    34. 					},
    35. 					test4() { //内容逆序
    36. 						this.message = this.message.split("").reverse().join("");
    37. 					}
    38. 				}
    39. 			})
    40.  
    41. 			// function test() {
    42. 			// 	alert(app.message);
    43. 			// }
    44. 		script>
    45.  
    46. 	body>
    47. html>

    ●  v-model

    作用是便捷的设置和获取表单元素的值

    绑定的数据会和表单元素值相关联

    绑定的数据<---->表单元素的值 双向数据绑定

            

    {{message}}

    data:{

            message: " "

    }

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="app">
    11. 			<input type="button" value="按钮1" @click="test1()">
    12. 			<input v-model="name" /> 
    13. 			<p>{{message}}p>
    14. 			<p>{{name}}p>
    15.  
    16. 		div>
    17.  
    18. 		<script>
    19. 			var app = new Vue({
    20. 				el: '#app',
    21. 				data: {
    22. 					message: 'Hello World',
    23. 					name: ''
    24. 				},
    25. 				methods: {
    26. 					test1() {
    27.  
    28. 					}
    29. 				}
    30. 			})
    31. 		script>
    32. 	body>
    33. html>

    ●  v-show

    作用是根据真假切换元素的显示状态

            原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值，值为 true 元素显示，值为 false 元素隐藏 。数据改变之后，对应元素的显示状态会同步更新

    data:{

            isShow:true,

            age:20

    }

    ●  v-if

            作用是根据表达式的真假切换元素的显示状态（把标签直接从网页上删去）本质是通过操纵 dom 元素来切换

    显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除

    其后后可跟 v-else 的标签

    频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 		<style>
    8. 			img {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		
    16. 		<div id="app">
    17. 			
    18. 			<img src="img/1.jpg" alt="" v-show="isShow" />
    19. 			<img src="img/2.jpg" alt="" v-show="age==18" class="img" />
    20. 			<br />
    21. 			
    22. 			<img src="img/3.jpg" alt="" v-if="isShow" />
    23. 			<img src="img/4.jpg" alt="" v-if="age==18" class="img" />
    24. 			<img src="img/5.jpg" alt="" v-else="age==18" class="img" />
    25. 			<br />
    26. 			<button @click="TFxianshi()">改变button>
    27. 		div>
    28.  
    29.  
    30. 		<script>
    31. 			var app = new Vue({
    32. 				el: '#app',
    33. 				data: {
    34. 					isShow: true,
    35. 					age: 18
    36. 				},
    37. 				methods: {
    38. 					TFxianshi() {
    39. 						this.isShow = !this.isShow;
    40. 						this.age = 0;
    41. 					}
    42. 				}
    43. 			})
    44. 		script>
    45. 	body>
    46. html>

    ●  v-bind

    作用是为元素绑定属性（用于改变标签的属性的值）

    完整写法是 v-bind：属性名

    简写的话可以直接省略 v-bind，只保留：属性名

    data:{

            imgSrc:'img/3.jpg'

            imgTitle:"这是一张图片"

    }

    我们可以传给 v-bind:class 一个对象，以动态地切换 class：

    data:{

            isActive :true

    }

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 		<style>
    8. 			img {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 			}
    12.  
    13. 			.active {
    14. 				color: rad;
    15. 				background-color: aqua;
    16. 			}
    17. 		style>
    18. 	head>
    19. 	<body>
    20. 		
    21. 		<div id="app">
    22.  
    23. 			<img v-bind:src="imgurl[index]" :title="array[index]" />
    24. 			
    25. 			<div v-bind:class="{active:isActive}">wwwwdiv>
    26. 			<button @click="oper()">改变button>
    27. 		div>
    28.  
    29.  
    30. 		<script>
    31. 			var app = new Vue({
    32. 				el: '#app',
    33. 				data: {
    34. 					imgurl: ["img/1.jpg", "img/2.jpg", "img/3.jpg"],
    35. 					array: ["手机", "空调", "微波炉"],
    36. 					index: 0,
    37. 					isActive: true
    38. 				},
    39. 				methods: {
    40. 					oper() {
    41. 						this.index = this.index + 1;
    42. 						this.isActive = !this.isActive;
    43. 					}
    44. 				}
    45. 			})
    46. 		script>
    47. 	body>
    48. html>

    ●  v-for

            作用是根据数据生成列表结构，经常用于和 数组 结合（相当于for循环）

    使用语法是（item，index）in 数据

    item 和 index 可以结合其他指令一起使用

    数组长度的更新会同步到页面上是响应式的

    为循环绑定一个 key 值 :key=”值” 尽可能唯一

  •         {{item}}省

  •         {{index+1}}{{item}}省

  •         {{index+1}} {{item.name}} {{item.age}}

    • data:{

            array:['陕西','山西','河南'],

            objects:[

                    {name:'admin',age:23},

                    {name:'jim',age:22}

            ]

    }

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="js/v2.6.10/vue.min.js">script>
    7. 		<style>
    8. 			img {
    9. 				width: 100px;
    10. 				height: 100px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<ul>
    17. 				<li v-for="i in users">
    18. 					姓名:{{i.name}}
    19. 					年龄:{{i.age}}
    20. 					性别:{{i.gender}}
    21. 				li>
    22. 				<br />
    23.  
    24. 				<button v-for="j in buttons">
    25. 					{{j.name}}
    26. 				button>
    27. 				<input type="button" v-for="i in buttons" v-bind:value="i.name">
    28. 				<br />
    29.  
    30. 				<img v-for="i in jpgs" v-bind:src="i" alt="" />
    31.  
    32. 			ul>
    33. 		div>
    34.  
    35. 		<script>
    36. 			var app = new Vue({
    37. 				el: '#app',
    38. 				data: {
    39. 					//数组，模拟从后端返回的数据
    40. 					users: [{
    41. 							name: "jim",
    42. 							age: 20,
    43. 							gender: "女"
    44. 						},
    45. 						{
    46. 							name: "lina",
    47. 							age: 19,
    48. 							gender: "男"
    49. 						},
    50. 						{
    51. 							name: "tom",
    52. 							age: 19,
    53. 							gender: "男"
    54. 						}
    55. 					],
    56. 					buttons: [{
    57. 							name: "开始"
    58. 						},
    59. 						{
    60. 							name: "停止"
    61. 						}
    62. 					],
    63. 					jpgs: ["img/1.jpg", "img/2.jpg", "img/3.jpg"]
    64.  
    65. 				}
    66.  
    67. 			})
    68. 		script>
    69. 	body>
    70. html>

     

    四、 Vue 实例生命周期

            每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

    beforeCreate: function () {

            console.log('beforeCreatea ’);

    },

    created: function () {

            console.log('createda ' );

    },

    beforeMount: function(){

            console.log('beforeMounta’);

    },

    mounted: function(){

            console.log('mounteda’);

    }

     Vue 生命周期图示（取自Vue2官方文档）：

    五、 vue-cli 搭建项目

            vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

    ●  主要的功能

            ● 统一的目录结构（只创建一个 html文件，为这唯一的一个html文件配置）

            ● 本地调试

            ● 热部署

            ● 单元测试

            ● 集成打包上线

    ●  需要的环境

            Node.js

    简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。

    下载icon-default.png?t=N7T8https://nodejs.org/en/download安装：一路Next，自行修改安装位置，

            npm

    npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

    测试：

    这样就成功了。

    ●  使用 HbuilderX 快速搭建一个 vue-cli 项目

    等待下载；

    ●  如果下载网上的cli 文件没有node_modules

    npm install

    ●  启动项目

    npm run serve 运行代码

    如果报错提示 npm  ，关闭HBuilderX，使用管理员运行

    Ctrl + c 停止服务

    ●  打包项目

    npm run build 打包代码

    然后就可以导出这个文件夹

    删：

    成：

    六、 组件路由

     ●  创建vue文件（网页本体）

    ●  安装router

    删除这个文件，然后再命令工具中运行下面的代码，这样以后再运行时就不会再生成该文件。

    npm config set package-lock false

            vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

    npm i vue-router@3.5.3

    ●  搭建（在router目录中的index.js文件中导入vue文件和其他）

            • 创建 router 目录

            • 在 router 目录 中创建 index.js 文件,在其中配置路由 

    1. import Vue from 'vue'; /* 导入 vue */
    2. import router from 'vue-router'; /* 导入路由 */
    3.  
    4. // 导入注册组件
    5.  
    6. import Login from '../Login.vue'; /* 导入其他组件 */
    7. import Main from '../Main.vue'; /* 导入其他组件 */
    8.  
    9.  
    10.  
    11. Vue.use(router)
    12.  
    13. /* 定义组件路由 */
    14. var rout = new router({
    15. 	routes: [{ //为每一个组件创建地址
    16. 			path: '/', //默认开启网页的网址
    17. 			component: Login
    18. 		},
    19. 		{
    20. 			path: '/Login', //登录页面代表的网址
    21. 			name: 'Login',
    22. 			component: Login
    23. 		},
    24. 		{
    25. 			path: '/Main',
    26. 			name: 'Main',
    27. 			component: Main
    28. 		}
    29. 	]
    30. });
    31.  
    32. //导出路由对象
    33. export default rout;

            • 使用路由

    在vue文件中可以试用index.js文件中配置的路由名来调用相应网页

    1. <template>
    2. 	<div> 
    3. 		<router-link to="/Login">登录router-link>
    4. 		<router-link to="/Main">注册router-link>
    5.  
    6. 		{{name}} {{age}}
    7.  
    8.  
    9. 	div>
    10. template>
    11.  
    12. <script>
    13. 	export default {
    14. 		name: '',
    15. 		data() {
    16. 			return {
    17.  
    18. 			}
    19. 		},
    20. 		methods: {
    21.  
    22. 		}
    23. 	}
    24. script>
    25.  
    26. <style scoped>
    27. style>

            • 在 main.js 中配置路由（代码最终运行）

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3.  
    4. Vue.config.productionTip = false
    5.  
    6.  
    7. // 导入组件路由
    8. import router from './router/index.js' // . 表示同级 ， .. 表示上一级
    9. Vue.use(router);
    10.  
    11.  
    12. new Vue({
    13. 	el: '#app',
    14. 	router,
    15. 	render: h => h(App)
    16. }).$mount('#app')

            • 路由导航守卫

            • 路由嵌套

            • 路由传参

    七、 ElementUI

            Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.

    ●  安装 ElementUI

    npm i element-ui -S

    在 main.js 中写入以下内容：

    import ElementUI from 'element-ui';

    import 'element-ui/lib/theme-chalk/index.css';

    Vue.use(ElementUI);

    new Vue({

            render: h => h(App),

    }).$mount('#app');

    ● 练习

    登录界面

    其中的logo.png 和 bg.jpg 自行放在assets中

    2. <template>
    3. 	<div class="login_container">
    4. 		
    5. 		<div class="login_box">
    6.  
    7. 			
    8. 			<div class="img_box">
    9. 				<img src="./assets/logo.png" />
    10. 			div>
    11.  
    12. 			
    13. 			<div style="margin-top: 100px;">
    14. 				<el-form ref="form" label-width="80px" style="margin-right: 35px;">
    15.  
    16. 					<el-form-item label="账号">
    17. 						<el-input v-model="account">el-input>
    18. 					el-form-item>
    19.  
    20. 					<el-form-item label="密码">
    21. 						<el-input v-model="password" show-password>el-input>
    22. 					el-form-item>
    23.  
    24. 					<el-form-item>
    25. 						<el-button type="primary" @click="login()">登录el-button>
    26. 						<el-button>取消el-button>
    27. 					el-form-item>
    28.  
    29. 				el-form>
    30.  
    31. 			div>
    32.  
    33.  
    34. 		div>
    35. 	div>
    36. template>
    37.  
    38. <script>
    39. 	/* 导出组件,并为组件定义数据,函数,生命周期函数 */
    40. 	export default {
    41. 		data() {
    42. 			return {
    43. 				account: "", //账号
    44. 				password: "" //密码
    45. 			}
    46. 		},
    47. 		methods: {
    48. 			login() {
    49. 				// 前端验证账号密码不能为空
    50. 				if (this.account.length == 0) {
    51. 					this.$message({
    52. 						message: '账号不能为空！',
    53. 						type: 'warning'
    54. 					});
    55. 					return;
    56. 				}
    57.  
    58. 				if (this.password.length == 0) {
    59. 					this.$message({
    60. 						message: '密码不能为空！',
    61. 						type: 'warning'
    62. 					});
    63. 					return;
    64. 				}
    65.  
    66. 				//跳转到登录成功界面
    67. 				this.$router.push("/main");
    68.  
    69. 			}
    70. 		}
    71. 	}
    72. script>
    73.  
    74. <style>
    75. 	.login_container {
    76. 		height: 100vh;
    77. 		margin: 0px;
    78. 		padding: 0px;
    79. 		background-image: url(assets/bg.jpg);
    80.  
    81. 		/* 背景不重复 */
    82. 		background-repeat: no-repeat;
    83. 		/* 充满整个网页 */
    84. 		background-size: cover;
    85.  
    86. 	}
    87.  
    88. 	.login_box {
    89. 		width: 450px;
    90. 		height: 350px;
    91. 		background-color: #fff;
    92. 		border-radius: 10px;
    93. 		position: absolute;
    94. 		left: 50%;
    95. 		top: 50%;
    96. 		transform: translate(-50%, -50%);
    97. 		opacity: 0.95;
    98. 	}
    99.  
    100. 	.img_box {
    101. 		width: 130px;
    102. 		height: 130px;
    103. 		position: absolute;
    104. 		left: 50%;
    105. 		transform: translate(-50%, -50%);
    106. 		background-color: #fff;
    107. 		border-radius: 50%;
    108. 		padding: 5px;
    109. 		border: 1px solid #eee;
    110. 	}
    111.  
    112. 	.img_box img {
    113. 		width: 100%;
    114. 		height: 100%;
    115. 		border-radius: 50%;
    116. 		background-color: #eee;
    117. 	}
    118. style>

    管理界面

    1. <template>
    2. 	<div>
    3.  
    4. 		<el-container>
    5.  
    6. 			<el-header style="text-align: right; font-size: 12px">
    7. 				<div class="header-title">后台管理系统div>
    8. 				<el-dropdown>
    9. 					<i class="el-icon-setting" style="margin-right: 15px">i>
    10. 					<el-dropdown-menu slot="dropdown">
    11.  
    12. 						<el-dropdown-item>修改密码el-dropdown-item>
    13. 						
    14. 						<el-dropdown-item><span @click="logout()">安全登出span>el-dropdown-item>
    15.  
    16. 					el-dropdown-menu>
    17. 				el-dropdown>
    18. 				<span>三木几span>
    19. 			el-header>
    20.  
    21.  
    22. 			<el-container>
    23. 				<el-aside width="200px">
    24. 					<el-menu :default-openeds="['1', '3']" router>
    25. 						<el-submenu index="1">
    26. 							<template slot="title"><i class="el-icon-message">i>操作菜单template>
    27. 							<el-menu-item-group>
    28. 								<el-menu-item index="/majorlist">专业管理el-menu-item>
    29. 								<el-menu-item index="/studentlist">学生管理el-menu-item>
    30. 							el-menu-item-group>
    31. 						el-submenu>
    32. 					el-menu>
    33. 				el-aside>
    34.  
    35. 				<el-main>
    36. 					<router-view>router-view>
    37. 				el-main>
    38.  
    39. 			el-container>
    40. 		el-container>
    41.  
    42.  
    43.  
    44.  
    45.  
    46. 	div>
    47. template>
    48.  
    49. <script>
    50. 	export default {
    51. 		name: '',
    52. 		data() {
    53. 			return {
    54.  
    55. 			}
    56. 		},
    57. 		methods: {
    58. 			logout() {
    59. 				this.$confirm('是否确认登出?', '提示', {
    60. 					confirmButtonText: '确定',
    61. 					cancelButtonText: '取消',
    62. 					type: 'warning'
    63. 				}).then(() => { //匿名内部类
    64. 					this.$router.push('/login');
    65. 				})
    66. 			}
    67. 		}
    68. 	}
    69. script>
    70.  
    71.  
    72. <style>
    73. 	.el-header {
    74. 		background-color: #00a7fa;
    75. 		color: #333;
    76. 		line-height: 60px;
    77. 	}
    78.  
    79. 	.header-title {
    80. 		width: 300px;
    81. 		float: left;
    82. 		text-align: left;
    83. 		font-size: 20px;
    84. 		color: white;
    85. 	}
    86.  
    87. 	.el-main {
    88. 		background-color: aliceblue;
    89. 		height: 100vh;
    90. 	}
    91. style>

    专业

    1. <template>
    2. 	<div>
    3. 		专业管理
    4. 	div>
    5. template>
    6.  
    7. <script>
    8. 	export default {
    9. 		name: '',
    10. 		data() {
    11. 			return {
    12.  
    13. 			}
    14. 		},
    15. 		methods: {
    16.  
    17. 		}
    18. 	}
    19. script>
    20.  
    21. <style scoped>
    22. style>

    学生

    1. <template>
    2. 	<div>
    3. 		学生管理
    4. 	div>
    5. template>
    6.  
    7. <script>
    8. 	export default {
    9. 		name: '',
    10. 		data() {
    11. 			return {
    12.  
    13. 			}
    14. 		},
    15. 		methods: {
    16.  
    17. 		}
    18. 	}
    19. script>
    20.  
    21. <style scoped>
    22. style>

    index.js文件

    1. import Vue from 'vue'; /* 导入 vue */
    2. import router from 'vue-router'; /* 导入路由 */
    3.  
    4.  
    5. // 导入注册组件
    6. import Login from '../Login.vue'; /* 导入其他组件 */
    7. import Main from '../Main.vue'; /* 导入其他组件 */
    8. import StudentList from '../views/student/StudentList.vue';
    9. import MajorList from '../views/major/MajorList.vue';
    10.  
    11.  
    12.  
    13. Vue.use(router)
    14.  
    15. /* 定义组件路由 */
    16. var rout = new router({
    17. 	routes: [{ //为每一个组件创建地址
    18. 			path: '/', //默认开启网页的网址
    19. 			component: Login
    20. 		},
    21. 		{
    22. 			path: '/login', //登录页面代表的网址
    23. 			name: 'Login',
    24. 			component: Login
    25. 		},
    26. 		{
    27. 			path: '/main',
    28. 			name: 'Main',
    29. 			component: Main,
    30. 			children: [{
    31. 					path: '/studentlist',
    32. 					name: 'StudentList',
    33. 					component: StudentList
    34. 				},
    35. 				{
    36. 					path: '/majorlist',
    37. 					name: 'MajorList',
    38. 					component: MajorList
    39. 				}
    40. 			]
    41. 		}
    42.  
    43. 	]
    44. });
    45.  
    46. //导出路由对象
    47. export default rout;

  • 相关阅读:
    Error: Cannot find module ‘timers/promises‘
    STM32 之 HAL 库串口 USART 丢数据及ORE卡死的解决方案
    ubuntu 18.04换内核后找不到 /dev/ttyUSB0问题
    【视觉SLAM十四讲】学习笔记-第二讲
    HCIP交换实验
    编译原理：上下文无关文法 CFG
    高防CDN与高防服务器：为什么高防服务器不能完全代替高防CDN
    搭建 Sentry 服务
    02 【基础篇-vim编辑器 网络配置 远程登录】
    ceph 009 管理定义crushmap 故障域
  • 原文地址：https://blog.csdn.net/king_faner/article/details/139744034