1. 技術(shù)目標(biāo)
- NodeJS下載
- NodeJS安裝配置
- 與WebStorm整合使用
- Hello World入門
- 開源項(xiàng)目實(shí)戰(zhàn)
2. 技術(shù)介紹
2.1 什么是NodeJS加匈？
Node.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
2.2 什么是NodeJS與Npm的關(guān)系演顾？
npm的作用就是對Node.js依賴的包進(jìn)行管理沮趣，也可以理解為用來安裝/卸載Node.js需要裝的東西膘螟。
3. 環(huán)境配置
3.1 基礎(chǔ)工具
- NodeJS安裝包
- WebStorm安裝包
3.2 下載及參考地址
3.2.1 綠色版本安裝配置
綠色版本下載
3.2.2 msi版本安裝配置
下載
步驟一：下載node安裝包或綠色文件
1涎劈、node安裝包
一路下一步就可以了最冰，我選擇的安裝路徑為E:\Program Files\nodejs,安裝之后運(yùn)行cmd,執(zhí)行node -v 和 npm -v命令
2窘哈、node綠色文件
直接解壓文件即可，然后配置path環(huán)境變量：D:\2018dev\soft\web\nodejs
3胧洒、驗(yàn)證是否安裝成功
安裝檢查
步驟二：配置npm的全局模塊
配置npm的全局模塊的存放路徑以及cache的路徑畏吓，我選擇的路徑使Node.js的安裝路徑，在此路徑下建兩個(gè)文件夾node_global 和 node_cache卫漫，現(xiàn)在的文件目錄如下
配置文件目錄
說明：這里的環(huán)境配置主要配置的是npm安裝的全局模塊所在的路徑菲饼，以及緩存cache的路徑，之所以要配置列赎，是因?yàn)橐院笤趫?zhí)行類似：npm install express [-g] （后面的可選參數(shù)-g宏悦，g代表global全局安裝的意思）的安裝語句時(shí)，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中包吝，占C盤空間饼煞。例如：我希望將全模塊所在路徑和緩存路徑放在我node.js安裝的文件夾中，則在我安裝的文件夾【D:\Develop\nodejs】下創(chuàng)建兩個(gè)文件夾【node_global】及【node_cache】創(chuàng)建完兩個(gè)空文件夾之后漏策，打開cmd命令窗口派哲，命令輸入：
npm config set cache "D:\Program Files\node-v8.10.0-win-x64\node_cache"
npm config set prefix "D:\Program Files\node-v8.10.0-win-x64\node_global"
步驟三：配置系統(tǒng)環(huán)境變量
新建NODE_PATH環(huán)境變量
D:\2018dev\soft\web\nodejs\node_global\node_modules
步驟四：配置用戶環(huán)境變量
修改用戶變量下的Path
D:\2018dev\soft\web\nodejs\node_global
步驟五：更改鏡像源
國內(nèi)淘寶的在cmd輸入命令：npm config set registry https://registry.npm.taobao.org
在cmd輸入命令：npm config set registry http://registry.cnpmjs.org/
直接設(shè)置 --registry （推薦）
npm config set registry http://registry.npm.taobao.org/
cnpm 安裝完成后，以后就可以用cnpm代替 npm, 此時(shí)npm還是會用官方鏡像掺喻，cnpm會用國內(nèi)鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果要恢復(fù)成原來的設(shè)置芭届，執(zhí)行如下：
npm config set registry https://registry.npmjs.org/
查看 淘寶鏡像設(shè)置情況
npm get registry
4. Hello World（vue-cli）
4.1 創(chuàng)建項(xiàng)目
$ npm install -g vue-cli
$ vue init webpack vue
創(chuàng)建過程圖
4.2 添加項(xiàng)目依賴
# 安裝依賴
cnpm install（npm install --registry=https://registry.npm.taobao.org）
# 安裝其他插件
cnpm install vuex elementui axios mockjs --save
項(xiàng)目整體結(jié)構(gòu)
4.3 運(yùn)行項(xiàng)目
D:\2018dev\code\WebStorm\nodejs\vue>npm run dev
4.4 第一張頁面
4.4.1 第一步
在組件總目錄下面新建一個(gè)你要寫的組件的目錄，并新建一個(gè)你要寫的組件感耙，如test/test.vue
第一步.png
4.4.2 第二步
編寫組件內(nèi)容(組件就是把功能拆分出來褂乍，然后哪里需要這個(gè)組件，就在哪里去引入就行了)
第二步.png
4.2.3 第三步
修改路由即硼，將新寫的組件插入到路由里面去(找到src/router/router.js逃片，將頁面組件（如剛寫的test.vue）添加到appRouter里面去)
第三步.png
5. 技術(shù)實(shí)踐
5. 1 克隆前端頁面項(xiàng)目
git clone -b clean https://gitee.com/log4j/pig-ui // clean分支
5.2 安裝依賴
npm install
//or # 建議不要用cnpm 安裝有各種詭異的bug 可以通過如下操作解決npm速度慢的問題
npm install --registry=https://registry.npm.taobao.org
5. 3 開啟服務(wù)
npm run dev
5. 4 打包服務(wù)
npm run build
