摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因為需要用到的，所以確保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。

本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因為需要用到node的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項目中需要加載一些npm包，由于npm的服務(wù)器在國外，可能我們下載的過程會比較慢，所以建議用阿里的鏡像cnpm安裝，10分鐘實時更新一次npm的鏡像。具體的下載配置參考阿里的cnpm官網(wǎng)。本文章只是和大家探討怎么利用webpack配合vue.js做一個單頁面應(yīng)用，具體關(guān)于vue里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。具體請參考官方文檔，里面做了詳細(xì)的vue的語法介紹.

閱讀過webpack文檔

閱讀過vue-router文檔

知道什么叫單頁面應(yīng)用

├── README.md           
├── index.html         // 項目入口文件
├── package.json       // 項目配置文件
├── src                // 生產(chǎn)目錄
│   ├── vue         // 組件
│   |    ├──home.vue
│   |    ├──blog.vue
│   |    ├──about.vue
│   |    ├──topic.vue
│   ├── components     // 各種組件
│   ├── views          // css文件
│   ├── scss               //scss文件
│   └── main.js        // Webpack 預(yù)編譯入口
└── webpack.js  // Webpack 配置文件

在介紹怎么配置之前你需要掌握一個命令 npm install <模塊> --save-dev這個命令的意思是這個命名的意思是我們安裝了這個包并且把它的基本信息寫入目錄的package.json文件。還有一個命令是我們直接運行cnpm install會自動下載package.json里面寫入的包.

在webpack的配置文件我們需要用到四個npm的模塊分別是：path，webpack，extract-text-webpack-plugin,vue-loader記得先下載包在用require命令引入進(jìn)來

//node的路徑模塊
var path=require("path");
//我們是webpack當(dāng)然要引入這個
var webpack = require("webpack");
//這個是構(gòu)建頁面資源的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
//因為我們是vue.js的應(yīng)用，把各個組件當(dāng)做一個頁面.vue后綴，所以引入這個可以編譯這些文件
var vue = require("vue-loader");

好了，我們已經(jīng)把需要的模塊引入進(jìn)來了，接下來我們定義一些接下來要用到的一些文件夾路徑

//__dirname是node里面的一個變量，指向的是當(dāng)前文件夾目錄
var ROOT_PATH = path.resolve(__dirname);
//這個我們的文件入口，等下我們就會從main.js這個文件作為入口
var APP_PATH = path.resolve(ROOT_PATH, "src/main.js");
//這個是文件打包出來的輸出路徑
var BUILD_PATH = path.resolve(ROOT_PATH, "build");

基本的文件路徑我們已經(jīng)定義好了，接下來我們要用到extract-text-webpack-plugin這個插件了

var plugins = [
  //提公用js到common.js文件中
  new webpack.optimize.CommonsChunkPlugin("common.js"),
  //將樣式統(tǒng)一發(fā)布到style.css中
  new ExtractTextPlugin("style.css"),
 // 使用 ProvidePlugin 加載使用率高的依賴庫
  new webpack.ProvidePlugin({
    $: "webpack-zepto"
  })
];

接下來是webpack的重點了loader，webpack的思想是把每個靜態(tài)資源文件當(dāng)做一個模塊加載，我們需要做一些配置，在這里我們需要用到編譯css，sass模塊，多以我們還需要安裝"css-loader","style-loader","node-sass","md5"

module.exports = {
     //文件的入口，還可以寫成多數(shù)組的形式，具體自己擴展
     entry:[APP_PATH],
     //輸出
     output:{
         //輸出路徑
         path: BUILD_PATH，
         //打包的js命名
         filename：build.js"
         // 指向異步加載的路徑
         publicPath : __dirname + "/build/",
         // 非主文件的命名規(guī)則，加緩存用到md5
         chunkFilename: "[id].build.js?[chunkhash]"
     },
     module: {
         loaders: [
              {
                test: /.vue$/,
                loader: "vue",
              },
              {
                test: /.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
              },
              {
                test: /.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
              },
              {
                test: /.(png|jpg)$/,
                loader: "url?limit=40000"
              }
         ]
    },
  //這個特別說明下，vue提倡把一個組件當(dāng)做一個頁面，所以可能在一個頁面寫html，style，javascript，也可以引入和寫scss文件
  vue: {
    css: ExtractTextPlugin.extract("css"),
    sass: ExtractTextPlugin.extract("css!sass-loader")
  },
  plugins: plugins
}

這里我們需要三個npm模塊，vue，vue-router，vue-resource三個模塊，我們依次安裝然后在引入

//vue的應(yīng)用當(dāng)然要引，等下要用它來注冊
var Vue = require("vue")
//這個是路由，spa應(yīng)用必要哦
var VueRouter = require("vue-router");
//這個是類似ajax請求,肯定要拉去數(shù)據(jù)啦，所以也下載吧
var VueResource = require("vue-resource");

在vue里面聲明并注冊個空組件

Vue.use(VueRouter);
Vue.use(VueResource);
var app = Vue.extend({});

實例化VueRounter

var router = new VueRouter({
    // 當(dāng)hashbang的值為true時，所有的路徑都會被格式化已#!開頭，
    hashbang: true,
    history: false,
    saveScrollPosition: true,
    transitionOnLoad: true
});

