- 首先安裝brew
/bin/zsh -c "$(curl -fsSL https://gitee.com/huwei1024/HomebrewCN/raw/master/Homebrew.sh)"
brew -v 查看版本
傳統(tǒng)方式安裝node(系統(tǒng)路徑)
- 再安裝node.js(JavaScript運(yùn)行環(huán)境)
直接地址下載 http://nodejs.cn/download/
node -v查看版本
ornpm -v查看版本 - node 被安裝到
/usr/local/bin/node - npm被安裝到
/usr/local/bin/npm - 給node.js 目錄賦值權(quán)限
sudo chmod -R 777 /usr/local/lib/node_modules/ - npm 是node.js 下的包管理器，npm 能很好的和webpack 模塊打包器配合使用
查看npm 設(shè)置過的所有源
npm config get registry
輸出默認(rèn)的源地址：https://registry.nmpjs.org/
由于npm 的鏡像在國外，速度比較慢 ，可以更換國內(nèi)的鏡像源，這樣會(huì)改善下載速度
nmp config set registryhttps:// registry.npmmirror.com/
查看是否設(shè)置成功
npm config get registry - 也可以使用yarn 代替npm
下載yarnnpm i -g yarn
查看yarn -v - npm 全局依賴包默認(rèn)存放于
/usr/local/lib/node_modules - yarn 全局依賴包默認(rèn)存放于
~/.config/yarn/global/node_modules - yarn 的安裝路徑
/usr/local/bin
// 查看yarn 的依賴包路徑
$ yarn global dir
/Users/用戶名/.config/yarn/global
//查看可執(zhí)行文件的路徑
$ yarn global bin
/usr/local/bin
使用nvm （node版本管理工具）下載node
nvm 可以管理不同的node版本，如果有不同的項(xiàng)目 需要多個(gè)版本node，那么nvm 可以使用命令 快速下載和切換這些node
nvm官網(wǎng)地址
https://github.com/creationix/nvm安裝（0.37版本，根據(jù)官網(wǎng)命令 安裝最新版本即可）
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.37.0/install.sh | bash
- 查看版本
nvm -v / nvm --version
注： 如果還是顯示沒有該指令，那是因?yàn)闆]有配置環(huán)境變量 - 在終端輸入 vi ~/.zshrc和 vi ~/.bash_profile（具體編輯哪個(gè)文件，看你終端shell 類型
echo $SHELL如果是 Bash，你將看到 /bin/bash，如果是 Zsh，你將看到 /bin/zsh）,復(fù)制以下類型
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 :查看當(dāng)前可安裝的node 版本
nvm ls ：打印出所有的版本
nvm install stable：安裝最穩(wěn)定的版本
nvm install v8.9.2 ： 安裝node的8.9.2的版本
nvm uninstall v8.9.2 ： 刪除node的8.9.2的版本
nvm current ：當(dāng)前使用的node版本
nvm use v8.9.2 ：將node改為8.9.2版本
nvm alias default 14.20.1：設(shè)置默認(rèn) node 版本為 14.20.1
- 安裝node https://nodejs.org/en/download/
nvm install [node-version]
例如：nvm install v16.15.1 - 安裝目錄
如果使用nvm 來管理node，那么相關(guān)內(nèi)容會(huì)存放在~/.nvm目錄下
上述node 下載后會(huì)存放在~/.nvm/versions/node/v16.15.1目錄下 - 切換系統(tǒng)node 和 nvm node
# 使用系統(tǒng)版本
$ 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 - 創(chuàng)建新項(xiàng)目
vue create hello-world -
CLI 方式命令腳本
image.png -
運(yùn)行成功頁面
image.png
VueCli 和 vue 版本對應(yīng)關(guān)系
vue2 對應(yīng) @vue/cli4.5 以下的版本
vue3 對應(yīng) @vue/cli4.5 以上的版本
如果你只想使用vue2 那么可以下載指定版本的 vue-cli
- vue 相關(guān)命令
// 卸載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以上版本，創(chuàng)建項(xiàng)目時(shí)，會(huì)讓你選擇Vue 版本，所以可以選擇安裝高版本的情況下，使用Vue2。這樣同一個(gè)版本的vue -cli 可以創(chuàng)建不同版本的vue 項(xiàng)目
image.png
vite 方式（vue3.0 推薦）
https://cn.vuejs.org/guide/quick-start.html
- 安裝腳手架工具
npm init vue@latest//初始化項(xiàng)目
cd <your-project-name>
npm install//下載依賴
npm run dev//運(yùn)行
image.png
如果運(yùn)行成功，會(huì)出現(xiàn)如下截圖
image.png
-
vite 方式 命令
image.png
- 最后本地IDE 選擇Vscode
問題(代發(fā)現(xiàn))
- 在設(shè)置本地構(gòu)建時(shí)
npm init vue@latest，出現(xiàn)如下錯(cuò)誤
image.png
終端輸入以下指令：
npm set strict-ssl false
npm config set registry http://registry.npmjs.org/
// 然后重新輸入
npm init vue@latest
參考：http://www.itdecent.cn/p/918314e9f757
http://www.itdecent.cn/p/e3a8f0caeea0
