Mac下的Vue開發環境建置，使出連環計：Brew?! -> NVM -> Node.js -> Vue CLI

1. Homebrew : macOS 缺少套件的管理工具

安裝指令：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

詳細安裝與說明這邊走 Go!

1.不要用Brew安裝NVM :

失敗現身案例，產生各種問題…bye流逝的三個小時ＱＱ
每次terminal重開，
node: command not found,
npm: command not found
…

根據NVM原作的Github描述：

Homebrew installation is not supported. If you have issues with homebrew-installed nvm, please brew uninstall it, and install it using the instructions below, before filing an issue.

NVM不支援透過Brew安裝的版本…

來解安裝前面安裝的失敗版吧！

brew uninstall nvm
sudo rm -rf /usr/個人電腦用戶名/.nvm
sudo rm -rf  /usr/個人電腦用戶名/.npm
vi /usr/個人電腦用戶名/.bash_profile

刪除相關的兩三行

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

Reference:
https://medium.com/@mvpdw06/%E8%A7%A3%E6%B1%BA-nvm-is-not-compatible-with-the-npm-config-prefix-option-currently-set-to-usr-local-%E5%95%8F%E9%A1%8C-cb1f3462ef40

那我們重新開始吧！

2. NVM : Node.js的版本管理器，以利後續不同專案的版本需求的快速切換

Reference : https://medium.com/%E5%93%86%E5%95%A6%E5%AF%A6%E9%A9%97%E5%AE%A4/node-js%E7%AE%A1%E7%90%86%E7%A5%9E%E5%99%A8nvm-b6acfca44ea5

強烈建議以NPM安裝Node，
若先前已單獨安裝Ｎode，
請先刪除乾淨，再重安裝。

刪除方式請參考這些文章：
http://phoeshow.github.io/2017/05/15/Mac%E5%88%A0%E9%99%A4nodejs%E7%9A%84%E6%96%B9%E6%B3%95/
https://stackoverflow.com/questions/11177954/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x

用command直接安裝 :
Curl :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

nvm已自動加入環境變數：
可 vi /.bash_profile 查看

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

接著，
查看有哪些版本可以被安裝：

$ nvm ls-remote


二擇一：
一、安裝指定想要的版本：

$ nvm install

二、安裝目前的穩定版：

$ nvm install stable

安裝完後，
查看已安裝的版本：
$ nvm ls

切換自己想要的版本
$ nvm use 12.10


設定default版本，以利重開機不會跑版

$ nvm alias default 12.10

常用指令

指令	說明
nvm install [version]	安裝 Node.js 的 [version] 版本
nvm uninstall [version]	移除 Node.js 的 [version] 版本
nvm ls	列出 Local 所有的 Node.js 版本
nvm ls-remote	列出 Remote 所有的 Node.js 版本
nvm alias default [version]	指令以後預設啟用的 Node.js 版本
nvm use [version]	使用 [version] 版本，但不更改預設啟用的版本

測試：
重開terminal,
nvm -v
node -v
npm -v

都正常，就往下囉～

3. Vue CLI ：  一秒配置Vue專案開發環境

base on node.js server , 整合 webpack 自動打包

Reference :
https://footmark.info/programming-language/vuejs/vue-cli3-seting/

全域安裝 -g：

npm install -g @vue/cli

終於可以開始一秒部署專案了ＸＤ
開始囉～！

Vue CLI 3 提供兩種方式來建立 Vue.js 專案項目。

一、文字模式：
開啟第一個專案

$ vue create my_new_project //輸入完會要你設定關於這個專案的詳細設定

# 選取要 preset (預先裝置) 的特性，defaule 包含了基本的 Babel + ESLint preset，這裡選 Manually 來手動選取需要的特性
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

詳細請參考：
https://footmark.info/programming-language/vuejs/vue-cli3-seting/

進入專案folder :

$ cd my_new_project

運行專案：

$ npm run serve

Test :
http://localhost:8080/

二、介面模式

$ vue ui -h

 

---

番外篇

拉取 Vue 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

 

Reference:
https://cli.vuejs.org/zh/guide/creating-a-project.html#%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%BD%A2%E5%8C%96%E7%95%8C%E9%9D%A2

 

…

END !!!
終於可以開始寫Code惹ＱＱ