前言：

今天我們來講解關于Vue的路由使用，Node.js下載安裝及環(huán)境配置教程

一，Vue的路由使用

首先我們Vue的路由使用，必須要導入官方的依賴的。

BootCDN - Bootstrap 中文網(wǎng)開源項目免費 CDN 加速服務https://www.bootcdn.cn/

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

路由思路
1、引入路由的js依賴
2、定義組件內(nèi)容用來顯示網(wǎng)頁中的內(nèi)容
3、定義路由路徑關系
4、通過路由關系獲取對象
5、掛載實例上
6、觸發(fā)點擊事件
7、定錨點，展示內(nèi)容?

具體步驟：

1、引入路由的js依賴

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、定義組件內(nèi)容用來顯示網(wǎng)頁中的內(nèi)容

			// 2定義組件內(nèi)容用來顯示網(wǎng)頁中的內(nèi)容
			var Home = Vue.extend({
				template: '<div>網(wǎng)站首頁內(nèi)容</div>'
			});
			var About = Vue.extend({
				template: '<span>發(fā)展歷史</span>'
			});

3、定義路由路徑關系

	//3定義路由路徑關系
			var routes = [{
				component: Home,
				path: '/home'
			},
			{
				component: About,
				path: '/about'
			}
			]

4、通過路由關系獲取對象

//4通過路由關系獲取對象
			var router = new VueRouter({routes});

5、掛載實例上

//5掛載實例上
			new Vue({
						el: '#app',
						router,
						data() {
							// 創(chuàng)造數(shù)據(jù)：以后我們結(jié)合后臺就會從數(shù)據(jù)庫中獲取json格式的數(shù)據(jù)
							return {
								msg: '云'
							}
						}
					})

6、觸發(fā)點擊事件

			<!-- 6觸發(fā)點擊事件 -->
			<router-link to="/home">點我回首頁</router-link>
			<router-link to="/about">關于本網(wǎng)站</router-link>

7、定錨點，展示內(nèi)容?

			<!-- 7定錨點，展示內(nèi)容 -->
			<router-view></router-view>

效果：我們點擊后，上面的刷新按鈕是沒有刷新的，這就意味著我們與后臺交互后，如果數(shù)據(jù)量多的話，那數(shù)據(jù)展示就不會停下很長時間。

二，Node.js下載安裝及環(huán)境配置教程?

Node.js的介紹：

Node.js是一個基于Chrome V8引擎的JavaScript運行環(huán)境。 Node.js使用了一個事件驅(qū)動、非阻塞式I/O 的模型。Node.js是一個讓JavaScript運行在服務端的開發(fā)平臺，它讓JavaScript成為與PHP、Python、Perl、Ruby等服務端語言平起平坐的腳本語言?

Node.js官網(wǎng)：下載 | Node.js (nodejs.org)https://nodejs.org/zh-cn/download

npm是什么？

npm其實是Node.js的包管理工具（package manager）。方便我們項目操作用的。

如果想下載先前版本也可以：

下載后是個zip文件（安全性高），我們解壓后，通過cmd窗口測試安裝是否成功，按下【win+R】鍵，輸入cmd，運行黑窗口??

? ? ?輸入指令：node -v? ? ?// 顯示node.js版本

? ? ? ? ? ? ? ? ? ? ?? npm -v? ? ? // 顯示npm版本

成功顯示版本說明安裝成功

注意事項：

node.js的版本區(qū)別，v14版本以下與以上有著巨大的差別

?三、環(huán)境配置

（1）找到安裝的目錄，在安裝目錄下新建兩個文件夾（node_global）（node_cache）。一定要是在安裝node.js的根目錄下。

（2）配置環(huán)境變量

?新增NODE_HOME，值為：D:\soft\node-v10.15.3-win-x64

?修改PATH并在最后添加：window11不用;

%NODE_HOME%??????????%NODE_HOME%\node_global

（3）創(chuàng)建完畢后，使用管理員身份打開cmd命令窗口，輸入

①npm config set prefix “你的路徑\node_global” （復制你剛剛創(chuàng)建的“node_global”文件夾路徑）

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

?②npm config set cache “你的路徑\node_cache” ?（復制你剛剛創(chuàng)建的“node_cache”文件夾路徑）

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

（4）安裝淘寶鏡像

 npm config set registry https://registry.npm.taobao.org/

安裝成功后會在C:\Users\用戶名\下生成.npmrc文件

?四、測試

? 配置完成后，全局安裝一個最常用的 express 模塊進行測試

npm install express -g ? // -g代表全局安裝

運行解壓的項目--》npm i? （這里加載的時間比較長）

五、安裝淘寶鏡像

①安裝淘寶鏡像

npm config set registry https://registry.npm.taobao.org

? 查看是否成功：

npm config get registry

這個vue項目私信我可得，我們先進到該項目的根目錄輸入cmd.

啟動項目

??npm run dev

啟動效果：

文章來源地址http://www.zghlxwxcb.cn/news/detail-731787.html

到了這里，關于Vue的路由使用，Node.js下載安裝及環(huán)境配置教程 （超級詳細）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！