當前位置:
首頁 > 知識 > webpack + vue + node 打造單頁面(入門篇)

webpack + vue + node 打造單頁面(入門篇)

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

webpack + vue + node 打造單頁面(入門篇)

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

webpack + vue + node 打造單頁面(入門篇)

3.安裝vue-cli:cnpm install -g vue-cli

安裝webpack:cnpm install -g webpack

-g 表示全局安裝

webpack + vue + node 打造單頁面(入門篇)

webpack + vue + node 打造單頁面(入門篇)

4.構建webpack的vue應用:vue init webpack <filename>

webpack + vue + node 打造單頁面(入門篇)

在這裡特別提一下 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.腳手架安裝依賴

webpack + vue + node 打造單頁面(入門篇)

6.直接運行看效果

webpack + vue + node 打造單頁面(入門篇)

webpack + vue + node 打造單頁面(入門篇)


文章來自博客園

找工作難?那是你沒選對行業!

2017年【中公教育】特別推出2017年就業促進計劃,500萬就業基金助你成為IT達人

詳情請戳:http://www.ujiuye.com/zt/jycj/?wt.bd=fq37300j

什麼?海量IT學習資料白給你都不要?別想了,加群搶:584053956

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 IT優就業 的精彩文章:

實用的PHP語言實例代碼
關於Android WebView上傳文件的解決方案
一種Webconfig自動化升級方法
常用的SEO免費工具

TAG:IT優就業 |