當(dāng)前位置：首頁(yè) > news >正文

網(wǎng)站建設(shè)教程速成廣東seo推廣費(fèi)用

news 2025/7/2 2:23:41

網(wǎng)站建設(shè)教程速成,廣東seo推廣費(fèi)用,洛陽(yáng)網(wǎng)站開發(fā)培訓(xùn),做照片用的視頻模板下載網(wǎng)站目錄一、Vue路由 1.1 簡(jiǎn)介 ( 1 ) 特點(diǎn) ( 2 ) 作用 1.2 實(shí)例 ( 1 ) 引入 ( 2 ) 組件 ( 3 ) 關(guān)系 ( 4 ) 路由 ( 5 ) 事件 ( 6 ) 錨點(diǎn) 二、nodeJS 2.1 下載 2.2 安裝 2.3 環(huán)境搭建新增添加測(cè)試配置運(yùn)行一、Vue路由 1.1 簡(jiǎn)介 Vue路由是Vue.…

一、Vue路由

1.1 簡(jiǎn)介

( 1 )? 特點(diǎn)

( 2 )? 作用

1.2 實(shí)例

( 1 )? 引入

( 2 )? 組件

( 3 )? 關(guān)系

( 4 )? 路由

( 5 )? 事件

( 6 )? 錨點(diǎn)

二、nodeJS

2.1? 下載

2.2? 安裝

2.3? 環(huán)境搭建

新增

添加

測(cè)試

配置

運(yùn)行

一、Vue路由

1.1 簡(jiǎn)介

Vue路由是Vue.js框架中用于管理頁(yè)面導(dǎo)航的插件。它允許開發(fā)者通過定義路由規(guī)則，將不同的組件映射到不同的URL上，實(shí)現(xiàn)頁(yè)面之間的切換和導(dǎo)航。

Vue路由的核心是路由器（Router），它負(fù)責(zé)監(jiān)聽URL的變化，并根據(jù)配置的路由規(guī)則來(lái)匹配相應(yīng)的組件進(jìn)行渲染。在Vue中，我們可以通過Vue Router插件來(lái)創(chuàng)建和配置路由器。

( 1 )? 特點(diǎn)

聲明式路由：Vue路由使用聲明式的方式來(lái)配置路由規(guī)則，開發(fā)者只需要在配置文件中定義好路由規(guī)則，就可以實(shí)現(xiàn)頁(yè)面之間的切換和導(dǎo)航。
嵌套路由：Vue路由支持嵌套路由，可以將多個(gè)組件組合成一個(gè)整體，并通過父子關(guān)系來(lái)管理路由。
動(dòng)態(tài)路由：Vue路由支持動(dòng)態(tài)路由，可以根據(jù)不同的參數(shù)來(lái)動(dòng)態(tài)生成路由規(guī)則，實(shí)現(xiàn)更靈活的頁(yè)面導(dǎo)航。
路由懶加載：Vue路由支持路由懶加載，可以將頁(yè)面組件按需加載，提高頁(yè)面加載速度和用戶體驗(yàn)。
導(dǎo)航守衛(wèi)：Vue路由提供了導(dǎo)航守衛(wèi)的功能，可以在路由切換前后執(zhí)行一些額外的邏輯，例如權(quán)限驗(yàn)證、頁(yè)面切換動(dòng)畫等。

總的來(lái)說，Vue路由提供了一套完善的路由系統(tǒng)，可以幫助開發(fā)者更好地管理頁(yè)面導(dǎo)航，提供良好的用戶體驗(yàn)，并支持嵌套路由、動(dòng)態(tài)路由、路由懶加載、導(dǎo)航守衛(wèi)等功能，使得開發(fā)者可以更靈活地控制頁(yè)面的展示和交互。

( 2 )? 作用

Vue路由有以下幾個(gè)主要的作用：

