【javaEE】（7）Vue.js组件化开发、axios配置

一：组件化的基本概念

面对大型应用时，可以将其拆分成若干个独立的单元。

二：怎么实现组件化

webpack：将浏览器不认识的文件编译成浏览器识别的文件（如vue文件编译成js、html、css等文件）

但webpack的配置使用比较繁琐，Vue官方提供了一个比较简便的vue脚手架——Vue-cli

Vue-cli：vue官方提供的一个编译工具，基于webpack设计

可以将.vue文件编译成js、html、css等文件

三：Vue-cli的使用

1：环境搭建

第一步：安装node.js

官网地址：https://nodejs.org/en/

安装完之后进入命令行输入node -v测试出现版本号就代表安装成功。

第二步：vue脚手架工具

安装之前先配置代理（命令行输入以下语句）：npm config set registry https://registry.npm.taobao.org

安装webpack：npm install -g webpack

安装vue/cli：npm install -g @vue/cli

输入vue -V 出现版本号就代表安装成功

2：新建第一个Vue组件化项目

在命令行输入vue ui

会自动打开浏览器进入Vue项目管理器

设置路径

更改包管理器

点击下一步后选择Default preset(Vue3)，然后就可以创建项目了

创建的时间会比较的长，等待吧。

创建完成之后，将创建的文件项目整个拖入HBuilder X

拖入完成之后，点击运行——运行到终端——npm run serve

然后选择内置终端，第一次的话会需要下载。

运行成功之后，将终端显示的端口复制到内置浏览器中，就可以显示最初始的欢迎页面了。

欢迎页面如下

3：Vue的基本语法

如何实现下图案例所示的效果？

vue的组件化构建就像搭积木，将不同的组件分别实现，然后在统一的搭建在一起。

在如图路径下新建几个vue组件，上下左右的组件。

用作演示，最基本的样式即可

以下是Top.vue的代码，类比着写其他的就行。

<template>
	<h1>Top</h1>
</template>
<script>
</script>
<style>
</style>

然后修改App.vue里面的代码如下所示

<template>
  <Top class="top"></Top>
  <div style="display: flex;margin:0px;flex-direction: row;">
	<Left class="left"></Left>
	<Right class="right"></Right>
  </div>
  <Bottom class="bottom"></Bottom>
</template>
<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Top from './components/Top.vue'
import Bottom from './components/Bottom.vue'
export default {
  name: 'App',
  // 注册
  components: {
	Left,
	Right,
	Top,
	Bottom
  }
}
</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;
}
.top{
	width:100%;
	height:150px;
	background-color: aqua;
	margin: 0px;
}
.bottom{
	width:100%;
	height:150px;
	background-color: aqua;
	margin: 0px;
}
.left{
	width:20%;
	height:400px;
	background-color: antiquewhite;
	margin: 0px;
}
.right{
	width:80%;
	height:400px;
	background-color: #1AA034;
	margin: 0px;
}
< /style>

代码分析：

template：使用vue组件

script：导入vue并且注册

style：修改vue组件的样式

4：去除语法检查限制

有时候运行的时候总是会提示一些没必要的语法错误，可以添加文件忽略一部分错误提示

5：案例二——发送请求，获得后台数据

样式如下

首先需要 添加axios请求框架

进入vue项目管理器（cmd输入vue ui打开），点击依赖，再点击右上角的添加依赖，然后搜索axios，第一个90多mb的就是了，安装完会自动在package.json里面添加依赖。

修改main.js如下

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

然后修改RIght.vue如下图所示

然后开启后台端口进行测试。

然后修改RIght.vue如下图所示

然后开启后台端口进行测试。