Vue筆記整理,專題之路由:2、路由-安裝vue-router的三種方式

目錄

前言

安裝

#直接下載 / CDN

#NPM

#構建開發版

安裝說明

第一種方式:直接下載 / CDN(在網頁裏面直接進行開發)

第二種方式:NPM(通過webpack這種構建工具來開發)

第三種方式:構建開發版


前言

上一節我們介紹了前端路由和後端路由的概念以及區別,詳見博文:原創 Vue筆記整理,專題之路由:1、路由-前端路由和後端路由的概念 這篇我們將介紹如何安裝理由

安裝

可參考官方文檔:https://router.vuejs.org/zh/installation.html

#直接下載 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基於 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發佈的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 這樣指定 版本號 或者 Tag。

在 Vue 後面加載 vue-router,它會自動安裝的:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

#NPM

npm install vue-router

如果在一個模塊化工程中使用它,必須要通過 Vue.use() 明確地安裝路由功能:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 標籤,則無須如此 (手動安裝)。

#構建開發版

如果你想使用最新的開發版,就得從 GitHub 上直接 clone,然後自己 build 一個 vue-router

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

 

安裝說明

第一種方式:直接下載 / CDN(在網頁裏面直接進行開發)

直接通過地址:https://unpkg.com/vue-router/dist/vue-router.js ,進行下載 vue-router.js 的文件,你把它下載完成以後,它就是路由的一個包,然後我們就可以在頁面代碼裏面,先後引入:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

爲什麼要把 v-router.js 文件的導入放在 vue.js 文件後面呢?

因爲在 vue.js 文件後面導入,之後我們的路由 v-router 就可以向全局的 vue 上面掛載一些相關的屬性了。

 

第二種方式:NPM(通過webpack這種構建工具來開發)

通過 npm 來安裝

npm install vue-router

那麼安裝以後,怎麼來引用呢?

如果在一個模塊化工程中使用它,必須要通過 Vue.use() 明確地安裝路由功能。

也就是說,如果你的項目是基於模塊化,來進行構建開發的,如:webpack它就是一個前端的模塊化構建工具,用 webpack 就可以進行我們的模塊化開發,那麼如果你用 webpack 進行相關的構建,那我們必須要通過 Vue.use() 手動的去安裝路由功能。如下:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

第一步:導入 vue 模塊

第二步:vue-router 路由模塊

第三步:Vue.use(VueRouter) 也就是相當於:通過 use 方法,把 VueRouter 註冊到 Vue 上面

如果使用全局的 script 標籤,則無須如此 (手動安裝)。 

 

第三種方式:構建開發版

這種方式就不多說了

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章