Vue實現前後端完全分離的專案實戰

2022-08-14 14:01:20

1.Vue

我們之前專案中也使用到了Vue，但是我們之前的vue和我們的java程式碼是不是都在一個工程下。沒有做到前後端完成分離。企業中前端也會由自己的伺服器，也有自己的開發工具。

前端伺服器Nodejs 開發工具VsCode[我們為了和idea匹配使用WebStorm].

2. 安裝Nodejs伺服器

2.1安裝npm

因為前端專案也需要依賴一些外掛:比如:axios elementui 那麼我們可以使用npm下載並安裝到當前專案。

我們無需安裝因為在nodejs中預設帶了該軟體

2.2 安裝vue的腳手架

腳手架的作用:就是用來幫你建立前端vue工程。

安裝的命令: npm install -g @vue/cli

速度很慢

3. 使用腳手架建立Vue工程

3.1.在cmd視窗中輸入命令,開啟建立介面

vue ui

3.2建立

(1)

(2)

(3)

(4)

(5)

3.3建立完成後

3.3.1

3.3.2安裝需要的elementui外掛

3.3.3安裝axios傳送非同步請求的依賴

4.使用WebStorm開啟Vue工程

關聯:npm命令

（1）

（2）

整個專案中node_modules佔用專案的空間99%。以後拿到的專案一定沒有node_modules。需要自己在本地安裝。

npm install -- 安裝專案需要的模組

npm run serve --執行專案 nodejs

4. 聊聊main.js

5.App.vue元件

注意:每個元件必須加 div

5.1一個元件參照另一個元件:

當前元件中匯入另一個元件

import hello from './components/Hello.vue'

註冊另一個元件

export default {
  name: 'app',
  //(2)註冊元件
  components: {
     hello
  }
}

使用註冊的元件

<!--(3)使用元件-->
<hello></hello>

5.2父元件如何向子元件傳值

5.2.1父元件App.vue定義要傳的屬性

data() {
    return {
      age: 15,
      names: ["喜羊羊","美羊羊"]
    }
  }

5.2.2使用子元件的時候傳值

 <!--③使用元件  在子元件 props中定義了msg名稱   跟子元件保持一致就行-->
    <Hello :msg="names" :msg2="age"></Hello>

5.2.3子元件定義props，並使用

props: {
            msg: [],
            msg2: String
        }

5.2.4子元件使用屬性

{{msg[0]}} {{msg2}}

6.淺談路由

（1）使用路由跳轉

   <p>
     <!--router-link可以理解為<a>   to可以理解為href=路徑
        一旦使用了路由跳轉  ----必須找router/index.js檔案
        該檔案中設定了路由和元件的對映關係
     -->
     <router-link to="/home"><el-button type="primary">首頁</el-button></router-link>
     <router-link to="/user"><el-button type="primary">使用者管理</el-button></router-link>
   </p>

（2）設定router/index.js檔案

    //不管以後有沒有用用到都先把元件參照過來
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
 
 
    //使用的時候再把元件參照過來
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue')
  }

這裡有兩種設定路由的方式，一種是不管用不用直接把元件先引過來，另一種是使用的時候再把元件引過來

（3）渲染元件