创建vue项目并访问课程1的springboot项目
创建vue项目
- 安装前端环境
首次安装vue前,需提前下载安装node.js(>=6.x,首选8.x),npm(3+ 无需额外安装,node.js安装后就有了)
- 管理员打开cmd
输入npm install -g @vue/cli
- 创建项目
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
简而言之输入:vue create hello-world
注:hello-world为项目名 - 新增js文件
该文件用于请求后端;module.exports = { runtimeCompiler: false, devServer: { proxy: { '/_api': { target: 'http://localhost:1001', pathRewrite: { '^/_api': '' } } } }, productionSourceMap: false }
- 安装axios:
npm install axios
- 修改App文件,模拟请求;
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div>id:{{ user.id }}</div> <div>name:{{ user.name }}</div> <div>age:{{ user.age }}</div> </div> </template> <script> import axios from 'axios' export default { name: 'App', mounted() { axios.get('/_api/user/get?id=1').then(response => { this.user = response.data }) }, data() { return { user: {} } } } </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; } </style>
- 启动后端,启动前端,浏览器访问;