1. Vue3 目標
- Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的漸進式框架
- Vue 只關注視圖層， 採用自底向上增量開發的設計
- Vue 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件
2. Vue3 安裝
2.1 獨立安裝
我們可以在 Vue.js 的官網上直接下載最新版本, 並用 <script> 標籤引入 https://unpkg.com/[email protected]/dist/vue.global.js
2.2 使用 CDN 方法
以下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地
- Staticfile CDN（國內） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js
- unpkg（推薦）：https://unpkg.com/vue@next, 會保持和 npm 發佈的最新的版本一致。
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>
注：CDN（Content delivery networks，內容分發網絡），其目的是通過在源服務器和用戶之間增加一層新的網絡架構，將網站的內容分發到最接近用戶的網絡“邊緣”，使用戶可以就近取得所需的內容，提高用戶訪問網站的響應速度
2.3 NPM 方法
2.3.1 NVM 安裝
NVM(Node.js Version Manager), 是用來管理 node 的版本
安裝方式請參考：https://github.com/nvm-sh/nvm#installing-and-updating
# 安裝 nvm
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 15037 100 15037 0 0 293k 0 --:--:-- --:--:-- --:--:-- 293k
=> Downloading nvm as script to '/root/.nvm'
=> Appending nvm source string to /root/.bashrc
=> Appending bash_completion source string to /root/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
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
# 若出現因網絡問題導致長時間下載失敗，可嘗試以下命令
$ curl -o- https://gitee.com/mirrors/nvm/raw/v0.39.1/install.sh | bash
$ command -v nvm
nvm
2.3.2 NVM 命令
# 查看當前使用的 nvm 版本，也可以使用命令：nvm -v
$ nvm --version
0.39.1
# 查看本地安裝的所有的 Node.js 版本，也可以使用命令：nvm ls
$ nvm list
N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)
2.3.3 Node.js 安裝
如果需要查看最新的 release 或 lts, 請參考：https://nodejs.org/en/about/releases/
$ nvm install --lts=gallium
Installing with latest version of LTS line: gallium
Downloading and installing node v16.13.2...
Downloading https://nodejs.org/dist/v16.13.2/node-v16.13.2-linux-x64.tar.gz...
############################################################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v16.13.2 (npm v8.1.2)
Creating default alias: default -> lts/gallium (-> v16.13.2)
$ nvm list
-> v16.13.2
default -> lts/gallium (-> v16.13.2)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v16.13.2) (default)
stable -> 16.13 (-> v16.13.2) (default)
lts/* -> lts/gallium (-> v16.13.2)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.10 (-> N/A)
lts/fermium -> v14.19.0 (-> N/A)
lts/gallium -> v16.13.2
# 切換使用指定版本的 node
$ nvm use --lts=gallium
Now using node v16.13.2 (npm v8.1.2)
# 設置 node 的默認版本
$ nvm alias default v16.13.2
# 查看遠程服務器端的所有 node 版本
$ nvm ls-remote
# npm 不需要單獨安裝，在安裝 node 的時候會默認一起安裝
$ npm list -g
/root/.nvm/versions/node/v16.13.2/lib
├── [email protected]
├── [email protected]
# 查看全局 npm 包的安裝路徑
$ npm root -g
/root/.nvm/versions/node/v16.13.2/lib/node_modules
2.3.4 Node.js 命令
# 查看 node 的版本
$ node --version
v16.13.2
# 執行腳本字符串
$ node -e 'console.log("Hello World")'
Hello World
# 執行腳本文件
$ node index.js
# 進入 REPL 環境
$ node
注：REPL 的全稱：Read、Eval、 Print、Loop。類似於瀏覽器的控制檯。如果要退出 REPL 環境，可以輸入.exit 或 process.exit()。在 VS Code 裏，我們可以在菜單欄選擇“幫助->切換開發人員工具”，打開 console 控制檯。
2.3.5 NRM 安裝
NRM 全稱爲：Node Registry Manager，其作用是：切換和管理 npm 包的鏡像源
# 安裝 NRM
$ npm install -g nrm
# 顯示全部的鏡像
$ nrm ls
# 使用淘寶的鏡像
$ nrm use taobao
由於 npm 源服務器在國外，下載包的速度較慢，除了可以使用淘寶的鏡像倉庫外，也可以安裝 cnpm 替換 npm，去使用國內鏡像
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2.3.6 Vue 安裝
如果有需要，請參考：官方安裝文檔
在用 Vue 構建大型應用時推薦使用 npm 或 cnpm 安裝 。npm 和 cnpm 能很好地和諸如 Webpack 或 Rollup 模塊打包器配合使用。
# 最新穩定版
$ npm install vue@next
Vue 還提供了編寫單文件組件的配套工具。如果你想使用單文件組件，那麼你還需要安裝 @vue/compiler-sfc：
$ npm install -D @vue/compiler-sfc
2.3.7 Vue CLI 安裝
大多數情況下，我們更傾向於使用 Vue CLI 來創建一個配置最小化的 webpack 構建版本。
# 全局安裝 vue-cli
$ yarn global add @vue/cli
# 或
$ npm install -g @vue/cli
# 運行 vue init 所需要的包
$ npm install -g @vue/cli-init
# 創建項目
$ vue init webpack vue3-test
# 這裏需要進行一些配置，默認回車即可
? Project name vue3-test
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue3-test".
# Installing project dependencies ...
# ========================
.....
# 進入項目，安裝並運行
$ cd vue3-test
$ npm run dev
DONE Compiled successfully in 2558ms
I Your application is running here: http://localhost:8080
如果是 root 用戶，請運行命令sudo npm install @vue/cli -g --unsafe-perm=true --allow-root
因爲npm 出於安全考慮不支持以 root 用戶運行，即使你用 root 用戶身份運行了，npm 會自動轉成一個叫 nobody 的用戶來運行，而這個用戶幾乎沒有任何權限。這樣的話如果你腳本里有一些需要權限的操作，比如寫文件（尤其是寫 /root/.node-gyp），就會崩掉了。
爲了避免這種情況，要麼按照 npm 的規矩來，專門建一個用於運行 npm 的高權限用戶；要麼加 --unsafe-perm 參數，這樣就不會切換到 nobody 上，運行時是哪個用戶就是哪個用戶，即使是 root。
如果運行 sudo 提示 npm: command not found，請參考該文章
2.3.8 Vite 安裝（推薦）
Vite 是一個 web 開發構建工具，由於其原生 ES 模塊導入方式，可以實現閃電般的冷服務器啓動。
通過在終端中運行以下命令，可以使用 Vite 快速構建 Vue 項目，語法格式如下：
# npm 6.x
$ npm init vite@latest <project-name> --template vue
# npm 7+，需要加上額外的雙短橫線
$ npm init vite@latest <project-name> -- --template vue
$ cd <project-name>
$ npm install
$ npm run dev