vue 环境搭建完整版

• 首先安装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查看版本
  or npm -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 registry https:// registry.npmmirror.com/
  查看是否设置成功
  npm config get registry
• 也可以使用yarn 代替npm
  下载yarn npm 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

• nvm官网地址
  https://github.com/creationix/nvm

• 安装（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
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