2022年9月13日 星期二

Javascript 開發筆記 - 使用 Vue.js 和 Vite

規劃網頁開發時,引入一個框架是不錯的選項,讓團隊有共同溝通的語言,目前打算把以前接觸 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 [email protected] my-vue-app --template vue
Need to install the following packages:
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

> 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>

以上就簡單過一下常用的東西。

沒有留言:

張貼留言