快捷導(dǎo)航

Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)

更新時(shí)間：2022年08月14日 10:31:39 作者：不想禿頭的小楊

本文主要介紹了Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.Vue

我們之前項(xiàng)目中也使用到了Vue，但是我們之前的vue和我們的java代碼是不是都在一個(gè)工程下。沒有做到前后端完成分離。企業(yè)中前端也會(huì)由自己的服務(wù)器，也有自己的開發(fā)工具。

前端服務(wù)器Nodejs 開發(fā)工具VsCode[我們?yōu)榱撕蚷dea匹配使用WebStorm].

2. 安裝Nodejs服務(wù)器

2.1安裝npm

因?yàn)榍岸隧?xiàng)目也需要依賴一些插件:比如:axios elementui 那么我們可以使用npm下載并安裝到當(dāng)前項(xiàng)目。

我們無需安裝因?yàn)樵趎odejs中默認(rèn)帶了該軟件

2.2 安裝vue的腳手架

腳手架的作用:就是用來幫你創(chuàng)建前端vue工程。

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

速度很慢

3. 使用腳手架創(chuàng)建Vue工程

3.1.在cmd窗口中輸入命令,打開創(chuàng)建界面

vue ui

3.2創(chuàng)建

(1)

(2)

(3)

(4)

(5)

3.3創(chuàng)建完成后

3.3.1

3.3.2安裝需要的elementui插件

3.3.3安裝axios發(fā)送異步請(qǐng)求的依賴

4.使用WebStorm打開Vue工程

關(guān)聯(lián):npm命令

（1）

（2）

整個(gè)項(xiàng)目中node_modules占用項(xiàng)目的空間99%。以后拿到的項(xiàng)目一定沒有node_modules。需要自己在本地安裝。

npm install -- 安裝項(xiàng)目需要的模塊

npm run serve --運(yùn)行項(xiàng)目 nodejs

4. 聊聊main.js

5.App.vue組件

注意:每個(gè)組件必須加 div

5.1一個(gè)組件引用另一個(gè)組件:

當(dāng)前組件中導(dǎo)入另一個(gè)組件

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

注冊(cè)另一個(gè)組件

export default {
  name: 'app',
  //(2)注冊(cè)組件
  components: {
     hello
  }
}

使用注冊(cè)的組件

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

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

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

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

5.2.2使用子組件的時(shí)候傳值

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

5.2.3子組件定義props，并使用

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

5.2.4子組件使用屬性

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

6.淺談路由

（1）使用路由跳轉(zhuǎn)

   <p>
     <!--router-link可以理解為<a>   to可以理解為href=路徑
        一旦使用了路由跳轉(zhuǎn)  ----必須找router/index.js文件
        該文件中配置了路由和組件的映射關(guān)系
     -->
     <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
  },
 
 
    //使用的時(shí)候再把組件引用過來
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue')
  }

這里有兩種配置路由的方式，一種是不管用不用直接把組件先引過來，另一種是使用的時(shí)候再把組件引過來

（3）渲染組件

<router-view/>

到此這篇關(guān)于Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)Vue 前后端完全分離內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: