先後端分離初體驗一：前端環境搭建

時間 2020-05-21

標籤後端分離體驗前端環境搭建简体版

原文原文鏈接

參考：https://www.bilibili.com/video/BV137411B7vBvue

B站UP：楠哥教你學Javanode

框架：vue + springbootwebpack

建立VUE項目

環境

首先擁有 node.js web
安裝淘寶鏡像 npm install -g cnpm --registry=https://registry.npm.taobao.orgspring
安裝vue-cli cnpm install vue-clivue-router
若是不是3x以上版本，就安裝最新版 cnpm i -g @vue/clivue-cli

建立Vue項目

vue ui

進入到 Vue項目管理器npm

建立項目

1）

2）

3）

4）

5）後端

6）

7）

完成+測試

完成

測試

1）

2）

3）

4）成功

無後端調試

　　使用 IDEA 打開建立好的Vue項目數組

跳轉+顯示

1）Book.vue

在 src/views 下建立 Book.vue

Book.vue

 <template>
     <div>
         <table>
             <tr>
                 <td>編號</td>
                 <td>書名</td>
                 <td>做者</td>
             </tr>
             <tr>
                 {{msg}}
             </tr>
         </table>
     </div>
 </template>
 
 <script>
     export default {
         name: "Book",
 
         data(){
             return{
                 msg: 'Hello'
             }
         }
 
     }
 </script>
 
 <style scoped>
 
 </style>

2）index.js配置

打開 src/router 下的 index.js

index.js

導入Book.vue

　　　import Book from "../views/Book"

配置（必定要在前帶 逗號（,） ）

　　　,{ path: '/book', component: Book }

import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 
 import Book from "../views/Book"
 
 Vue.use(VueRouter)
 
 const routes = [
     {
         path: '/',
         name: 'Home',
         component: Home
     },
     {
         path: '/about',
         name: 'About',
         component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
     },
 
     {
       path: '/book',
       component: Book
     }
 ]
 
 const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes
 })
 
 export default router

3）測試

Terminal 中輸入 npm run serve

訪問

成功

顯示數據

Book.vue

遍歷

books：被遍歷的數組，item:每次遍歷的對象

　　< tr v-for="item in books "> < td >{{item.id}}< /td > < td >{{item.name}}< /td > < td >{{item.author}}< /td > < /tr >
books中添加數據

　　books: [ { id: 1, name: 'Java', author: '哈哈' }, { id: 2, name: 'C++', author: '啦啦' }, { id: 3, name: 'Python', author: '嘿嘿' } ]

 <template>
     <div>
         <table>
             <tr>
                 <td>編號</td>
                 <td>書名</td>
                 <td>做者</td>
             </tr>
             <!--books：被遍歷的數組 ，item:每次遍歷的對象-->
             <tr v-for="item in books">
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.author}}</td>
             </tr>
         </table>
     </div>
 </template>
 
 <script>
     export default {
         name: "Book",
 
         data() {
             return {
                 msg: 'Hello',
                 books: [
                     {
                         id: 1,
                         name: 'Java',
                         author: '哈哈'
                     },
                     {
                         id: 2,
                         name: 'C++',
                         author: '啦啦'
                     },
                     {
                         id: 3,
                         name: 'Python',
                         author: '嘿嘿'
                     }
                 ]
             }
         }
 
     }
 </script>
 
 <style scoped>
 
 </style>