【Vue】Vue开发环境搭建

Vue前置学习环境

文章目录

• Vue前置学习环境
• IDE
• Node.js
• 调试环境
• 工程环境
• 小结

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
+ express@4.17.1
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 request@2.88.2: 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
+ cnpm@6.1.1
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 vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: 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
+ vue-cli@2.9.6
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 vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: 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
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 20.165s

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

C:\Users\x1c>

小结