创建vue项目并访问课程1的springboot项目

创建vue项目

1. 安装前端环境

首次安装vue前，需提前下载安装node.js（>=6.x，首选8.x），npm（3+ 无需额外安装，node.js安装后就有了）

2. 管理员打开cmd 输入npm install -g @vue/cli
3. 创建项目 简而言之输入：vue create hello-world 注：hello-world为项目名
4. 新增js文件 该文件用于请求后端； module.exports = { runtimeCompiler: false, devServer: { proxy: { /_api: { target: http://localhost:1001, pathRewrite: { ^/_api: } } } }, productionSourceMap: false }
5. 安装axios：npm install axios
6. 修改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>
7. 启动后端，启动前端，浏览器访问；