课程1-2-vue项目的简单创建并访问后端项目

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

创建vue项目

1. 安装前端环境

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

2. 管理员打开cmd
   输入npm install -g @vue/cli
3. 创建项目
   https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
   简而言之输入：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. 启动后端，启动前端，浏览器访问；