【Vue】Vue開發環境搭建

Vue前置學習環境

IDE

WebStorm 官網下載：https://www.jetbrains.com/webstorm/download/

VSCode 官網下載：https://code.visualstudio.com/Download

Node.js

Node：https://nodejs.org/en/

下載安裝

配置下環境變量 Path 加上

D:\Environments\nodejs\

D:\Environments\nodejs\node_global\

NODE_PATH D:\Environments\nodejs\node_modules

安裝好node後，要設置一下node_global和node_cache(node緩存文件夾)

C:\Users\x1c>npm config set prefix "D:\Environments\nodejs\node_global"

C:\Users\x1c>npm config set cache "D:\Environments\nodejs\node_cache"

C:\Users\x1c>npm install express -g
+ [email protected]
updated 3 packages in 3.597s

nvm介紹：node多版本管理的最佳工具

開發環境&工具

爲什麼要使用nvm 管理node版本

npm安裝方法介紹（Linux，MacOS,Windows）

https://github.com/nvm-sh/nvm

Windows

nvm-windows 最新下載地址：

https://github.com/coreybutler/nvm-windows/releases

下載安裝即可

nvm簡單的使用方法（nvm install,nvm use）

nvm 

nvm ls

nvm ls -remote

node --version

npm --version

nvm ls

nvm use vxxx
nvm install vxxx

配置阿里雲鏡像

https://developer.aliyun.com/mirror/NPM?from=tnpm

有時候用npm拉取包可能會很慢，可以用淘寶npm鏡像代替npm進行拉包，就像github和gitee,Github下載拉取比較慢，我就導入碼雲下載。

npm install -g cnpm --registry=https://registry.npm.taobao.org

or

npm config set registry https://registry.npm.taobao.org
npm config get registry

執行：npm install -g cnpm --registry=https://registry.npm.taobao.org

C:\Users\x1c>npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
D:\Environments\nodejs\node_global\cnpm -> D:\Environments\nodejs\node_global\node_modules\cnpm\bin\cnpm
+ [email protected]
updated 1 package in 21.466s

C:\Users\x1c>

調試環境

chrome瀏覽器

vue.js devtools https://github.com/vuejs/vue-devtools

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN

工程環境

node --version
npm install -g vue-cli
vue --version

C:\Users\x1c>npm install -g vue-cli
npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\Environments\nodejs\node_global\vue-init -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\Environments\nodejs\node_global\vue -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\Environments\nodejs\node_global\vue-list -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 238 packages from 205 contributors in 48.081s

C:\Users\x1c>node --version
v11.9.0

C:\Users\x1c>vue --version
2.9.6

C:\Users\x1c>

node --version

vue --version

刪除vue-cli, npm install -g vue-cli 裝的，就 npm uninstall -g vue-cli 刪。
npm install -g @vue/cli 裝的，就 npm uninstall -g @vue/cli 刪。

C:\Users\x1c>node --version
v11.9.0

C:\Users\x1c>vue --version
2.9.6

C:\Users\x1c>npm uninstall -g vue-cli
removed 238 packages in 3.35s

C:\Users\x1c>npm install -g vue-cli
npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\Environments\nodejs\node_global\vue -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\Environments\nodejs\node_global\vue-init -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\Environments\nodejs\node_global\vue-list -> D:\Environments\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 238 packages from 205 contributors in 20.165s

C:\Users\x1c>vue --version
2.9.6

C:\Users\x1c>

小結