教你怎樣快速建立Vue單頁面應用

Vue.js是一套目前比較流行的構建使用者介面的漸進式框架，Vue 能夠為複雜的單頁應用程式提供驅動。廢話不多說，進入正題。

1.安裝：

首先您需要安裝npm，如何安裝npm，請參考node.js相關內容。 安裝vue $ npm install vue 全域性安裝 vue-cli $ npm install --global vue-cli 建立一個基於 webpack 模板的新專案 $ vue init webpack my-project 這裡需要一些配置，預設按回車即可，注意 ? Use ESLint to lint your code? No 這一項選No

2.執行：

進入專案 $ cd my-project 安裝依賴 $ npm install 執行服務 $ npm run dev 教你怎樣快速建立Vue單頁面應用X 這時就會執行一個本地服務，服務埠號預設為8080，如下如： 教你怎樣快速建立Vue單頁面應用 專案結構如下圖： 教你怎樣快速建立Vue單頁面應用 您可以在components中建立多個Vue檔案，每個Vue檔案就是一個元件，App.vue是主元件，它的模板內容最後在index.html頁面展示。 教你怎樣快速建立Vue單頁面應用 Hello.vue程式碼如下： 教你怎樣快速建立Vue單頁面應用 App.vue程式碼如下： 教你怎樣快速建立Vue單頁面應用

3.設定路由：

路由設定在router下的index.js中，如下： 教你怎樣快速建立Vue單頁面應用

4.請求資料：

如果您需要向服務端請求資料，您首先要安裝vue-resource $ npm install vue-resourse --save 安裝完成後您需要在main.js中引入並使用，main.js如下： 教你怎樣快速建立Vue單頁面應用 比如您在test.vue中使用http請求，如下： 教你怎樣快速建立Vue單頁面應用 這時就會將請求到的資料展示到test頁面中： 教你怎樣快速建立Vue單頁面應用 至此，我們的一個簡單的單頁面應用就搭建好了。