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指南。