「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

项目效果

期望在自己创建的vue项目中定义自己的路由，自己的组件，实现前后端分离的小demo。让之前的学习能够更加贴近实战，对vue的前端开发流程有个清晰的了解。

项目准备

创建vue项目

cd到我们的工作路径下，使用vue ui打开vue项目管理器，点击创建，在此创建新项目

项目创建

输入项目名称，点击下一步

项目名称

选择预设环境，建议vue3，点击创建项目

预设环境

然后静静等待项目创建完成（视网络情况，大约3-10分钟）。

创建成功后默认进入创建的项目

启动vue项目

点击左侧导航栏的任务，选择serve，点击启动（vue自动编译并启动）。

任务启动（编译-->启动）

测试项目

打开localhost:8080查看项目首页

localhost:8080

开发自己的项目

前端

安装vue-router插件

在vue ui的项目主页，点击插件，点击安装vue-router

elementUI和vue-router

安装完vur-router后，我们项目的App.vue会自动被刷新为Home和About两个router-link。当我们点击Home和About两个链接，vue-router会帮我们将请求分别路由到不同的组件中去。

创建我们自己的router

1、先在首页添加我们自己的router-link

router-link

2、在views中添加mydemo组件

添加视图

3、在router的index.js中添加路由

添加路由

4、访问主页，点击mydemo的router-link查看效果

定义对后端的请求

1、安装axios

cnpm i axios -S

2、配置axios

在main.js中导入axios并修改默认URL。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// 导入axios
import axios from 'axios'

// 设置默认baseURL
axios.defaults.baseURL='http://localhost:2345'

// 创建vue3实例
const Vapp = createApp(App);

// 启用router插件
Vapp.use(router)

// 配置vue启用axios
Vapp.config.globalProperties.$axios = axios

// 挂载
Vapp.mount('#app')

3、在mydemo组件中使用axios

<template>
	<h1>这里是mydemo</h1>
	{{ info }}
	<h1>{{ infos }}</h1>
</template>

<script>
	export default {
		data() {
			return {
				infos: [{id:1,name:'phyger'}],
				info: "hello vue..."
			}
		},
		mounted() {
			this.showinfo();
		},
		methods: {
			showinfo(){
				this.$axios.get('/test/info')
				.then(response=>{
					this.infos=response.data;
					console.log(response);
					console.log(this.infos);
					
				})
				,err=>{
					console.log(err);
				};
			},
		},
	}
</script>

<style>
</style>