Vue的组件化

世人慌慌张张，不图碎银几两，而这碎银几两，却可解世间惆怅，可让父母安康，可护幼子成长。

Vue脚手架环境搭建

我这里直接放一个安装教程的PDF

下载链接

创建Vue脚手架工程

1、在cmd输入vue ui

打开项目

运行项目

课堂案例

用vue的组件化实现

1.将App.vue文件里面默认代码删除

2.创建组件

在components文件夹下面创建四个组件Top.vue，Bottom.vue，Left.vue，Right.vue分别代表Top，Bottom，Left，Right

3.测试组件化

在每一个组件里面加一个可以识别的标签

1. 在App.vue里面导入组件

   

   

2. 关闭严格的语法检查

   在根目录下创建vue.config.js文件，文件名和路径不能错，重启HBuilder才能生效

   

   module.exports = {
   	lintOnSave:false
   }
   

3. 调css样式

   

   <template>
   	<top  class='top'></top>
   	<div class="qp">
   		<left  class='left'></left>
   		<right  class='right'></right>
   	</div>
   	<bottom  class='bottom'></bottom>
   </template>
   
   <script>
   import bottom from './components/Bottom.vue'
   import left from './components/Left.vue'
   import right from './components/Right.vue'
   import top from './components/Top.vue'
   export default {
     name: 'App',
     components: {
   	bottom,left,right,top
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   *{
   	margin: 0;
   }
   .qp{
   	display: flex;
   	flex-direction: row;
   }
   .top{
   	width: 100%;
   	height: 100px;
   	background-color: aqua;
   }
   .left{
   	display: inline-block;
   	width: 25%;
   	background-color:antiquewhite;
   	height: 250px;
   }
   .right{
   	display: inline-block;
   	width: 75%;
   	background-color:aquamarine;
   	height: 250px;
   	box-sizing:border-box;
   }
   .bottom{
   	width: 100%;
   	height: 100px;
   	background-color: aqua;
   }
   </style>
   
   

案例升级

<template>
	<div style="margin: 0;">
		<h3>Right</h3>
		用户名：<input placeholder="请输入用户名" v-model="username"/>
		<br />
		密码：<input placeholder="请输入密码" v-model="password"/>
		<br />
		<button @click="login()">login</button>
		<br />
		{{msg}}
	</div>
	
</template>

<script>
	export default{
		data() {
			return{
				username:'',
				password:'',
				msg:''
			}
		}, 
		methods:{
			login(){
				if(this.username=='admin'&&this.password=='123456')
				this.msg='登陆成功'
				else
				this.msg='登录失败'
			}
		}
	}
</script>

<style>
	div{
		box-sizing:border-box;
	}
</style>

案例再升级

要求连接springboot，前端请求用axios

导入axios

更改main.js

前端代码

使用Element-Plus框架

添加配置

就可以看到右侧有默认的代码了，element-plus就已经成功加入来了。