win10下安裝部署vuejs的webpack腳手架工具

參考vuejs的官方文檔：戳我

1. 安裝nodejs

• nodejs官方下載地址：戳我
• 選擇合適的版本下載，我這裏選的是node-v8.11.3-x64.msi
• 安裝路徑一般不裝在C盤，所以我這裏選擇：D:\nodejs\
• 一路next默認等待安裝完畢

2. 設置nodejs的global和cache路徑

設置路徑能夠把通過npm安裝的模塊集中在一起，便於管理。

• 在nodejs的安裝目錄D:\nodejs\下，新建node_global和node_cache兩個文件夾

• 執行指令：

  npm config set prefix "D:\nodejs\node_global"
  npm config set cache "D:\nodejs\node_cache"

  設置成功後，後續用命令npm install -g XXX安裝的XXX模塊就在D:\nodejs\node_global\node_modules裏。

• 查看配置信息指令：npm config list

3. 設置環境變量

• 添加用戶變量PATH：D:\nodejs\node_global
• 新增系統變量NODE_PATH：D:\nodejs\node_global\node_modules

4. 安裝cnpm（可選）

由於許多npm包都在國外，直接使用npm指令下載安裝會比較慢，好像很多人推薦用淘寶的鏡像服務器，這樣所有用npm的指令都可以用cnpm代替。我個人喜歡直接用npm所以沒有安裝，實測其實npm也挺快的啊=。=不想安裝的小夥伴就跳過即可

• 參考網址：戳我
• 安裝指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

備註：-g表示下載安裝的包都放在之前配置好的安裝目錄下，否則就會在執行指令的當前目錄下

5. 安裝vue-cli

• vue-cli是vuejs官方提供的一個命令行工具
• 安裝指令：npm install -g vue-cli
• 安裝完成後，vue就是一個指令了

D:\nodejs\node_global
λ npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\nodejs\node_global\vue -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\nodejs\node_global\vue-init -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\nodejs\node_global\vue-list -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 252 packages in 61.697s

6. 下載webpack腳手架

(1) 下載指令：vue init webpack learnVue

• 其中webpack是打包和壓縮的工具模板，learnVue是工程文件夾名稱
• 執行完會在當前目錄下生成一個名爲工程名稱的文件夾，並下載好了模板，但相關依賴還沒有安裝

(2) 執行指令後會先提示下載中，大概幾秒後會提示輸入工程的相關信息：

• project name：工程名（不是文件夾名），不可以含有大寫字母，後續是頁面的title
• vue-router：vuejs提供的路由工具，我選擇安裝，相關介紹可戳這裏
• ESLint：好像是一個語法檢查選項，我不安裝
• unit tests和e2e tests：好像都是測試項，我也沒有安裝
• 最後一個選項是推薦相關依賴後續使用npm install指令安裝，選擇Yes, use npm

(3) 然後等待一段時間即完成下載

F:\develop
λ vue init webpack learnVue

? Project name learn-vue
? Project description my first vue project
? Author yvettre
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "learnVue".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> uglifyjs-webpack-plugin@0.4.6 postinstall F:\develop\learnVue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1133 packages in 151.274s

# Project initialization finished!
# ========================

To get started:

  cd learnVue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

(4) 下載完畢後可以打開工程文件看到如下圖所示的目錄結構，我們的代碼就放在src這個文件夾中，其他文件夾都是一些依賴和工具，不需要關心

7. 下載webpack相關依賴

• 根目錄下有一個package.json的文件：
  

• 要安裝紅色箭頭所指的那些依賴項，安裝指令是：npm install

F:\develop\learnVue
λ npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 14.505s

8. 運行webpack的demo

F:\develop\learnVue
λ npm run dev


 DONE  Compiled successfully in 1637ms                                                                          21:14:46

 I  Your application is running here: http://localhost:8080

這樣就運行起來啦，然後我們在瀏覽器中訪問localhost:8080，即可看到：

至此，vuejs的webpack腳手架下載完畢，這套框架是支持熱更新的（即修改完src的代碼後，直接在頁面刷新即可看到頁面更新）。關於打包和壓縮，有待以後學習。