接下來寫下我們的路由路徑，也可以多帶帶把路由寫在一個文件，我們這邊只是個demo所以寫一起了，不打緊，關(guān)于這塊路由的寫法可以具體參考下vue-router的文檔http://router.vuejs.org/zh-cn...，將的很詳細(xì)。

這里有必要將一下，webpack提供了異步加載功能，配合vue-router的路由使用，當(dāng)哪個組件需要渲染是，會加載它依賴的組件，并且異步加載進(jìn)來。是不是很棒。

router.map({
     "/":{                    //首頁
        component: function (resolve) {
           require(["./vue/home.vue"],resolve)
         }
    },
    "/home":{
        name : "home",                    //首頁
        component: function (resolve) {
           require(["./vue/home.vue"],resolve)
         }
    },
    "/blog":{
         name : "blog",               //博客列表
        component: function (resolve) {
           require(["./vue/blog.vue"],resolve)
         }
    },
    "/blog/topic":{
         name : "topic",
         //文章詳情
         component: function (resolve) {
           require(["./vue/topic.vue"],resolve)
         }
    },
    "/about":{
         name : "about",
         //關(guān)于
         component: function (resolve) {
           require(["./vue/about.vue"],resolve)
         }
    }
})

再加句代碼，測試訪問路由訪問是否成功

router.afterEach(function (transition) {
  console.log("成功瀏覽到: " + transition.to.path)
})

最后我們注冊下vue

router.start(app, "#app");

用于渲染匹配的組件，它基于 Vue 的動態(tài)組件系統(tǒng)。我們的index.html結(jié)構(gòu)是這樣子的

關(guān)于組件，vue提倡一個模塊寫一個具體的組件比如列表組件可以list.vue，然后根據(jù)路由加載具體的組件，組件之間也可以相互的引用，具體參考vue文檔。

為了方便我們測試，我們以home為例，其他組件也類似，方便等下測試，等項目能完整跑起來你在自己去添加組件里面的內(nèi)容。

關(guān)于一個單頁面的大體的框架我們已經(jīng)搭建好了，現(xiàn)在直接運行webpack就能把文件載出來了。然后打開index.html直接測試就好了。更詳細(xì)的demo已經(jīng)提交到github上了 demo,還有本人使用webpack+vue+es6+sass的技術(shù)棧重構(gòu)的Cnode中文網(wǎng)單頁面應(yīng)用，感興趣的可以圍觀下，歡迎star。

在實際開發(fā)過程中我們肯定不是每一次修改保存，然后在運行一下webpack命令，那樣就太麻煩了，所以我們用到了熱替換，webpack-dev-server這個包，安裝好這個包后在pack.json加上

"scripts": {
    "start": "webpack-dev-server --hot --inline"
}

并且把webpack.config.js這前我們配置好的

// 指向異步加載的路徑
 publicPath : __dirname + "/build/";

替換為

// 指向異步加載的路徑
 publicPath : "/build/";

為什么這樣做呢？因為我們這前用webpack是把組件異步加載在本地上，而我們用了熱替換后是地址委托到了http://localhost:8080/端口了，所以要去掉__dirname(指向本地根目錄),一切準(zhǔn)備完畢了，接下來直接運行npm start，然后打開http://localhost:8080/就可以訪問，試著修改內(nèi)容保存可以看看頁面實時的在刷新，是不是省了很多的開發(fā)時間呢！

vue.js的原作者為了方便我們做項目前期花費時間配置這些自動化構(gòu)建工具，出了一個vue-cli的腳手架，可以自動生成項目的一系列基本配置。vue-cli的github地址為https://github.com/vuejs/vue-cli，感興趣的童鞋可以去了解下。

2.0已經(jīng)出來了，相信以后大家也要慢慢跟上2.0的版本了，2.0在1.0的基礎(chǔ)上構(gòu)建這邊有一點點和1.0的區(qū)別，聽我講來。
在評論里有位同學(xué)說2.0已經(jīng)不支持1.0的路由方式了，恩，的確是，這里我把2.0的路由方式重新寫了下。

var Vue = require("vue");
var VueRouter = require("vue-router");
Vue.use(VueRouter);
const Home = resolve => {
    require.ensure(["./vue/home.vue"], () => {
        resolve(require("./vue/home.vue"));
    });
};
const List = resolve => {
    require.ensure(["./vue/list.vue"], () => {
        resolve(require("./vue/list.vue"));
    });
};
const routes = [{
        path: "/",
        name: "home",
        component: Home
    },{
        path: "/list",
        name: "list",
        component: List
    },{
        path: "*",
        component: Home
    }];
const router = new VueRouter({
    mode: "history",
    routes
});
new Vue({
    router
}).$mount("#app");

更多有關(guān)于路由的問題請參考vue-router2.0中文文檔。
還有一點問題是如果是用webpack構(gòu)建項目的時候，要在webpack.confing.js的配置文件加上

resolve: {
    alias: {
      "vue$": "vue/dist/vue.js"
    }
 }

因為vue2.0有兩種構(gòu)建模式，默認(rèn)情況下運行構(gòu)建，但是不能解析單文件的template模板，所以要使用獨立構(gòu)建。具體可以參考vue2.0中文文檔，其他一些關(guān)于語法的改變看下2.0的文檔就行了，還有vuex不被2.0影響，可以兼容。

覺得本篇文章對你有幫助的話可以關(guān)注我一下，后期會出一些關(guān)于基于vue.js開發(fā)單頁面開發(fā)心得，謝謝！
代碼已上傳在github