Tic Tac Vue

tic-tac-vue

TIC-TAC-VUEは、Vue、Vuex、Vueルーターで書かれたシンプルなJavaScriptシングルページアプリケーション（SPA）です。その目標は、VUEとその強力なエコシステムを学びたい初心者のための「ケーススタディ」になることです。

オンラインデモバージョンを試すには、ここをクリックしてください。

コンテンツの表

• 方法論
• 技術的なスキル
• インストール
• 使用法

方法論

このプロジェクトでは、2つの方法論を採用して、より良い因数分解コードと整理されたソースファイル、BEMとAtomic Designを編成しました。

ベム

BEM （ブロック要素修飾子を意味する）は、フロントエンド開発で再利用可能なコンポーネントを作成するのに役立つ方法論です。ブロック、要素、修飾子を使用してCSSクラスを分割することがすべてです。最終的なDOMは冗長性である可能性がありますが、より良い因子ソースコードがあり、CSSクラスをネストする必要がないため、CSSバンドルの結果が少なくなります。

BEMに深く入りたい場合は、ここをクリックしてください。

アトミックデザイン

アトミックデザインは、設計システムを作成するための方法論です。化学と同様に、原子、分子、生物を使用してコンポーネントファイル（このシナリオVUE単一ファイルコンポーネントで）を整理できます。

原子

原子は物質の基本的な構成要素です。 Webインターフェイスに適用される原子は、フォームラベル、入力、ボタンなどのHTMLタグです。

分子

分子は、原子のグループが結合し、化合物の最小の基本単位です。

生物

生物は、分子のグループと結合されて、界面の比較的複雑で明確なセクションを形成します。

技術的なスキル

まず第一に、特に次のように、Vueのドキュメントを見ることを強くお勧めします。

• Vueハンドラー
• Vue Props
• Vue Computedプロパティ
• VUEシングルファイルコンポーネント
• Vuex State
• Vuex Getters
• Vuex変異
• Vueルーター

インストール

TIC-TAC-VUEプロジェクトのクローニングをインストールできます。

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

次に、NPM依存関係をインストールします。

 npm install

使用法

このプロジェクトはvite.jsで開発されているため、独自の統合されたCLIコマンドを使用して、アプリケーションのプレビューを提供、構築、またはプレビューすることができます。

DEVサーバーを開始します

 npm run dev

生産のためにコンパイルして模倣します

 npm run build

構築されたアプリケーションのプレビュー

 npm run preview

糸くずと修正ファイル

 npm run lint

展開する

アプリケーションを展開するには、公式のvite.jsガイドに従うことができます。