[从零开始系列]macbook从零开始搭建vue开发环境 包含VScode nvm npm cnpm node.js vue.js安装

安装homebrew

homebrew是macos下非常好用的包管理工具, 类似Ubuntu下的apt-get或者CentOs下的yum. 安装起来也是很简单, 一条命令搞定

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

附官网地址:
homebrew官网

tips1. 因为homebrew并不是vue开发环境必要条件, 所以不着重介绍, 大家安装完homebrew后可以搜索一下homebrew更换国内源, 否则下载东西会很慢, 会很容易因为网络问题报错.

安装nvm

nvm是node.js的版本管理工具(Node Version Manager), 可以很方便的让多个node.js版本共存及更换使用.
使用brew安装:

brew install nvm

看到上图内容就安装成功了, 接下来我们要把nvm命令放到系统全局中

1. 家目录下创建.nvm目录

   mkdir ~/.nvm
   

2. 打开~/.bash_profile文件并加入以下三行内容

   export NVM_DIR="$HOME/.nvm"
   [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
   [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
   

3. 重新加载~/.bash_profile

   source ~/.bash_profile
   

执行以下命令, 如出现版本号则证明安装成功

nvm -v

附nvm常用命令

1. nvm list 是查找本电脑上所有的node版本- nvm list 查看已经安装的版本- nvm list installed 查看已经安装的版本- nvm list available 查看网络可以安装的版本
2. nvm install <version> 安装指定版本node
3. nvm use <version> 切换使用指定的版本node
4. nvm ls 列出所有版本
5. nvm current显示当前版本
6. nvm alias <name> <version> ## 给不同的版本号添加别名
7. nvm unalias <name> ## 删除已定义的别名
8. nvm reinstall-packages <version> ## 在当前版本node环境下，重新全局安装指定版本号的npm包
9. nvm on 打开nodejs控制
10. nvm off 关闭nodejs控制
11. nvm proxy 查看设置与代理
12. nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是： https://github.com/npm/npm/archive/.
13. nvm uninstall <version> 卸载制定的版本
14. nvm use [version] [arch] 切换制定的node版本和位数
15. nvm root [path] 设置和查看root路径
16. nvm version 查看当前的版本

安装node.js

现在我们可以使用nvm来安装node.js了, 有什么版本可以去node官网查看并执行以下命令安装

nvm install <version>

tips2. 例如博主安装的是12.18.2版本, 命令就是 nvm install 12.18.2

执行以下命令, 如出现版本号则证明安装成功

node -v

附node官网
node官网

安装npm

安装完node.js 自带npm, 所以无需安装
附npm常用命令

1. npm install <name><version> 安装
2. npm update <name><version> 更新
3. npm uninstall <name><version> 卸载
4. npm search <name><version> 搜索
5. npm cache clean --force  清除缓存(如安装遇到错误, 可以清除缓存再试)

附更改npm源的命令(可以使下载更快)

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

安装cnpm

cnpm是淘宝团队做的npm的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

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

安装vue@cli

终于可以安装vue脚手架了~
直接安装最新版vue

cnpm install -g @vue/cli

执行以下命令, 如出现版本号则证明安装成功

vue -V

安装VScode

附vscode官网, 大家自行下载安装
vscode官网

接下来大家就可以尽情玩耍了, 如有按照本教程安装失败或有任何疑义欢迎大家评论区指出, 如果帮助到了大家, 也希望大家点赞+评论支持一下博主
end~