1. 開発と命名規則

合意
- ファイルには、現在のファイルの主な機能を要約するヘッダーの説明を追加する必要があります。
- 同じコンテンツの UI またはコンテンツを 2 回以上使用する場合は、コンポーネントにパッケージ化する必要があります
- 一時データが長すぎる場合は、一時データを配置するための新しい js (現在のページの data.js など) を作成する必要があります。
- コードを送信する前に必ず eslint 検証を実行し、コードをクリーンな状態に保つために自分でコンソール出力を削除してください。
- プロジェクトは遅延読み込みの形式を採用しています。要素、各rt、およびその他の依存するエクスポート値を自分で追加してください
- プロジェクトのレイアウトでは、可能な限り主な記述方法としてフレックスレイアウトを使用し、絶対配置やその他の配置方法の使用を減らすか、使用しないようにする必要があります。
- コーディング時には、フィルター、リデュース、一部、すべてなどの ES の高度な操作をできる限り使用します。
表示と非表示の制御は、showOpenDialog などの show で始まります。
is で始まる条件判定は、管理者 isAdmin であるかどうか | Open であるかどうかなどです。
@change @input などのハンドルで始まるイベントや、@click を除くその他のイベント
フォームは、tagForm などの form で終わります
配列は listTag などの list で始まります
オブジェクトコレクションは objTag などの obj で始まります。
v-for ループでは、項目とインデックスに名前を付けることは禁止されています。tagItem、tagIndex など、現在のループの内容の省略形として名前を付ける必要があります。
可能な限り curr で始まる別のフィールド (例: 現在の検索 currSearch | 現在のアクティブなエントリ currActive)
メソッド関数の一時変数は、tempName | tempListValue のように、できる限り temp で始まる必要があります。
コンポーネントを参照するときは、@/components/xxx.vue などの絶対パスを使用して、他のページのインポートを容易にします。
ルーティングルーター
- 名前付けに大文字を使用することは禁止されており、一律に小文字を使用します。複数の意味がある場合は、applist | app_list のようにアンダースコアで区切ります。
- タイトルヘッダーにはタイトルヘッダー title を追加する必要があります
- ページのインポートは、component()=>import('xxx.vue') 形式の遅延読み込みを使用する必要があります
Echart チャートを使用する場合、最初にコンポーネントとして作成してから特定のページに導入する必要があります。これは、複数回の使用とクリーンなコードに便利です。
CSSの操作

全体的な目標は、再利用性の高い霧化に近づくことです。Tailwindcss を参照できます。
- よく使用される量は、margin-left: 5px のように、base.css に書き込まれます。ml5 として書き込まれます。
- スタイルは最初にコンポーネントに書き込むことができますが、複数の場所で使用する場合はパブリックファイルに書き込む必要があります。

2. VsCodeプラグイン拡張機能

自動終了タグ終了タグを自動的に追加します
タグの名前を自動変更タグの名前を自動的に変更します
パス Intellisense パスの自動補完
vscode-icons vscode アイコン
中国語 VsCode 中国語
Easy Sass 拡張の少ない
Sass Lint スタイルの書式設定
HTML CSSのサポート
Eslint コードの仕様
KoroFileHeader ヘッダー生成コメントの説明
より美しいコードの美化
Vetur vue | Volar 構文のサポート
VsCode 統合エディター構成の EditorConfig

3. フロントエンドに必要な予備知識

マークのないものは、既存のプロジェクトで使用されているテクノロジースタックです。

开发框架
  Vue3.x  Vue2.x  （以V3为主）
  React16 React17 （暂时先了解，后续可能会用）

工程化
  Webpack4+ Webpack5+
  Vite2.x

Ui框架
  ElementUi 和 ElementPlus2.x  (饿了么团队)
  AntDesign (阿里)

图表
  Echarts5 (百度)
  阿里G系列 F系列

Css语法糖
   sass
   less

开发规范
   Eslint
   Prettier

包管理工具
  npm
  yarn

前端微服务框架
  qiankun(阿里)
  MircoApp(京东)  (还在内测中，先简单了解一下)

跨端开发
   Uniapp
   Flutter3.x （可作为兴趣学习，待对多端支持更完美后则启用）

Node (学习了解)
   express
   koa2

文档中心
  vuePress

4. ファミリースタイルのデザイン言語の概念 (未実装)

コンセプト：

ブランドのポジショニングは基礎であり中核であり、企業が市場と自社をより深く理解し、ブランドに対するユーザーの認識と認識を深めるのに役立ちます。
特定のブランドはタイプによって区別され、プロフェッショナリズムを強調する製品は比較的保守的である必要がありますが、純粋なインターネット製品 (単一の製品) は製品の特徴を強調します。

例：

Tencent の Q 言語は、統合エクスペリエンス、遺伝子発現、社会的善という 3 つの基本目標を設定します。

アドバンテージ：

UIの視覚的な一貫性
デザインのユニークさ
効率の向上
マルチプラットフォームの統合
ソフトウェアの継続性

埋め込む：

ボタン、フォーム、フォントなどの要素または antd コンポーネントに基づいた二次パッケージ化により、反復的なデザインを削減します。

开发框架
  Vue3.x  Vue2.x
  React16   React17
  Angular

工程化
  Webpack4+
  Vite2.x

Ui框架
  ElementUi (饿了么团队)
  AntDesign (阿里)

图表
  Echarts5 (百度)
  阿里G系列 F系列

Css语法糖
   sass
   less

$black:#fff

.test ww{
    
    
 color: $black
}

开发规范
   Eslint
   Prettier
 
包管理工具
  npm
  yarn

前端微服务框架
  singspa
  qiankun(阿里)
  MircoApp(京东) - 内测中

跨端开发
   Uniapp
   Flutter
  
Node
   express
   koa2

文档中心
  vuePress

フロントエンド開発コードの命名規則

目次

1. 開発と命名規則

2. VsCodeプラグイン拡張機能

3. フロントエンドに必要な予備知識

4. ファミリースタイルのデザイン言語の概念 (未実装)

おすすめ