規劃網頁開發時，引入一個框架是不錯的選項，讓團隊有共同溝通的語言，目前打算把以前接觸 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 v16Now using node v16.13.0 (npm v8.1.0)% npm -v8.1.0% npm create vite@latest my-vue-app --template vueNeed to install the following packages:create-vite@latestOk to proceed? (y) y✔ Select a framework: › Vue✔ Select a variant: › JavaScriptScaffolding project in /private/tmp/my-vue-app...Done. Now run:cd my-vue-appnpm installnpm 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.js4 directories, 10 files% npm install% npm run devVITE 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 buildvite v3.1.0 building for production...✓ 16 modules transformed.dist/assets/vue.5532db34.svg 0.48 KiBdist/index.html 0.44 KiBdist/assets/index.43cf8108.css 1.26 KiB / gzip: 0.65 KiBdist/assets/index.795d9409.js 52.87 KiB / gzip: 21.33 KiB% tree distdist├── assets│ ├── index.43cf8108.css│ ├── index.795d9409.js│ └── vue.5532db34.svg├── index.html└── vite.svg1 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>
以上就簡單過一下常用的東西。
沒有留言:
張貼留言