webpack、vue、node實作單頁碼分享

本文主要和大家介紹webpack + vue + node 打造單頁(入門篇) ，非常具有實用價值，需要的朋友可以參考下，希望能幫助到大家。

1.node下載網址：http://nodejs.cn/download/，安裝完成檢查node和npm版本

##2.淘寶鏡像： npm install cnpm -g --registry=https://registry.npm.taobao.org ，淘寶鏡像比npm快很多，可以直接用cnpm代替npm

#3.安裝vue-cli：cnpm install -g vue-cli

安裝webpack：cnpm install -g webpack

##-g 表示全域安裝

#程式設計過程中需要引入模組的話可以cnpm install --save

例如需要安裝vue-router路由模組直接用腳手架cnpm install vue-router--save 就可以了

#4.建構webpack的vue應用：vue init webpack

在這裡特別提一下webpack，前面在安裝webpack 模板時，有一個選擇項，是否使用ESLint 來規範你的程式碼，

ESLint 對於平常不太注意程式碼縮排的朋友可能是個噩耗，稍微修改下程式碼，如果縮排不符規範，甚至空格都有可能一堆操蛋的報錯

註明下vue-cli 的模板，vue-cli 模板分為官方模板、自訂模板、本地模板

官方範本分為

 browserify  --  擁有進階功能的Browserify + vueify 用於正式開發
 browserify-simple --  擁有基礎功能的Browserify + vueify 用於快速開發
 simple  --  單一HTML，用於開發最簡單的Vue.js 應用程式
# webpack  --  擁有進階功能的Webpack + vue-loader 用於正式開發
 webpack-simple  --  擁有基礎功能的Webpack + vue-loader 用於快速開發
5.鷹架安裝依賴

6.直接運行看效果

PS：自己寫了一個demo 結合了路由、路由嵌套、子路由、遠端跨域獲取數據，bootstrap等功能

代碼已經上傳到我的github，地址：https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page

相關推薦：

#實例講述vue中SPA單一頁面應用程式

HTML5單一頁面手勢滑螢幕切換如何實作

關於Vue. js如何操作單一頁面多路由區域的實例分析

以上是webpack、vue、node實作單頁碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！