詳解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 <module> --save

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

 

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

 

在這里特別提一下 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.直接運行看效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM