手把手教你打造Vue小型項目

隨著互聯網的高速發展，前端技術也在不斷的更新與迭代，目前比較火的前端框架有Vue、React、Angular等。本文將帶著大家去學習一下Vue框架的使用，利用Vue框架來搭建一個小型的項目。

首先需要安裝Vue的開發環境，可以利用Vue官方提供的一個腳手架來初始化項目。執行以下命令：

npm install -g vue-cli

vue init webpack myApp

(圖1.1安裝腳手架)

註：其中myApp為項目的名字，可自行指定。

項目初始化完畢，就可以啟動我們的項目了，運行以下代碼：

cd myApp

npm run dev

(圖1.2初始化界面)

接下來就是配置一些靜態資源和組件的劃分，項目要用到的靜態資源需要放到static目錄下；而項目劃分的組件需要放到src/components目錄下，如下所示：

(圖1.3靜態資源)

(圖1.4組件劃分)

組件是Vue框架中很重要的一個概念，其目的就是讓一個功能或一個頁面形成一個組件，這樣就可以通過組件之間的組合來搭建出一個項目，這種模式非常適合多人協作開發，後期維護起來也是非常方便的。

在Vue框架中，組件為一個.vue文件，官方把這種文件叫做單文件組件。一個單文件組件可以實現組件的結構、樣式與行為。三者分別被放置到、、標籤中。

(圖1.5單文件組件)

接下來就是去配置項目中的路由了。那麼什麼是路由呢？路由是根據不同的 url 地址展示不同的內容或頁面。用 Vue.js + vue-router 創建單頁應用，是非常簡單的。

一般移動端的項目比較適合作成單頁面開發，這樣就非常適合使用路由來構建項目中的頁面間跳轉。路由的基本操作有：

1. 顯示路由對應的內容：

2. 點擊跳轉路由：Go to Foo

3. 嵌套路由：children

4. 動態路由："/detail/:id"

(圖1.6路由的配置信息)

好了，到此項目中的頁面就可以進行切換了，那麼接下來要考慮的就是頁面中的數據該怎麼獲取了。可以利用反向代理技術來獲取後端的數據，下面先來了解一下反向代理。

反向代理（Reverse Proxy）方式是指以代理伺服器來接受internet上的連接請求，然後將請求轉發給內部網路上的伺服器，並將從伺服器上得到的結果返回給internet上請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。

(圖1.7反向代理流程圖)

那麼怎麼在Vue項目中去配置反向代理呢？需要在config目錄中的index.js中進行配置，如下所示：

(圖1.8反向代理配置)

好了，到此我們的項目基本算是搭建完畢了，下面看下最終的項目效果圖：

(圖1.9項目效果圖)

最後給大家附上源碼下載的地址，方便自行學習：https://github.com/ghostdp/maizuoproject

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！