您好,登錄后才能下訂單哦!
這篇文章主要介紹webpack+vue+node如何實(shí)現(xiàn)單頁(yè)面,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
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 <module> --save
比如需要安裝vue-router路由模塊直接用腳手架cnpm install vue-router--save 就可以了
4.構(gòu)建webpack的vue應(yīng)用:vue init webpack <filename>
在這里特別提一下 webpack,前面在安裝 webpack 模板時(shí),有一個(gè)選擇項(xiàng),是否使用 ESLint 來規(guī)范你的代碼,
ESLint 對(duì)于平時(shí)不太注意代碼縮進(jìn)的朋友可能是一個(gè)噩耗,稍微修改下程序代碼,如果縮進(jìn)不符規(guī)范,甚至空格都有可能一堆操蛋的報(bào)錯(cuò)
注明下vue-cli 的模板,vue-cli 模板分為 官方模板、自定義模板、本地模板
官方模板分為
browserify -- 擁有高級(jí)功能的 Browserify + vueify 用于 正式開發(fā)
browserify-simple -- 擁有基礎(chǔ)功能的 Browserify + vueify 用于 快速開發(fā)
simple -- 單個(gè) HTML,用于開發(fā)最簡(jiǎn)單的 Vue.js 應(yīng)用
webpack -- 擁有高級(jí)功能的 Webpack + vue-loader 用于正式開發(fā)
webpack-simple -- 擁有基礎(chǔ)功能的 Webpack + vue-loader 用于快速開發(fā)
5.腳手架安裝依賴
6.直接運(yùn)行看效果
PS:自己寫了一個(gè)demo 結(jié)合了路由、路由嵌套、子路由、遠(yuǎn)程跨域獲取數(shù)據(jù),bootstrap等功能
代碼已經(jīng)上傳到我的github,地址:https://github.com/LeonardLmyt/learngit/tree/master/vue-single-page
以上是“webpack+vue+node如何實(shí)現(xiàn)單頁(yè)面”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。