參考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 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 [email protected]2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]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 [email protected] -g` to upgrade your npm version, and then `npm audit` to get more info.

> [email protected]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 [email protected]3.2.0 requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]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 [email protected]3.2.0 requires a peer of [email protected]^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]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的程式碼後，直接在頁面重新整理即可看到頁面更新）。關於打包和壓縮，有待以後學習。