接下来开始建立前端专案，接下来依序介绍预期使用的工具与套件。

工具与套件

Vue、Vuex

图片来源：Vue 官方网站

Web 前端框架，相较其他两大框架（React、Angular）来说入门门槛较低，很适合我这种非专业资工入门 (´・ω・`)

Vuex 为 Vue 专用之状态管理套件，包含完整的管理模式，可以确保组件数量增多时，不易使资料传递、管理发生困难。

Quasar

图片来源：Quasar 官方网站

基於 Vue 之 UI Framework，包含大量开发常用情境与功能，例如：SPA、SSR、PWA、Mobile App、Electron、Browser Extensions，而且官方文件内容齐全，强力推荐。

（现在没有 Quasar 我都不会做网页了 ᕕ( ﾟ ∀。)ᕗ）

一时用 Quasar 一时爽，一直用 Quasar 一直爽

Windi CSS

图片来源：Windo CSS 官方网站

如果你认识 Tailwind CSS，那一定很快就会认识 Windi CSS。

Windi CSS 多出一些特殊功能，例如：更多的断点写法、任意值 class、Variants 群组、Attributify Mode 等等。

（现在没有 Windi 我都不会写 HTML、CSS 了 ∠( ᐛ 」∠)_）

想了解更多的朋友，可以前往以下参考连结：

• tailwind vs windicss
• Windi CSS - Tailwind CSS 的上位替代

Lodash-es

大名鼎鼎的 Lodash 之 ES Module 版本，透过 webpack 的 Tree Shaking，可以有效缩减打包後的尺寸。

详细分析过程可以参考以下连结：

• lodash | 如何正确的 import lodash

dayjs

图片来源：day.js GitHub

时间解析、格式化工具，特色为极度轻量（2kb）且 API 几乎与 Moment.js 相同，可以无痛转移。

同时支援 i18n、外挂、Immutable 等等特点。

关於时间处理套件比较与 Moment.js 的爱恨情仇，可以参考以下连结：

• Day.js - 一套轻量级的时间处理套件
• You-Dont-Need-Momentjs

建立专案

在此透过 Vue CLI 建立专案内容，安装过程同 CLI 建立流程，就不再一一赘述。

大家可以点下方连结 Clone 一份我建立完成的内容。

GitLab - init

Clone 完成後，依照以下步骤即可开始：

1. 安装 Node.js
2. 安装编辑器（这里推荐 VS Code）後开启专案目录
3. 终端机输入 npm i，等待安装
4. 终端机输入 npm run serve 开启 dev server
5. 开启浏览器，网址列输入 http://localhost:8080
6. 开始专案！