有的同學在學習中陷入了迷茫，在不清楚知識體系的情況下亂學一通，最后導致了基礎會一點，后面的知識大概了解

就是沒法徹底掌握，所以在這里希望大家如果有陷入vue迷茫的小伙伴不要過早的使用vue腳手架

先把vue中核心的地方弄懂

在閱讀此文章之前保證你學會了作者之前發布的文章內容，

或者你自己了解其他方式實現的以下內容：

1.webpack項目搭建技巧

2.常用的webpack的各種loader以及es5，6的基礎語法

3.什么是熱更新

4.webpack自帶服務器活著webpack的node API

5.vue的基本引入以及常用組件知識

今天我們直接跳過頁面聲明模版的寫法來學習外部vue文件的引用方式

首先需要在你的項目中引入vue的依賴包以及vue-loader 還有 vue-router

package.json如圖，其他組件不同也沒事

下面我們來看一下主文件結構

我們本次使用的是test2系列

首先我們先來演示以下如何在主文件內引用外部的vue文件

首先在tpl中創建tem1.vue

如圖（vue文件如何書寫作為前置條件，不會的童鞋可以自己查閱官方文檔）

這是我們準備好的一個簡單vue模塊

下面演示如何加載到test2.html

需要在test2.js中使用Vue對象將模版文件渲染到頁面中

好了，我們在網頁內引入模版就只需要這么幾步的操作，

那么vuejs是單頁應用的一個框架，所以我們在同一個文件中可能會引入大量的模版文件

這樣就意味著我們在網頁內實現的超鏈接跳頁也需要在單頁中進行切換

vue提供了一個路由功能，

通過中間件vue-router就可以實現快速的切換模版文件就向在網頁中進行跳頁的效果一樣

我們做一個簡單的例子

在這之前我們需要創建第二個vue模版tem2

步驟可以重復上面的操作這里省略步驟

此時我們只需要在test2.js中和test2.html中做如下修改即可實現路由功能

好了下面可以看界面結果了

兩個呈現超鏈接狀態的文字可以隨時切換下面的顯示內容

到這里引用vue以及路由的簡單使用我們應該大概有個印象了，

那么如果我想往虛擬的頁面中傳入參數應該怎么辦呢

我們可以在router-link 中做如下修改，并且在對應的頁面做接值操作就可以了

最后我們做一下測試吧

這是默認狀態

當我們點擊app1時出現的效果

怎么樣，相比繁瑣的界面處理，vue.js讓你的代碼變得更加整潔并且有調理了吧

我們做到了將所有的界面部分都拆分成了各個模塊并且單獨做管理，模塊間還可以通過框架獲得通信，

這樣我們可以讓一個很大很散亂的項目編程一個可維護性極強的單頁應用，

為什么單頁應用在現在這個時代如此受歡迎是因為它確實有他的好處，

而且vue.js在這方面吸取了react.js以及angular.js的優點，雖然它看起來沒有前兩者的名頭大，但是它憑借自身的優勢，

以及較低的學習成本和更加人性化的api取得了大量開發者的青睞

如此時代，如果你還只掌握jQuery等基礎代碼庫，那么就永遠都無法跟上前端學習的腳步了，

so

如果想領略vue的更多風采，把基礎補全，之后去安裝vue腳手架吧

總結

以上是生活随笔為你收集整理的在使用vue脚手架之前你必须掌握的:vue的模版以及路由用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。