1. 實(shí)現(xiàn)頁(yè)面之間的切換和導(dǎo)航：Vue路由可以根據(jù)URL的變化，動(dòng)態(tài)地加載和渲染不同的組件，實(shí)現(xiàn)頁(yè)面之間的切換和導(dǎo)航。
2. 提供良好的用戶體驗(yàn)：通過使用Vue路由，可以實(shí)現(xiàn)單頁(yè)應(yīng)用（SPA）的效果，頁(yè)面切換時(shí)不需要重新加載整個(gè)頁(yè)面，只需要更新組件部分，提高了用戶的交互體驗(yàn)。
3. 管理頁(yè)面狀態(tài)：Vue路由可以根據(jù)URL的變化，動(dòng)態(tài)地管理頁(yè)面的狀態(tài)。例如，在URL中添加參數(shù)，可以實(shí)現(xiàn)頁(yè)面的篩選、排序等功能。
4. 支持嵌套路由：Vue路由支持嵌套路由，可以將多個(gè)組件組合成一個(gè)整體，并通過父子關(guān)系來(lái)管理路由。這樣可以更好地組織和管理頁(yè)面結(jié)構(gòu)。
5. 支持動(dòng)態(tài)路由和路由參數(shù)：Vue路由支持動(dòng)態(tài)路由，可以根據(jù)不同的參數(shù)來(lái)動(dòng)態(tài)生成路由規(guī)則，實(shí)現(xiàn)更靈活的頁(yè)面導(dǎo)航。同時(shí)，也可以通過路由參數(shù)傳遞數(shù)據(jù)，實(shí)現(xiàn)組件之間的通信。
6. 提供導(dǎo)航守衛(wèi)：Vue路由提供了導(dǎo)航守衛(wèi)的功能，可以在路由切換前后執(zhí)行一些額外的邏輯，例如權(quán)限驗(yàn)證、頁(yè)面切換動(dòng)畫等。

總的來(lái)說，Vue路由可以幫助開發(fā)者更好地管理頁(yè)面導(dǎo)航，提供良好的用戶體驗(yàn)，并且支持動(dòng)態(tài)路由和導(dǎo)航守衛(wèi)等功能，使得開發(fā)者可以更靈活地控制頁(yè)面的展示和交互。

1.2 實(shí)例

( 1 )? 引入

創(chuàng)建 HTML 文件，在該文件中進(jìn)行引入js依賴

<!-- 1.引入vue的js依賴 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<!-- 1.引入路由的js依賴 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

( 2 )? 組件

在 script 標(biāo)簽中定義組件

// 2.定義組件
const Home = Vue.extend({template: "<div><p>言情小說網(wǎng)</p><div>本網(wǎng)站首頁(yè)內(nèi)容</div></div>"
});
const Abort = Vue.extend({template: "<div><p>永遠(yuǎn)不掉落女人的陷阱</p><div>本站意義：做西格瑪男人</div></div>"
});

( 3 )? 關(guān)系

在 script 標(biāo)簽中定義組件與路徑的對(duì)應(yīng)關(guān)系

//3.定義組件與路徑的對(duì)應(yīng)關(guān)系let routes = [{path: '/Home',component: Home},{path: '/Abort',component: Abort}];

( 4 )? 路由

在 script 標(biāo)簽中定義路由

    // 4.定義路由const router = new VueRouter({routes});new Vue({el: '#app',router})

( 5 )? 事件

在Vue邊界中定義觸發(fā)路由事件的按鈕?

    <!-- 5.觸發(fā)路由事件的按鈕 --><router-link to="/Home">首頁(yè)</router-link><router-link to="/Abort">變強(qiáng)</router-link>

( 6 )? 錨點(diǎn)

在Vue邊界中定義錨點(diǎn)(路由內(nèi)容)?

        <!-- 6.定義錨點(diǎn)(路由內(nèi)容) --><router-view></router-view>

