node.js是什么
- 簡單的說 Node.js 就是運行在服務(wù)端的 JavaScript柒凉。
- Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺钳宪。
- Node.js是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎寨辩，V8引擎執(zhí)行Javascript的速度非常快歼冰，性能非常好靡狞。
node的安裝
下載地址：http://nodejs.cn/
安裝：這里安裝的是Windows7,64位的
node-v8.11.4-x64.msi安裝步驟，雙擊下載下來的安裝文件停巷，按提示填寫安裝路徑耍攘，然后就是一路的next榕栏，直到最后的installed，然后就是完成
檢查是否安裝成功
cmd 打開命令窗口輸入 path檢查安裝的時候時候自動給你添加上環(huán)境配置
然后繼續(xù)輸入node -v 檢查node的版本號
然后就是檢查npm的版本號蕾各，這是node的安裝的時候扒磁，自帶安裝的一個管理工具
至此安裝完成如圖下所示
npm介紹
- NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題式曲，常見的使用場景有以下幾種：
- 允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用妨托。
- 允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用。
- 允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用吝羞。
由于新版的nodejs已經(jīng)集成了npm兰伤，所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝钧排。命令如下敦腔，出現(xiàn)版本提示表示安裝成功
- npm -v
安裝cnpm
由于npm有些資源被屏蔽或者是國外資源的原因，經(jīng)常會導(dǎo)致用npm安裝依賴包的時候失敗恨溜，所以建議使用npm的國內(nèi)鏡像---cnpm
-
下載：在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org
image.png
webpack
-
webpack是什么
image.png- 可以看做是模塊打包機：它做的事情是符衔，分析你的項目結(jié)構(gòu)，找到 JavaScript 模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss糟袁，TypeScript 等）判族，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用
或者是：webpack是一個前端模塊化方案，更側(cè)重模塊打包项戴，我們可以把開發(fā)中的所有資源（圖片形帮、js 文件、css 文件等）都看成模塊周叮，通過 loader（加載器）和 plugins（插件）對資源進行處理辩撑，打包成符合生產(chǎn)環(huán)境部署的前端資源。
舉個例子则吟，很多人開發(fā)了各種優(yōu)秀的 JavaScript 模塊或組件槐臀，我們不想重復(fù)發(fā)明輪子，而是想直接利用別人的模塊氓仲，就是類似 require 或 include 這樣的機制水慨，把別人的模塊引入進來，但是 JavaScript 又沒有 類或包 這樣的概念敬扛，那應(yīng)該如何做呢晰洒？
如何去引入別人的模塊？引入之后保證各種依賴關(guān)系不出錯啥箭？這就是 webpack 要解決的問題谍珊。
模塊化的概念我們理解了，那如何理解 打包 這個詞呢急侥？ 其實砌滞，模塊化的問題解決之后侮邀，webpack 就能把各種資源模塊打包合并成一個文件輸出給瀏覽器。在打包的過程中還能對這些資源進行處理贝润，比如壓縮減少體積绊茧，把 sass 編譯成 css, coffee 編譯成 js。所以它在某些程度上打掘，跟grunt/gulp 的功能有些相同
與 grunt/gulp 的區(qū)別:雖然都是前端自動化構(gòu)建工具华畏，但看他們的定位就知道不是對等的。grunt/gulp 嚴格上講尊蚁，模塊化不是他強調(diào)的東西亡笑，他旨在規(guī)范前端開發(fā)流程。webpack 更是明顯強調(diào)模塊化開發(fā)横朋，而那些文件壓縮合并仑乌、預(yù)處理等功能，不過是他附帶的功能叶撒。
打個比方绝骚，如果你的工程模塊依賴很簡單，不需要把 js 或各種資源打包祠够，只需要簡單的合并、壓縮粪牲，那就不需要 webpack古瓤。grunt/gulp 就夠用了。反過來腺阳，如果你的工程龐大落君，頁面中使用了很多庫（SPA很容易出現(xiàn)這種情況），那就可以選擇使用 webpack亭引，因為這樣既能做到模塊化管理绎速，也能做到 grunt/gulp 的一些功能，比如壓縮焙蚓，轉(zhuǎn)化coffeescript 為 js 等纹冤。
webpack下載
- 安裝vue-cli
- vue-cli是什么
- vue-cli這個構(gòu)建工具大大降低了webpack的使用難度，支持熱更新购公，有webpack-dev-server的支持萌京，相當于啟動了一個請求服務(wù)器，給你搭建了一個測試環(huán)境宏浩，只關(guān)注開發(fā)就OK知残。
- 安裝 ：cnpm install vue-cli -g
補充
-
這里檢查webpack的時候沒有顯示他的版本號，說明沒有安裝成功比庄。
image.png
是因為webpack 4.X 開始求妹，需要安裝 webpack-cli 依賴 ,所以使用這條命令 npm install webpack webpack-cli -g 來安裝乏盐，安裝成功后先檢查webpack的版本號，就能正常顯示出來了
image.png
這里應(yīng)該是學(xué)習(xí)vue前端框架的一些關(guān)于環(huán)境和工具的安裝使用教程總結(jié)制恍。既是對自己學(xué)習(xí)的記錄父能，也是希望對你有用！
在學(xué)習(xí)的過程中查看的一些網(wǎng)上資料吧趣，鏈接如下
- https://blog.csdn.net/wulala_hei/article/details/80488674
- https://blog.csdn.net/wypersist/article/details/80492576
- https://blog.csdn.net/WYpersist/article/details/80496259
- http://www.runoob.com/nodejs/nodejs-tutorial.html
- https://blog.csdn.net/helloxiaoliang/article/details/78436364
- https://www.webpackjs.com/
