Vue實(shí)現(xiàn)前后端完全分離的項(xiàng)目實(shí)戰(zhàn)
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ā)送異步請求的依賴
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'
注冊另一個(gè)組件
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使用子組件的時(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue實(shí)現(xiàn)導(dǎo)入Excel功能步驟詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)入Excel功能,本文分步驟給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
解決element-ui庫的el-row的gutter=10間距失效問題
這篇文章主要介紹了解決element-ui庫的el-row的gutter=10間距失效問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用瀏覽器分享的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐
要在Web頁面中加入地圖，我推薦你使用高德地圖,下面這篇文章主要給大家介紹了關(guān)于Vue開發(fā)高德地圖應(yīng)用的最佳實(shí)踐,需要的朋友可以參考下2021-07-07
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
一步步教你利用webpack如何搭一個(gè)vue腳手架（超詳細(xì)講解和注釋）
這篇文章主要給大家介紹了軟玉利用webpack如何搭一個(gè)vue腳手架的相關(guān)資料，文中有超詳細(xì)講解和注釋，對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
vue props對象validator自定義函數(shù)實(shí)例
今天小編就為大家分享一篇vue props對象validator自定義函數(shù)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element中table高度自適應(yīng)的實(shí)現(xiàn)
這篇文章主要介紹了element中table高度自適應(yīng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端
這篇文章主要介紹了vue中實(shí)現(xiàn)一個(gè)項(xiàng)目里兼容移動(dòng)端和pc端問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實(shí)例化時(shí)發(fā)生的，在組件中，可以通過data選項(xiàng)來定義組件的初始數(shù)據(jù)，需要詳細(xì)了解可以參考下文2023-05-05