目錄
前言
一.Vue路由
1.什么是spa
1.1簡介
1.2 spa的特點
1.3 spa的優(yōu)勢以及未來的挑戰(zhàn)
2.路由的使用
2.1 導(dǎo)入JS依賴
2.2?定義兩個組件
2.3 定義組件與路徑對應(yīng)關(guān)系
2.4?通過路由關(guān)系獲取路由對象
2.5 將對象掛載到vue實例中
2.6?定義觸發(fā)路由事件的按鈕?
2.7?定義錨點和路由內(nèi)容?
2.8 測試效果
小結(jié)
二.?node.js環(huán)境搭建
1.官網(wǎng)下載地址
2.下載好安裝包?
3.解壓?
4.配置環(huán)境變量?
?5.測試是否安裝成功
6.配置npm全局模塊路徑和cache默認(rèn)安裝位置
7.修改npm鏡像提高下載速度
7.1 --registry
????7.2?cnpm
8.驗證安裝結(jié)果
9.node.js運(yùn)行啟動項目
9.1我們將準(zhǔn)備好的前端項目解壓到文件夾中
?9.2 地址欄輸入cmd進(jìn)入cmd窗口
?9.3下載安裝完成之后啟動項目
前言
Vue路由是Vue.js框架中用于構(gòu)建單頁面應(yīng)用（SPA）的一種核心工具
一.Vue路由
1.什么是spa
1.1簡介
SPA是單頁面應(yīng)用（Single Page Application）的縮寫。它是一種Web應(yīng)用程序的架構(gòu)模式，通過動態(tài)地更新單個HTML頁面來實現(xiàn)應(yīng)用程序的交互和導(dǎo)航，而不需要每次用戶操作都重新加載整個頁面。
在傳統(tǒng)的多頁面應(yīng)用中，每次用戶導(dǎo)航到不同的頁面時都需要重新加載整個頁面，導(dǎo)致性能較低且用戶體驗較差。而SPA通過使用前端JavaScript框架（如Vue.js、React、Angular等）以及前端路由技術(shù)，將應(yīng)用程序拆分為多個組件，每個組件負(fù)責(zé)渲染和處理特定的頁面或功能。用戶在應(yīng)用程序中進(jìn)行導(dǎo)航時，只需動態(tài)加載和更新相應(yīng)的組件，從而快速響應(yīng)用戶的操作，提供流暢的用戶體驗
1.2 spa的特點
-
單頁面加載：SPA只有一個HTML頁面，整個應(yīng)用的內(nèi)容都動態(tài)地更新在這個頁面上，無需每次頁面切換都重新加載整個頁面。
-
前端路由：SPA使用前端路由來管理應(yīng)用程序的導(dǎo)航。路由器會根據(jù)URL路徑匹配相應(yīng)的組件，并將其渲染到視圖中。
-
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>異步加載：SPA使用異步加載技術(shù)，只加載當(dāng)前頁面所需的資源，減少了頁面切換時的等待時間。
-
富交互性：SPA通過使用前端框架和庫，可以實現(xiàn)復(fù)雜的用戶界面和交互效果，提供更好的用戶體驗。
-
前后端分離：SPA的前端部分負(fù)責(zé)處理用戶界面和交互邏輯，后端則提供數(shù)據(jù)接口和處理業(yè)務(wù)邏輯。這種分離使前后端開發(fā)可以并行進(jìn)行，并提高了系統(tǒng)的可擴(kuò)展性和靈活性
1.3 spa的優(yōu)勢以及未來的挑戰(zhàn)
SPA的優(yōu)點包括更快的頁面加載速度、提供較好的用戶體驗、減少了服務(wù)器的負(fù)載等。然而，SPA也有一些挑戰(zhàn)，例如對SEO不友好、應(yīng)用初次加載時需要下載較大的JavaScript文件等。因此，在選擇是否使用SPA時需要綜合考慮項目的需求和技術(shù)特點?
2.路由的使用
2.1 導(dǎo)入JS依賴
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
2.2?定義兩個組件
var Home = Vue.extend({
template:'<div>網(wǎng)站首頁內(nèi)容</div>'
});
var about = Vue.extend({
template:'<div>關(guān)于本站</div>'
});2.3 定義組件與路徑對應(yīng)關(guān)系
var routes = [{
component:Home,
path:"/Home"
},{component:about,
path:"/about"
}];2.4?通過路由關(guān)系獲取路由對象
var router = new VueRouter({routes});2.5 將對象掛載到vue實例中
new Vue({
el:"#app",
router,
data(){
return {
msg:'hello Vue',
}
}
})2.6?定義觸發(fā)路由事件的按鈕?
<router-link to="/home">首頁</router-link>
<router-link to="/about">關(guān)于</router-link>
<router-link>首頁</router-link>2.7?定義錨點和路由內(nèi)容?
<router-view></router-view>2.8 測試效果
小結(jié)
Vue路由是構(gòu)建Vue.js單頁面應(yīng)用的重要工具，它提供了靈活的方法來管理應(yīng)用的導(dǎo)航和組件切換。通過合理的路由設(shè)計和使用，可以更好地組織應(yīng)用程序的結(jié)構(gòu)，實現(xiàn)良好的用戶體驗?
二.?node.js環(huán)境搭建
1.官網(wǎng)下載地址
node.js中文官網(wǎng)https://nodejs.org/zh-cn/download
2.下載好安裝包?
這里我們不選擇安裝程序安裝，選擇解壓版安裝
3.解壓?
下載好后到安裝目錄
解壓后在當(dāng)前解壓的目錄下新建node_global和node_cache這兩個目錄
新建目錄說明
???????????node_global：npm全局安裝位置
???????????node_cache：npm緩存路徑
4.配置環(huán)境變量?
新建一個環(huán)境變量，變量名輸入NODE_HOME,變量值為安裝的目錄
?編輯Path
%NODE_HOME%
%NODE_HOME%\node_global
?5.測試是否安裝成功
node -v
npm -v
打開cmd窗口，輸出如下命令會輸出NodeJs和npm的版本號，出現(xiàn)版本號時說明安裝成功?
6.配置npm全局模塊路徑和cache默認(rèn)安裝位置
打開cmd，分開執(zhí)行如下命令：
??????npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"
??????npm config set prefix "D:\initPath\node-v10.15.3-win-x64\node_global"
?框中修改為剛剛創(chuàng)建的兩個目錄下的路徑
注意點
注1：將步驟一創(chuàng)建的node_global(npm全局安裝位置)和node_cache(npm緩存路徑)與npm聯(lián)系起來
??????注2：如果執(zhí)行命令卡死，可以刪除C:\Users\用戶名\.npmrc?后重新執(zhí)行。（用戶名：為當(dāng)前電腦的用戶名）
??????注3："D:\initPath\node-v10.15.3-win-x64\node_global"，雙引號不能少
?
7.修改npm鏡像提高下載速度
7.1 --registry
? ? ? ? ?設(shè)置淘寶源
??????????npm config set registry https://registry.npm.taobao.org/
? ? ? ? ? ?查看源，可以看到設(shè)置過的所有的源
??????????npm config get registry
?
??????????注1：其實此步驟的內(nèi)容就是將以下代碼添加到C:\Users\用戶名\.npmrc文件中
???????????????registry=https://registry.npm.taobao.org
????7.2?cnpm
??????????npm install -g cnpm --registry=https://registry.npm.taobao.org
?
??????????注1：cnpm安裝完成后，以后就可以用cnpm命令代替npm命令,?此時npm還是會用官方鏡像，cnpm會用國內(nèi)鏡像
??????????注2：如果要恢復(fù)成原來的設(shè)置，執(zhí)行如下：
???????????????npm config set registry https://registry.npmjs.org/
8.驗證安裝結(jié)果
查看淘寶鏡像設(shè)置情況
??????????npm get registry
查看npm全局路徑設(shè)置情況
? ? ? ? ?此步驟隨便全局安裝一個模塊就可以測評
?????????npm install webpack -g?
? ? ? ? ?以上命令執(zhí)行完畢后，會生成如下文件
?????????%node_home%\node_global\node_modules\webpack
9.報錯解決
npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache' npm ERR! [Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache'] { npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'mkdir', npm ERR! path: 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache\_cacache', npm ERR! requiredBy: '.' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.
npm ERR! Log files were not written due to an error writing to the directory: D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_logs npm ERR! You can rerun the command with
--loglevel=verboseto see the logs in your terminal
?在運(yùn)行?npm install webpack -g? 命令時出現(xiàn)以上報錯可能是權(quán)限問題，我們需要到node_cache和node_global文件夾中將權(quán)限修改全部加上，使用完全控制
?
選擇完全控制
?
注意，不只是node_global需要修改node_cache也需要修改
9.node.js運(yùn)行啟動項目
9.1我們將準(zhǔn)備好的前端項目解壓到文件夾中
?9.2 地址欄輸入cmd進(jìn)入cmd窗口
輸入 npm -i 下載安裝
?9.3下載安裝完成之后啟動項目
輸入?npm run dev 啟動項目
啟動完成后瀏覽器會自動彈出頁面?
?
今天的分享到這里就結(jié)束了，感謝各位大大的觀看，各位大大的三連是博主更新的動力，感謝謝謝謝謝謝謝謝謝各位的支持?。。。。?文章來源：http://www.zghlxwxcb.cn/news/detail-730565.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-730565.html
到了這里，關(guān)于Vue路由與node.js環(huán)境搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
