規劃網頁開發時，引入一個框架是不錯的選項，讓團隊有共同溝通的語言，目前打算把以前接觸 Vue.js 部分複習一下，直接來用 Vue 3 以及 Vite ，其中 Vite 是一個很像 Webpack 的工具，號稱是下一代前端開發工具且運作效率高，看了一下是可以達成打包的程式碼任務，也能提供 dev web server + hot reload (hot module replacement/HMR) 服務。
文件資料：
這次主要接觸了 Vite ，才跑去看一下 Vue.JS 作者是誰 XD 我用了好一陣子都沒去認識一下。跑去看了一下 Vue.JS 作者的 twitter 跟 WIKI，發現人在新加坡且學經歷也滿有趣的，偶爾會分享跟小孩相處的經驗，並且也分享網路受訪又被辱罵等文，在 2022.08 剛和團隊產出了 Vue.JS 3 中文文檔，年紀相仿，滿有趣的生活。
快速上手法：
% nvm use v16
Now using node v16.13.0 (npm v8.1.0)
% npm -v
8.1.0
% npm create vite@latest my-vue-app --template vue
Need to install the following packages:
create-vite@latest
Ok to proceed? (y) y
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
Scaffolding project in /private/tmp/my-vue-app...
Done. Now run:
cd my-vue-app
npm install
npm run dev
% cd my-vue-app
% cat package.json
{
"name": "my-vue-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"vite": "^3.1.0"
}
}
% tree
.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ └── style.css
└── vite.config.js
4 directories, 10 files
% npm install
% npm run dev
VITE v3.1.0 ready in 435 ms
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
接著去編輯 src/components/HelloWorld.vue 可以看到網頁內容立即改變。如此大概就可以窺見 Vite 的基本用法，接著是編譯：
% npm run build
> my-vue-app@0.0.0 build
> vite build
vite v3.1.0 building for production...
✓ 16 modules transformed.
dist/assets/vue.5532db34.svg 0.48 KiB
dist/index.html 0.44 KiB
dist/assets/index.43cf8108.css 1.26 KiB / gzip: 0.65 KiB
dist/assets/index.795d9409.js 52.87 KiB / gzip: 21.33 KiB
% tree dist
dist
├── assets
│ ├── index.43cf8108.css
│ ├── index.795d9409.js
│ └── vue.5532db34.svg
├── index.html
└── vite.svg
1 directory, 5 files
% cat dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<script type="module" crossorigin src="/assets/index.795d9409.js"></script>
<link rel="stylesheet" href="/assets/index.43cf8108.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
以上就簡單過一下常用的東西。
