【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 odejs

D:Environments odejs ode_global

NODE_PATH D:Environments odejs ode_modules

安装好node后，要设置一下node_global和node_cache(node缓存文件夹)

C:Usersx1c>npm config set prefix "D:Environments
odejs
ode_global"

C:Usersx1c>npm config set cache "D:Environments
odejs
ode_cache"

C:Usersx1c>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:Usersx1c>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
odejs
ode_globalcnpm -> D:Environments
odejs
ode_global
ode_modulescnpmincnpm
+ cnpm@6.1.1
updated 1 package in 21.466s

C:Usersx1c>

调试环境

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:Usersx1c>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
odejs
ode_globalvue-init -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue-init
D:Environments
odejs
ode_globalvue -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue
D:Environments
odejs
ode_globalvue-list -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue-list
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 48.081s

C:Usersx1c>node --version
v11.9.0

C:Usersx1c>vue --version
2.9.6

C:Usersx1c>

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:Usersx1c>node --version
v11.9.0

C:Usersx1c>vue --version
2.9.6

C:Usersx1c>npm uninstall -g vue-cli
removed 238 packages in 3.35s

C:Usersx1c>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
odejs
ode_globalvue -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue
D:Environments
odejs
ode_globalvue-init -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue-init
D:Environments
odejs
ode_globalvue-list -> D:Environments
odejs
ode_global
ode_modulesvue-cliinvue-list
+ vue-cli@2.9.6
added 238 packages from 205 contributors in 20.165s

C:Usersx1c>vue --version
2.9.6

C:Usersx1c>

小结