整合

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!-- 1.引入vue的js依賴 --><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><!-- 1.引入路由的js依賴 --><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script><title>路由</title></head><body><div id="app"><!-- 5.觸發(fā)路由事件的按鈕 --><router-link to="/Home">首頁(yè)</router-link><router-link to="/Abort">變強(qiáng)</router-link><!-- 6.定義錨點(diǎn)(路由內(nèi)容) --><router-view></router-view></div><script type="text/javascript">// 2.定義組件const Home = Vue.extend({template: "<div><p>言情小說網(wǎng)</p><div>本網(wǎng)站首頁(yè)內(nèi)容</div></div>"});const Abort = Vue.extend({template: "<div><p>永遠(yuǎn)不掉落女人的陷阱</p><div>本站意義：做西格瑪男人</div></div>"});//3.定義組件與路徑的對(duì)應(yīng)關(guān)系let routes = [{path: '/Home',component: Home},{path: '/Abort',component: Abort}];// 4.定義路由const router = new VueRouter({routes});new Vue({el: '#app',router})</script></body>
</html>

執(zhí)行效果

二、nodeJS

Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行時(shí)環(huán)境，用于構(gòu)建高性能、可擴(kuò)展的網(wǎng)絡(luò)應(yīng)用程序。它允許開發(fā)者使用JavaScript語(yǔ)言來(lái)編寫服務(wù)器端的應(yīng)用程序，并提供了豐富的庫(kù)和模塊，方便開發(fā)者進(jìn)行網(wǎng)絡(luò)通信、文件操作、數(shù)據(jù)庫(kù)訪問等操作。

Node.js采用事件驅(qū)動(dòng)、非阻塞I/O模型，使得它能夠處理大量并發(fā)連接，具有出色的性能表現(xiàn)。它還擁有一個(gè)強(qiáng)大的包管理器npm，可以方便地安裝、管理和共享代碼庫(kù)。

2.1 下載

下載?nodeJS 資源包 : 下載 | Node.js

?注1：Node有兩個(gè)版本線: LTS是長(zhǎng)期維護(hù)的穩(wěn)定版本Current是新特性版本?

2.2? 安裝

將文件解壓到指定位置，并在解壓后的目錄下建立node_global和node_cache這兩個(gè)目錄

node_global：npm全局安裝位置
node_cache：npm緩存路徑

如圖 :?

2.3 環(huán)境搭建

新增

打開設(shè)置 -> 系統(tǒng) -> 系統(tǒng)信息 -> 高級(jí)系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 在系統(tǒng)變量中點(diǎn)擊新建

新增一個(gè)環(huán)境變量

變量名 :?NODE_HOME

變量值 :

下載后解壓的指定目錄如(?D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 )

?操作如圖 :?

添加

在系統(tǒng)變量中找到名為 :?PATH 變量名的變量選中后，添加以下兩個(gè)環(huán)境變量

需要添加的變量值 :?

%NODE_HOME%

%NODE_HOME%\node_global

注 : 根據(jù)自己的電腦看是否在變量值后面增加分號(hào)來(lái)間隔變量值。

如 :

%NODE_HOME%;

%NODE_HOME%\node_global;

操作如圖 :?

測(cè)試

測(cè)試安裝是否成功及環(huán)境變量是否配置完成

Win+R，輸入cmd，打開cmd窗口，輸出如下命令配置環(huán)境變量的查看
? ? ? ? ? ?echo %node_home%
? ? ? ? ? ?echo %path%

操作如圖 :??

Win+R，輸入cmd，打開cmd窗口，輸出如下命令測(cè)試安裝是否成功

? ? ? ? ? ?node -v
? ? ? ? ? ?npm -v

操作如圖 :?

配置

配置npm全局模塊路徑和cache默認(rèn)安裝位置

Win+R，輸入cmd，打開cmd窗口，分開執(zhí)行如下命令：

npm config set cache "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"

注：

以上的路徑是下載node的本地路徑，再進(jìn)入到增加新建的兩個(gè)文件目錄里面

其中的雙引號(hào)不能少

如果執(zhí)行命令卡死，可以刪除C:\Users\用戶名\.npmrc 后重新執(zhí)行。（用戶名：為當(dāng)前電腦的用戶名）