如何創建一個vue項目

詳細版：

一、nodejs的安裝

 

Node.js安裝包及源碼下載地址為：https://nodejs.org/en/download/。

我們可以根據不同平台系統選擇你需要的Node.js安裝包。Node.js 歷史版本下載地址：https://nodejs.org/dist/

這里演示的是Window64位安裝Node.js，下面演示的是采用安裝包的方式來安裝。

1、Windows 安裝包(.msi)

 Node.js默認安裝目錄為 "C:\Program Files\nodejs\" , 你可以修改目錄，並點擊 next（下一步）：

   

:點擊 Install（安裝） 開始安裝Node.js。你也可以點擊 Back（返回）來修改先前的配置。 然后並點擊 next（下一步）：

 安裝完之后啟動cmd依次執行以下兩條命令檢測是否安裝成功，結果如下：

 二、node.js的環境變量的新建。  //我安裝的路徑是 D:\soft\nodejs

    其實安裝完node，就自動在path里增加環境變量，但是為了以后的本地部署項目，我們需要找到node.js的安裝根目錄，在當中新建“node_global”和"node_cache"兩個文件夾。

1、 啟動cmd依次執行以下兩條命令

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

2、 設置環境變量

　　說明：設置環境變量可以使得住任意目錄下都可以使用cnpm、vue等命令，而不需要輸入全路徑

　　1．鼠標右鍵"此電腦"，選擇“屬性”菜單，在彈出的“系統”對話框中左側選擇“高級系統設置”，彈出“系統屬性”對話框。

　　2．點擊環境變量彈出下列對話框：

　　3．新增系統變量NODE_PATH：把變量值設置成“D:\soft\nodejs\node_global\node_modules” （這樣就可以把后面全局安裝的裝到global里並且可以直接用命令使用。）

4． 修改用戶變量PATH：選中PATH，點擊編輯，把“D:\soft\nodejs\node_global;”加到前面

三、安裝淘寶的npm鏡像

　　輸入npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了。

　　這個其實看個人愛好吧，因為npm在國內下載速度是很慢，所以就用npm下載安裝cnpm可以更快的下載后面的依賴等等。

四、安裝全局vue-cli腳手架、webpack

命令輸入

　　cnpm install vue –g  //全局安裝vue

 　cnpm install -g vue-cli                        //全局安裝vue-cli

　　cnpm install -g webpack                          //全局安裝webpack

       cnpm install -g webpack-dev-server             //安裝webpack的本地webserver

　　安裝完成后，vue-cli腳手架其實就已經把vue也裝掉了，所以只需輸入vue  -V 和 webpack  -v  等等就可以查看安裝成功與否。

 下面是以上命令的結果:

$ npm install vue -g

E:\nodejs\node_global
`-- vue@2.4.4


$ npm install -g vue-cli

E:\nodejs\node_global\vue-init -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
E:\nodejs\node_global\vue-list -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
E:\nodejs\node_global\vue -> E:\nodejs\node_global\node_modules\vue-cli\bin\vue
E:\nodejs\node_global
`-- vue-cli@2.9.1
  +-- async@2.5.0
  | `-- lodash@4.17.4
  +-- chalk@2.1.0
　.....  此處省略很多結果數據 .....


$ npm install webpack -g

E:\nodejs\node_global\webpack -> E:\nodejs\node_global\node_modules\webpack\bin\webpack.js
> uglifyjs-webpack-plugin@0.4.6 postinstall E:\nodejs\node_global\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
E:\nodejs\node_global
`-- webpack@3.7.1
  +-- acorn@5.1.2
  +-- acorn-dynamic-import@2.0.2
 .....此處省略多行數據.......
  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})


$ npm install -g webpack-dev-server

E:\nodejs\node_global\webpack-dev-server -> E:\nodejs\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js
E:\nodejs\node_global
+-- UNMET PEER DEPENDENCY webpack@^2.2.0 || ^3.0.0
`-- webpack-dev-server@2.9.1
  +-- ansi-html@0.0.7
  +-- array-includes@3.0.3
.....此處省略多行數據......

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\webpack-dev-server\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN webpack-dev-server@2.9.1 requires a peer of webpack@^2.2.0 || ^3.0.0 but none was installed.
npm WARN webpack-dev-middleware@1.12.0 requires a peer of webpack@^1.0.0 || ^2.0.0 || ^3.0.0 but none was installed.