- 首先安装brew
/bin/zsh -c "$(curl -fsSL https://gitee.com/huwei1024/HomebrewCN/raw/master/Homebrew.sh)"
brew -v 查看版本
传统方式安装node(系统路径)
- 再安装node.js(JavaScript运行环境)
直接地址下载 http://nodejs.cn/download/
node -v查看版本
ornpm -v查看版本 - node 被安装到
/usr/local/bin/node - npm被安装到
/usr/local/bin/npm - 给node.js 目录赋值权限
sudo chmod -R 777 /usr/local/lib/node_modules/ - npm 是node.js 下的包管理器，npm 能很好的和webpack 模块打包器配合使用
查看npm 设置过的所有源
npm config get registry
输出默认的源地址：https://registry.nmpjs.org/
由于npm 的镜像在国外，速度比较慢 ，可以更换国内的镜像源，这样会改善下载速度
nmp config set registryhttps:// registry.npmmirror.com/
查看是否设置成功
npm config get registry - 也可以使用yarn 代替npm
下载yarnnpm i -g yarn
查看yarn -v - npm 全局依赖包默认存放于
/usr/local/lib/node_modules - yarn 全局依赖包默认存放于
~/.config/yarn/global/node_modules - yarn 的安装路径
/usr/local/bin
// 查看yarn 的依赖包路径
$ yarn global dir
/Users/用户名/.config/yarn/global
//查看可执行文件的路径
$ yarn global bin
/usr/local/bin
使用nvm （node版本管理工具）下载node
nvm 可以管理不同的node版本，如果有不同的项目 需要多个版本node，那么nvm 可以使用命令 快速下载和切换这些node
安装（0.37版本，根据官网命令 安装最新版本即可）
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.37.0/install.sh | bash
- 查看版本
nvm -v / nvm --version
注： 如果还是显示没有该指令，那是因为没有配置环境变量 - 在终端输入 vi ~/.zshrc和 vi ~/.bash_profile（具体编辑哪个文件，看你终端shell 类型
echo $SHELL如果是 Bash，你将看到 /bin/bash，如果是 Zsh，你将看到 /bin/zsh）,复制以下类型
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
- 输入完后，按esc 退出编辑模式，再按
:wq保存修改 - 输入以下命令之一，更新配置文件
source ~/.bash_profile
source ~/.zshrc
- nvm 常用命令
nvm ls-remote :查看当前可安装的node 版本
nvm ls ：打印出所有的版本
nvm install stable：安装最稳定的版本
nvm install v8.9.2 ： 安装node的8.9.2的版本
nvm uninstall v8.9.2 ： 删除node的8.9.2的版本
nvm current ：当前使用的node版本
nvm use v8.9.2 ：将node改为8.9.2版本
nvm alias default 14.20.1：设置默认 node 版本为 14.20.1
- 安装node https://nodejs.org/en/download/
nvm install [node-version]
例如：nvm install v16.15.1 - 安装目录
如果使用nvm 来管理node，那么相关内容会存放在~/.nvm目录下
上述node 下载后会存放在~/.nvm/versions/node/v16.15.1目录下 - 切换系统node 和 nvm node
# 使用系统版本
$ nvm use system
# 使用 nvm 的 Node 版本，还有更多写法，请看：https://github.com/nvm-sh/nvm#usage
$ nvm use 16.14.0
安装vue 脚手架
全局安装脚手架 Vue-CLI(vue2.0)
安装教程 https://cli.vuejs.org/zh/guide/installation.html
npm install -g @vue/cli
or
yarn global add @vue/cli
查看版本信息
vue --version
- 升级vue CLI
npm update -g @vue/cli
or
yarn global upgrade --latest @vue/cli - 创建新项目
vue create hello-world -
CLI 方式命令脚本
image.png -
运行成功页面
image.png
VueCli 和 vue 版本对应关系
vue2 对应 @vue/cli4.5 以下的版本
vue3 对应 @vue/cli4.5 以上的版本
如果你只想使用vue2 那么可以下载指定版本的 vue-cli
- vue 相关命令
// 卸载3.0以下版本
npm uninstall vue-cli -g
//卸载3.0以上版本
npm uninstall -g @vue/cli
// 安装vue 最新版本
npm install -g @vue/cli
// 安装Vue 指定版本(3.0以下版本)
npm install vue-cli@2.9.6
//安装Vue 指定版本（3.0以上版本）
npm install -g @vue/cli@3.11.0
//查看vue 版本
vue --version
-
如果你安装的4.5以上版本，创建项目时，会让你选择Vue 版本，所以可以选择安装高版本的情况下，使用Vue2。这样同一个版本的vue -cli 可以创建不同版本的vue 项目
image.png
vite 方式（vue3.0 推荐）
https://cn.vuejs.org/guide/quick-start.html
- 安装脚手架工具
npm init vue@latest//初始化项目
cd <your-project-name>
npm install//下载依赖
npm run dev//运行
image.png
如果运行成功，会出现如下截图
image.png
-
vite 方式 命令
image.png
- 最后本地IDE 选择Vscode
问题(代发现)
- 在设置本地构建时
npm init vue@latest，出现如下错误
image.png
终端输入以下指令：
npm set strict-ssl false
npm config set registry http://registry.npmjs.org/
// 然后重新输入
npm init vue@latest
参考：https://www.jianshu.com/p/918314e9f757
https://www.jianshu.com/p/e3a8f0caeea0
