我的第一个 Vue 项目 -Demo

作者：Python研究所

2022 年 6 月 26 日
本文字数：1145 字
阅读完需：约 4 分钟

项目效果

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

项目准备

创建 vue 项目

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

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

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

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

启动 vue 项目

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

测试项目

打开 localhost:8080 查看项目首页

开发自己的项目

前端

安装 vue-router 插件

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

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

创建我们自己的 router

1、先在首页添加我们自己的 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'
// 导入axiosimport axios from 'axios'
// 设置默认baseURLaxios.defaults.baseURL='http://localhost:2345'
// 创建vue3实例const Vapp = createApp(App);
// 启用router插件Vapp.use(router)
// 配置vue启用axiosVapp.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>