藉助 Vue 來構建單頁面應用
(1/2)Vue構建單頁應用最佳實戰
前言
咱們將會選擇使用一些vue周邊的庫javascript
1.使用node.js後臺，瞭解到如何獲取數據php
2.實現單頁路由css
3.實現HTTP請求咱們的nodehtml
4.單項數據流前端
5.使用.vue文件進行開發vue
最終咱們將會構建出一個小demo，不廢話，直接上圖。
java
安裝
1.咱們將會使用webpack去爲咱們的模塊打包，預處理，熱加載。若是你對webpack不熟悉，它就是能夠幫助咱們把多個js文件打包爲1個入口文件，而且能夠達到按需加載。這就意味着，咱們不用去擔憂因爲太多的組件，致使了過多的HTTP請求，這是很是有益於產品體驗的。但，咱們並不僅是爲了這個而使用webpack，咱們須要用webpack去編譯.vue文件，若是沒有使用一個loader去轉換咱們.vue文件裏的style，js，html，那麼瀏覽器就沒法識別。node
2.模塊熱加載是webpack的一個很是碉堡的特性，將會爲咱們的單頁應用帶來極大的便利。 一般來講，當咱們修改了代碼刷新頁面，那應用裏的全部狀態就都沒有了。這對於開發一個單頁應用來講是很是痛苦的，由於須要從新在跑一遍流程。若是有模塊熱加載，當你修改了代碼，你的代碼會直接修改，頁面並不會刷新，因此狀態也會被保留。jquery
3.Vue也爲咱們提供了CSS預處理，因此咱們能夠選擇在.vue文件裏寫LESS或者SASS去代替原生CSS。webpack
4.咱們過去一般須要使用npm下載一堆的依賴，可是如今咱們能夠選擇Vue-cli。這是一個vue生態系統中一個偉大創舉。這意味着咱們不須要手動構建咱們的項目，而它就能夠很快地爲咱們生成。
首先，安裝vue-cli。(確保你有node和npm)
npm i -g vue-cli
而後建立一個webpack項目而且下載依賴
vue init webpack vue-time-tracker cd vue-time-tracker npm i
接着使用 npm run dev 在熱加載中運行咱們的應用
這一行命令表明着它會去找到 package.json 的 scripts 對象，執行 node bulid/dev-server.js 。在這文件裏，配置了Webpack，會讓它去編譯項目文件，而且運行服務器，咱們在 localhost:8080 便可查看咱們的應用。
這些都準備好後，咱們須要爲咱們的路由和XHR請求下載兩個庫，咱們能夠從vue的官網中找到他們。
npm i vue-resource vue-router --save
初始化（main.js）
查看咱們的應用文件，咱們能夠在src目錄下找到 App.vue 和 main.js 。在 main.js 文件中，咱們引入 Vue 和 App ，而且建立了一個vue的實例（由於在router這行引入了App組件 router.start(App, '#app') ）
// src/main.js
import Vue from 'vue' import App from './App.vue' import Hello from './components/Hello.vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' //註冊兩個插件 Vue.use(VueResource) Vue.use(VueRouter) const router = new VueRouter() // 路由map router.map({ '/hello': { component: Hello } }) router.redirect({ '*': '/hello' }) router.start(App, '#app')
咱們還須要在 index.html 包裹下咱們的 <app></app>
//index.html
<div id="app"> <app></app> </div>
咱們的初始化就到這結束了，接下來讓咱們開始建立別的組件。
建立首頁 View
首先，咱們須要爲咱們的應用增長下bootstrap.css，爲了方便，在這就直接在頭部引入CDN。
<head> <meta charset="utf-8"> <title>計劃板</title> <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> </head>
接着在App.vue裏爲咱們的應用寫個頂部導航。
// src/App.vue
<template>
<div id="wrapper"> <nav class="navbar navbar-default"> <div class="container"> <a class="navbar-brand" href="#"> <i class="glyphicon glyphicon-time"></i> 計劃表 </a> <ul class="nav navbar-nav"> <li><a v-link="'/home'">首頁</a></li> <li><a v-link="'/time-entries'">計劃列表</a></li> </ul> </div> </nav> <div class="container"> <div class=