Tic Tac Vue

TIC-TAC-VUE

TIC-TAC-VUE是用Vue，Vuex和Vue Router編寫的簡單JavaScript單頁應用程序（SPA）。它的目標是成為想要學習VUE及其強大生態系統的初學者的“案例研究”。

單擊此處嘗試在線演示版本。

內容表

• 方法論
• 技術技能
• 安裝
• 用法

方法論

在這個項目中，我採用了兩種方法，以具有更好的分類代碼和有組織的源文件：BEM和Atomic Design。

貝姆

BEM （意味著塊元素修飾符）是一種方法，可幫助您在前端開發中創建可重複使用的組件。這都是關於使用塊，元素和修飾符分配CSS類。最終的DOM可能是冗長的，但是您將擁有更好的源代碼，並且由於您不必嵌套CSS類，因此您的CSS捆綁包會減少重量。

如果您想更深入地進入BEM，請單擊此處。

原子設計

原子設計是一種創建設計系統的方法。與化學類似，您可以使用原子，分子和生物組織組件文件（在這種情況下）。

原子

原子是物質的基本基礎。原子應用於Web接口，是我們的HTML標籤，例如表單標籤，輸入或按鈕。

分子

分子是鍵合在一起的原子組，是化合物的最小基本單元。

有機體

生物體是分子組的組，形成界面的相對複雜，不同的部分。

技術技能

首先，我強烈建議您查看Vue文檔，尤其是：

• VUE處理者
• VUE道具
• VUE計算的屬性
• VUE單文件組件
• vuex狀態
• Vuex Getters
• Vuex突變
• VUE路由器

安裝

您可以安裝TIC-TAC-VUE克隆項目：

 git clone https://github.com/Sanfra1407/tic-tac-vue.git

然後安裝NPM依賴項：

 npm install

用法

由於該項目是使用vite.js開發的，因此您可以使用自己的集成CLI命令來服務，構建或進行應用程序的預覽。

啟動開發服務器

 npm run dev

編譯和生產

 npm run build

構建應用程序的預覽

 npm run preview

絨毛和修復文件

 npm run lint

部署

要部署您的應用程序，您可以遵循官方的vite.js指南。