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

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

先把vue中核心的地方弄懂

在閱讀此文章之前保證你學會了作者之前發(fā)布的文章內(nèi)容，

或者你自己了解其他方式實現(xiàn)的以下內(nèi)容：

1.webpack項目搭建技巧

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

3.什么是熱更新

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

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

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

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

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

下面我們來看一下主文件結(jié)構(gòu)

我們本次使用的是test2系列

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

首先在tpl中創(chuàng)建tem1.vue

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

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

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

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

好了，我們在網(wǎng)頁內(nèi)引入模版就只需要這么幾步的操作，

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

這樣就意味著我們在網(wǎng)頁內(nèi)實現(xiàn)的超鏈接跳頁也需要在單頁中進行切換

vue提供了一個路由功能，

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

我們做一個簡單的例子

在這之前我們需要創(chuàng)建第二個vue模版tem2

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

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

好了下面可以看界面結(jié)果了

兩個呈現(xiàn)超鏈接狀態(tài)的文字可以隨時切換下面的顯示內(nèi)容

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

那么如果我想往虛擬的頁面中傳入?yún)?shù)應該怎么辦呢

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

最后我們做一下測試吧

這是默認狀態(tài)

當我們點擊app1時出現(xiàn)的效果

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

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

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

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

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

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

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

so

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。