Vueコード仕様

コードの仕様を知る
プロジェクトディレクトリ
1. 命名規則
2. コーディング仕様
3. アノテーション仕様
4. その他
拡大

コードの仕様を知る

まず 2 つの質問について考えてみましょう。

コード仕様とは何ですか?
なぜコード仕様が必要なのでしょうか?

経験豊富なフロントエンド開発者であれば、このような古いプロジェクトに接したことがあるはずです。変数名は abc、fds などであるか、name1、name2 などの数字で名前が付けられており、そのような変数はコメント化されておらず、ゴーストです。それが何をするのかさえ知りません。

このタイプのコードは、典型的な非標準コードです。このようなコードの最も重要な問題は、開発者をイライラさせることに加えて、チームワークの効率とプログラムの品質を大幅に低下させることです。

チームの共同作業の過程で、グループ内の他の人があなたのコードを使用またはレビューする必要があり、この状況を見たとき、あなたにスプレーするだけでなく、あなたが書いた内容を理解するために多くの時間を費やします。同時に、変数の競合、未知の隠れた危険、困難なデバッグなどの問題が非常に発生しやすく、プログラマーのコーディング態度やプロ意識さえも現れます。

もちろん、コード仕様には多くの側面が含まれており、変数名の仕様は最も基本的な仕様にすぎません。不正が多ければ多いほど、プログラムの品質は低下し、チームワークの効率も低下します。

プロジェクトディレクトリ

グローバルに共通のコンポーネントは/src/components/の下に。
ページ/ビューコンポーネントは/src/views/の下に。
グローバルパブリックディレクティブとフィルター (3 つ以上のファイルによって参照される) は、それぞれ src/ ディレクトリに配置されますdirectives/、filters/。
ページファイルにプライベートコンポーネント、命令、フィルターが含まれる場合は、ページと同じ名前のディレクトリを作成し、ページファイルの名前を変更して、index.vueこのディレクトリの下にプライベート./componentsフォルダーとその他のフォルダーを作成します。

例えば：

src/
├── App.vue
├── assets
├── main.js
├── components                     # 全局通用组件
├── directive                      # 全局公共指令
├── filters                        # 全局公共过滤器
└── views                          # 页面/视图
    ├── login
    │   ├── components             # 私有组件
    │   └── index.vue
    └── profile
        ├── components             # 私有组件
        └── index.vue

命名規則

1.1 共通のファイルとフォルダー

1.1.0 市場で一般的に使用される命名規則

camelCase(キャメルケース - 頭文字は小文字)
PascalCase(キャメルケース - 最初の文字を大文字にします)
kebab-case(ダッシュ/ダッシュの命名法)
Snake(アンダースコアの命名法)

1.1.1 プロジェクト名

すべて小文字で、短横线で区切ります。例: my-project-name。

1.1.2 ディレクトリ名

プロジェクト命名規則を参照し、複数の構造がある場合は複数の命名を採用してください。例: ドキュメント、アセット、コンポーネント、ディレクティブ、ミックスイン、ユーティリティ、ビュー。

1.1.3 画像ファイル名

すべて小文字で、単一の単語の名前が優先され、複数の単語は下划线それらを区切るために名前が付けられます。

banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg

1.1.4 HTMLファイル名

すべて小文字で、単一の単語の名前が優先され、複数の単語は下划线それらを区切るために名前が付けられます。

|- error_report.html
|- success_report.html

1.1.5 CSSファイル名

すべて小文字で、単一の単語の名前が優先され、複数の単語は短横线それらを区切るために名前が付けられます。

|- normalize.less
|- base.less
|- date-picker.scss
|- input-number.scss

1.1.6 JavaScript ファイル名

すべて小文字で、単一の単語の名前が優先され、複数の単語は短横线それらを区切るために名前が付けられます。

|- index.js
|- plugin.js
|- util.js
|- date-util.js
|- account-model.js
|- collapse-transition.js

上記のルールは、「静的ファイルでは下線、コンパイル済みファイルではダッシュ」としてすぐに覚えることができます。

1.2 Vue の注目フォルダー

Vue プロジェクトでは、これは一般的なファイルとフォルダーの命名規則に追加されます。

1.2.1Components/ の下にある直接のサブフォルダー

このようなモジュールのカテゴリを表します。
名詞で構成されます (例: Charts/)。
特別な場合を除いて、単語は 1 つだけであることが望ましい (良い例: Car/、Order/、Cart/) (悪い例: CarInfo/、CarPage/)。
3 つ以上の単語がある場合は、PascalBase 大驼峰スタイルを使用します (例: BackToTop/)

1.2.2 views/以下のフォルダとその他のフォルダ

ページの名前またはクラス名を表します。
名詞で構成されます (例: profile/)。
3 つ以上の単語がある場合は、kebab-case 短横线スタイルを使用します (例: error-page/)。

例えば：

src/
├── App.vue
├── assets
├── main.js
├── components
│   ├── BackToTop             # 通用组件的文件夹
│   └── Charts                # 通用组件的文件夹
│       ├── Keyboard.vue
│       ├── LineMarker.vue
│       ├── MixChart.vue
│       └── mixins            # 其它文件夹（不是 components/ 的直接子文件夹）
├── directive
│   ├── clipboard             # 其它文件夹
│   └── permission            # 其它文件夹
├── filters
└── views
    ├── charts                # 视图组件的文件夹
    ├── clipboard             # 视图组件的文件夹
    ├── dashboard             # 视图组件的文件夹
    │   ├── admin             # 视图组件的文件夹
    │   │   ├── components
    │   │   └── index.vue
    │   ├── editor            # 视图组件的文件夹
    │   │   └── index.vue
    │   └── index.vue
    └── error-page            # 视图组件的文件夹
        ├── 401.vue
        └── 404.vue

1.3 Vue コンポーネントの命名

1.3.1 単一ファイルコンポーネント名

ファイル拡張子が . の.vue単一ファイルコンポーネント。単一ファイルのコンポーネント名は常に单词大写开头(PascalCase big CamelCase) である必要があります。

ここで説明するこぶ名の付いたコンポーネントとは、components/フォルダー内の再利用可能なパブリックコンポーネント (ページ以外のコンポーネント) を指します。また、views/ビューフォルダー内のプライベートフォルダーcomponents/内のプライベートコンポーネントも含まれます。ただし、views/フォルダーの下にあるページコンポーネントを除き、ページビューコンポーネントはのkebab-caseスタイルを採用します。

お勧め：

src/
├── MyComponent.vue

コンポーネントの命名形式として PascalCase を選択するのはなぜですか?

PascalCase は有効な JavaScript 識別子です。これにより、JavaScript でのコンポーネントのインポートと登録が簡単になり、IDE のオートコンプリートが向上します。
<PascalCase />テンプレートでは、これがネイティブ HTML 要素ではなく Vue コンポーネントであることがより明確になります。また、Vue コンポーネントとカスタム要素 (Web コンポーネント) も区別されます。

これは、単一ファイルコンポーネントとインライン文字列テンプレートの両方で推奨されます。ただし、PascalCase タグ名は DOM テンプレートでは使用できません。詳細については、「DOM テンプレートの解析に関する考慮事項」を参照してください。

便宜上、Vue はテンプレート内の kebab-case タグを PascalCase に登録されたコンポーネントに解析することをサポートしています。<MyComponent>これは、 MyComponent という名前で登録されたコンポーネントは、テンプレートによって、またはテンプレート内で参照できることを意味します<my-component>。これにより、同じ JavaScript コンポーネント登録コードを使用して、異なるソースからのテンプレートを操作できるようになります。

1.3.2 シングルトンコンポーネント名

アクティブなインスタンスが 1 つだけあるコンポーネントには、その一意性を示すために接頭辞 The を付けて名前を付ける必要があります。

これは、コンポーネントが 1 つのページでのみ使用できるという意味ではなく、ページごとに 1 回だけ使用されるという意味です。これらのコンポーネントはアプリケーション用にカスタムされているため、いかなる props も受け入れません。props を追加する必要があるとわかった場合、これは実際には、_現時点では_ ページごとに 1 回だけ使用される再利用可能なコンポーネントであることを意味します。

たとえば、ヘッダーとサイドバーのコンポーネントはほぼすべてのページで使用され、小道具を受け入れず、このアプリケーション用にカスタムメイドされています。

お勧め：

components/
|- TheHeading.vue
|- TheSidebar.vue

推奨されない:

components/
├── Heading.vue
├── MySidebar.vue

1.3.3 基本コンポーネント名

基本コンポーネント:日付ピッカー、モーダルボックスなどのビジネス機能、独立した特定の機能を含まない基本コンポーネント。このタイプのコンポーネントはプロジェクトの基本コントロールとして広く使用されるため、コンポーネントの API は
高度に抽象化されており、さまざまな構成を通じてさまざまな機能を実現できます。

特定のスタイルと規則を適用する基本コンポーネント (つまり、クラスを提示し、ロジックや状態を持たず、ビジネスロジックを混合しないコンポーネント) はすべて、Base、App、V などの特定のプレフィックスで始まる必要があります。

基本コンポーネントは1ページ内で何度も使用でき、また別のページで再利用することもできる再利用性の高いコンポーネントです。

お勧め：

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

推奨されない:

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

1.3.4 ビジネスコンポーネント

業務コンポーネント: 特定の機能のみを含む基本コンポーネントとは異なり、業務内の複数のページで再利用されます(再利用可能)。基本コンポーネントとの違いは、業務コンポーネントは現在のプロジェクトでのみ使用されることです。これは汎用的ではなく、データリクエストなどの一部のサービスを含みますが、基本コンポーネントにはサービスは含まれておらず、どのプロジェクトでも使用でき、データ検証機能を備えた入力ボックスなどの単一の機能しかありません。

複雑なビジネスと混合されたコンポーネント (独自のデータおよびプロパティ関連の処理を含む) は、ビジネスコンポーネントです。接頭辞を付けて名前を付ける必要がありますCustom。

ビジネスコンポーネントはページ内にあります。たとえば、あるページにカードリストがあり、スタイルやロジックがビジネスと密接に関係しているカードがビジネスコンポーネントです。

お勧め：

components/
|- custom-card.vue

1.3.5 密結合したコンポーネント名

このタイプのコンポーネントは、親コンポーネントのコンテキスト内でのみ意味を持ち、この関係はその名前に反映される必要があります。エディターは通常、ファイルをアルファベット順に整理するため、これにより関連ファイルがまとめられます。

親コンポーネントと密接に結合されている子コンポーネントには、通常、親コンポーネント名をプレフィックスとして付けた名前が付けられます。

お勧め：

components/
├── TodoList.vue
├── TodoListItem.vue
├── TodoListItemButton.vue

推奨されない:

components/
├── TodoList.vue
├── ItemForTodoList.vue
├── ButtonForTodoListItem.vue

1.3.6 コンポーネント名の単語の順序

コンポーネント名は、高レベルの (通常は説明的な) 単語で始まり、説明的な修飾子で終わる必要があります。エディターは通常、ファイルをアルファベット順に整理するため、コンポーネント間の重要な関係が一目でわかるようになりました。

この表現は比較的抽象的ですが、検索機能と設定機能のコンポーネントを例にして、いわゆる「高レベル」について説明します。

お勧め：

components/
├── SearchButtonClear.vue
├── SearchButtonRun.vue
├── SearchInputQuery.vue
├── SearchInputExcludeGlob.vue
├── SettingsCheckboxTerms.vue
├── SettingsCheckboxLaunchOnStartup.vue

推奨されない:

components/
├── ClearSearchButton.vue
├── ExcludeFromSearchInput.vue
├── LaunchOnStartupCheckbox.vue
├── RunSearchButton.vue
├── SearchInput.vue
├── TermsCheckbox.vue

複数レベルのディレクトリを作成する別の方法として、すべての検索コンポーネントをsearch/ディレクトリに配置し、すべての設定コンポーネントをsettings/ディレクトリに配置する方法もあります。複数のレベルのディレクトリを移動することは、単一のコンポーネントディレクトリをスクロールするよりも手間がかかるため、非常に大規模な (例: 100 以上のコンポーネント) アプリケーションの場合にのみこれを行うことをお勧めします。

1.3.7 コンポーネント名は完全な単語である必要があり、略語は禁止されています

コンポーネント名は、チームワークや後のメンテナンスに便利な、略語ではなく完全な単語である必要があります。エディターのオートコンプリートにより、長い名前の作成がすでに安価になり、それがもたらす明瞭さは非常に貴重です。特に一般的に使用されない略語は避けるべきです。

お勧め：

components/
├── StudentDashboardSettings.vue
├── UserProfileOptions.vue

推奨されない:

components/
├── SdSettings.vue
├── UProfOpts.vue

1.3.8 ページコンポーネント名

ビューフォルダー:views/フォルダーの下にあり、ページの種類の名前を表し、ビューコンポーネントを保存します。
ビューコンポーネント: 特定のページの名前またはクラス名を表します。
ビューコンポーネントと他のコンポーネントの違いは、ビューコンポーネントはview/フォルダーまたはビューフォルダーの下に配置され、他のコンポーネントはcomponents/フォルダーの下に配置されることです。

views/ビューコンポーネントは、Login.vue、Home.vue などのフォルダーの直下に配置できます。
ビューフォルダーの名前は、ページの名前を表す必要があります (たとえば、login/、error-page/)。
ビューフォルダーにビューコンポーネントが 1 つだけある場合、そのコンポーネントの名前は、index.vue になります (たとえば、login/index.vue)。
ビューフォルダーの下に 2 つ以上のビューコンポーネントがある場合は、内部ファイルのクラス名を反映するようにそれらに別々の名前を付けます (例: car/car-list.vue および car/car-detail.vue)。
なるように努めてください名词。
一般的な語尾は (詳細、編集、リスト、情報、レポート) です。
view フォルダーの下にプライベートファイルを置くことができcomponents/、その内部 .vue ファイルは他のコンポーネントの命名方法 (大きなキャメルケース) に従います。
コンポーネント/ を除き、すべてkebab-caseこのスタイルを使用します。

例えば：

src/
├── components
│   ├── BackToTop               # 通用组件的文件夹
│   └── Charts                  # 通用组件的文件夹
│       ├── Keyboard.vue
│       ├── LineMarker.vue
│       ├── MixChart.vue
│       └── mixins              # 其它文件夹
└── views
    ├── login                   # 视图组件的文件夹
    │   └── index.vue
    ├── profile                 # 视图组件的文件夹
    │   ├── index.vue
    │   └── components
    ├── car                     # 视图组件的文件夹
    │   ├── car-list.vue        # 视图组件
    │   ├── car-detail.vue      # 视图组件
    │   └── components
    │       ├── CarListItem.vue
    │       └── CarInfoItem.vue
    └── error-page              # 视图组件的文件夹
        ├── 401.vue             # 视图组件
        └── 404.vue             # 视图组件

1.4 Vue コンポーネントの内部パラメータの命名

1.4.1 名前

コンポーネント名は常に複数の単語である必要があり、常に PascalCase 上位の CamelCase である必要があります。例外は、ルートコンポーネントである App との<transition>、<component>ような Vue 組み込みコンポーネントです。すべての HTML 要素名は単一の単語であるため、これを行うと、既存および将来の HTML 要素との競合が回避されます。

お勧め：

export default {
    
    
  name: 'ToDoList',
  // ...
}

1.4.2 プロップ

小道具を宣言するときは、その名前には常にキャメルケースを使用する必要があり、テンプレートと JSX では常に kebab-case を使用する必要があります。私たちは単に各言語の規則に従っているだけですが、JavaScript ではキャメルケースがより自然です。HTML ではケバブケースです。

お勧め：

//template 模板中
<welcome-message greeting-text="hi"/>

//<script>中
 props: {
    
    
  // 组件状态，用于控制组件的颜色
   status: {
    
    
     greetingText: String,
     required: true,
     validator: function (value) {
    
    
       return [
         'succ',
         'info',
         'error'
       ].indexOf(value) !== -1
     }
   },
 }

推奨されない:

  // 错误：greetingText不要用小驼峰，应该用短横线greeting-text
<welcome-message greetingText="hi"/>

props: {
    
    
  // 错误：1，不要用短横线，应该用小驼峰greetingText
  // 错误：2，不要用引号
'greeting-text': String
}

1.4.3 ルーター

Vue Router Path は kebab-case 形式で名前が付けられます。スネークアンダースコアを含む単語 (/user_info など) またはキャメルケース (/userInfo など) は 1 つの単語として扱われ、検索エンジンはセマンティクスを区別できません。

お勧め：

// good
{
    
    
  path: '/user-info', // // user-info 能被搜索引擎解析成 user info
  name: 'UserInfo',
  component: UserInfo,
  meta: {
    
    
    title: ' - 用户',
    desc: ''
  }
},

推奨されない:

// bad
{
    
    
  path: '/user_info', // // user_info 被搜索引擎当成一个单词
  name: 'UserInfo',
  component: UserInfo,
  meta: {
    
    
    title: ' - 用户',
    desc: ''
  }
},

1.4.4 テンプレート内のコンポーネント

ほとんどのプロジェクトでは、コンポーネント名は常に単一ファイルコンポーネントと文字列テンプレートに含める必要がありますPascalCaseが、常に DOM テンプレートに含める必要がありますkebab-case。

お勧め：

<!-- 在单文件组件和字符串模板中 --> 
<MyComponent/>

<!-- 在 DOM 模板中 --> 
<my-component></my-component>

1.4.5 自動閉鎖コンポーネント

コンテンツのないコンポーネントは、単一ファイルコンポーネント、文字列テンプレート、JSX では自己終了する必要がありますが、DOM テンプレートでは決して使用しないでください。

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在所有地方 -->
<my-component></my-component>

1.4.6 変数

命名方法: キャメルケース
命名規則: タイプ + オブジェクトの説明または属性

// bad
var getTitle = "LoginTable"

// good
let tableTitle = "LoginTable"
let mySchool = "我的学校"

1.4.7 定数

命名方法: すべて大文字のアンダースコア
命名規則: 名前を組み合わせるには大文字とアンダースコアを使用し、単語を区切るにはアンダースコアを使用します。

お勧め：

const MAX_COUNT = 10
const URL = 'https://www.fedbook.cn'

1.4.8 メソッド

命名方法：camelCase小さなこぶ
命名規則: 動詞または動詞 + 名詞の統一的な使用

1) 通常は動詞+名詞の形を使用します。

推奨:jumpPage、openCarInfoDialog

非推奨: go、nextPage、show、open、login

2) データで終わるリクエストデータメソッド

推奨: getListData、postFormData

非推奨: takeData、confirmData、getList、postForm

3) 動詞が単独の場合

推奨: 初期化、リフレッシュ

動詞	意味	戻り値
できる	アクションの実行可否の判断（右）	この関数はブール値を返します。true: 実行可能; false: 実行不可;
もっている	値が含まれているかどうかを判断する	この関数はブール値を返します。true: この値が含まれる; false: この値が含まれない;
は	特定の値かどうかを判断する	この関数はブール値を返します。true: 特定の値; false: 特定の値ではない;
得る	値を取得する	関数が非ブール値を返す
設定	値を設定する	戻り値なし。設定が成功したかどうかを返すか、チェーンされたオブジェクトを返します。

追加、削除、変更、詳細については以下の5つの単語を一律に使用し、それ以外の単語は使用できないことを明記します（各端を統一するため）

add / update / delete / **detail / get

添付ファイル: 関数メソッドで一般的に使用される動詞:

get 获取/set 设置, 
add 增加/remove 删除, 
create 创建/destory 销毁, 
start 启动/stop 停止, 
open 打开/close 关闭, 
read 读取/write 写入, 
load 载入/save 保存,
begin 开始/end 结束, 
backup 备份/restore 恢复,
import 导入/export 导出, 
split 分割/merge 合并,
inject 注入/extract 提取,
attach 附着/detach 脱离, 
bind 绑定/separate 分离, 
view 查看/browse 浏览, 
edit 编辑/modify 修改,
select 选取/mark 标记, 
copy 复制/paste 粘贴,
undo 撤销/redo 重做, 
insert 插入/delete 移除,
add 加入/append 添加, 
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索, 
increase 增加/decrease 减少, 
play 播放/pause 暂停, 
launch 启动/run 运行, 
compile 编译/execute 执行, 
debug 调试/trace 跟踪, 
observe 观察/listen 监听,
build 构建/publish 发布,
input 输入/output 输出,
encode 编码/decode 解码, 
encrypt 加密/decrypt 解密, 
compress 压缩/decompress 解压缩, 
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 连接/disconnect 断开,
send 发送/receive 接收, 
download 下载/upload 上传, 
refresh 刷新/synchronize 同步,
update 更新/revert 复原, 
lock 锁定/unlock 解锁, 
check out 签出/check in 签入, 
submit 提交/commit 交付, 
push 推/pull 拉,
expand 展开/collapse 折叠, 
enter 进入/exit 退出,
abort 放弃/quit 离开, 
obsolete 废弃/depreciate 废旧, 
collect 收集/aggregate 聚集

1.4.9 カスタムイベント

カスタムイベントでは、常にケバブケースのイベント名を使用する必要があります。

コンポーネントやプロップとは異なり、イベント名の大文字と小文字の自動変換はありません。代わりに、トリガーされるイベントの名前は、このイベントのリッスンに使用される名前と正確に一致する必要があります。

this.$emit('my-event')

<MyComponent @my-event="handleDoSomething" />

コンポーネントやプロパティとは異なり、イベント名は JavaScript の変数名やプロパティ名として使用されないため、キャメルケースやパスカルケースを使用する理由はありません。また、v-onイベントリスナーは DOM テンプレート内で自動的にすべて小文字に変換されるため (HTML では大文字と小文字が区別されないため)、監視できなくなりv-on:myEventます。v-on:myeventmyEvent

ネイティブイベントリファレンスリスト

ネイティブイベントから、その使用法は次のとおりであることがわかります。

<div
  @blur="toggleHeaderFocus"
  @focus="toggleHeaderFocus"
  @click="toggleMenu"
  @keydown.esc="handleKeydown"
  @keydown.enter="handleKeydown"
  @keydown.up.prevent="handleKeydown"
  @keydown.down.prevent="handleKeydown"
  @keydown.tab="handleKeydown"
  @keydown.delete="handleKeydown"
  @mouseenter="hasMouseHoverHead = true"
  @mouseleave="hasMouseHoverHead = false">
</div>

Vue でネイティブイベントとカスタムイベントの使用を区別するには、複数単語のイベント名にケバブケースを使用することに加えて、名前付けもon + 动词次の形式に従う必要があります。

<!-- 父组件 -->
<div
  @on-search="handleSearch"
  @on-clear="handleClear"
  @on-clickoutside="handleClickOutside">
</div>

// 子组件
export default {
    
    
  methods: {
    
    
    handleTriggerItem () {
    
    
      this.$emit('on-clear')
    }
  }
}

1.4.10 イベントメソッド

命名方法: キャメルケース
命名規則: ハンドル + 名前 (オプション) + 動詞

<template>
  <div
    @click.native.stop="handleItemClick()"
    @mouseenter.native.stop="handleItemHover()">
  </div>
</template>

<script>

export default {
    
    
  methods: {
    
    
    handleItemClick () {
    
    
      //...
    },
    handleItemHover () {
    
    
      //...
    }
  }
}
</script>

コーディング標準

2.1 Vueプロジェクトの仕様

2.1.1 コード構造

<template>
  <div id="my-component">
    <DemoComponent />
  </div>
</template>

<script>
import DemoComponent from '../components/DemoComponent'

export default {
    
    
  name: 'MyComponent',
  components: {
    
    
    DemoComponent
  },
  mixins: [],
  props: {
    
    },
  data () {
    
    
    return {
    
    }
  },
  computed: {
    
    },
  watch: {
    
    }
  created () {
    
    },
  mounted () {
    
    },
  destroyed () {
    
    },
  methods: {
    
    },
}
</script>

<style lang="scss" scoped>
#my-component {
    
    
}
</style>

2.1.2 テンプレートテンプレート

2.1.2.1 v-for のキー値を設定する

内部コンポーネントとそのサブツリーの状態を維持するには、コンポーネント上でキーを v-for とともに使用する必要があります。アニメーション内のオブジェクトの恒常性など、要素の予測可能な動作も維持します。

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id">
      {
   
   { todo.text }}
  </li>
</ul>

2.1.2.2 v-if と v-for は相互に排他的です

同じ要素でとの両方をv-if決して使用しないでください。v-for

<!-- bad：控制台报错 -->
<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
      {
   
   { user.name }}
  </li>
</ul>

一般に、次の 2 つの一般的な状況でこれを行う傾向があります。

リスト内の項目をフィルタリングする場合 (例: v-for="user in users" v-if="user.isActive")。この場合、ユーザーを、フィルター処理されたリストを返す activeUsers などの計算されたプロパティに置き換えます。

computed: {
    
    
  activeUsers: function () {
    
    
    return this.users.filter((user) => {
    
    
      return user.isActive
    })
  }
}

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id">
      {
   
   { user.name }}
  </li>
</ul>

非表示にする必要があるリストのレンダリングを避けるため (例: v-for="user in users" v-if="ShouldShowUsers")。この場合、v-if をコンテナ要素 (例: ul、ol) に移動します。

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id">
      {
   
   { user.name }}
  </li>
</ul>

<!-- good -->
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id">
      {
   
   { user.name }}
  </li>
</ul>

2.1.2.3 v-show および v-if の選択

実行時に頻繁に切り替える必要がある場合は v-show を使用し、実行時に条件がほとんど変化しない場合は v-if を使用します。

2.1.2.4 複数の属性要素

複数の属性を持つ要素は、属性ごとに 1 つずつ複数行で記述する必要があります。

<!-- bad -->
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo">

<MyComponent
  foo="a"
  bar="b"
  baz="c"/>

2.1.2.5 テンプレート内の単純な式

コンポーネントテンプレートには単純な式のみを含める必要があり、複雑な式は計算されたプロパティまたはメソッドにリファクタリングする必要があります。

複雑な式を使用すると、テンプレートの宣言性が低下する可能性があります。値を計算する方法ではなく、そこにあるべきものを説明するように努めるべきです。また、計算されたプロパティとメソッドにより、コードが再利用可能になります。

推奨されない:

<!-- 在模板中 -->
{
    
    {
    
    
  fullName.split(' ').map((word) => {
    
    
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

お勧め：

<!-- 在模板中 -->
{
    
    {
    
     normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
    
    
  normalizedFullName: function () {
    
    
    return this.fullName.split(' ').map(function (word) {
    
    
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

2.1.2.6 引用符で囲まれた属性値

空ではない HTML 属性値は常に二重引用符で囲む必要があります。

<!-- bad -->
<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

<!-- good -->
<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

2.1.2.7 コマンドの略語

によって:表現されるv-bind:
によって@表現されるv-on:
によって#表現されるv-slot:

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions">

<input
  @input="onInput"
  @focus="onFocus">

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

2.1.3 データ

コンポーネントのデータは関数である必要があります。

// In a .vue file
export default {
    
    
  data () {
    
    
    return {
    
    
      foo: 'bar'
    }
  }
}

2.1.4 プロップ

プロップの定義はできるだけ詳細に行う必要があります。

スクリプトで名前を付けるにはキャメルケースを使用し、テンプレートではケバブケースのダッシュを使用します。
タイプを指定する必要があります
意味を示すために注記を追加する必要があります
必須またはデフォルトを追加する必要があります。2 つのうちの 1 つを選択してください
ビジネスニーズがある場合は、バリデータによる検証を追加する必要があります

//template 模板中
<welcome-message greeting-text="hi"/>

//<script>中
 props: {
    
    
  // 组件状态，用于控制组件的颜色
   status: {
    
    
     greetingText: String,
     required: true,
     validator: function (value) {
    
    
       return [
         'succ',
         'info',
         'error'
       ].indexOf(value) !== -1
     }
   },
 }

推奨されない:

  // 错误：greetingText不要用小驼峰，应该用短横线greeting-text
<welcome-message greetingText="hi"/>

props: {
    
    
  // 错误：1，不要用短横线，应该用小驼峰greetingText
  // 错误：2，不要用引号
'greeting-text': String
}

2.1.5 計算済み

複雑な計算プロパティは、できるだけ多くの単純なプロパティに分割する必要があります。小さく焦点を絞った計算プロパティにより、情報の使用に関する仮説上の制約が軽減されるため、要件の変化に応じて必要なリファクタリングが少なくなります。

// bad
computed: {
    
     
  price: function () {
    
     
    var basePrice = this.manufactureCost / (1 - this.profitMargin) 
    return ( 
      basePrice - 
      basePrice * (this.discountPercent || 0) 
    ) 
  } 
}

// good
computed: {
    
    
  basePrice: function () {
    
    
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    
    
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    
    
    return this.basePrice - this.discount
  }
}

2.1.6 Vueルーターの仕様

2.1.6.1 ルーティングパラメータを使用したページジャンプデータ送信

ページジャンプ。たとえば、ページ A からページ B にジャンプする場合、ページ A のデータをページ B に渡す必要があります。渡すデータを vuex に保存するのではなく、ルーティングパラメーターを使用してパラメーターを渡すことをお勧めします。次に、ページ B の vuex のデータを取得します。B ページが更新されると、vuex データが失われ、B ページはデータを正常に表示できなくなります。

お勧め：

let id = ' 123';
this.$router.push({
    
     name: 'userCenter', query: {
    
     id: id } });

2.1.6.2 ルート遅延ロード (遅延ロード) メカニズムを使用する

{
    
    
    path: '/uploadAttachment',
    name: 'uploadAttachment',
    meta: {
    
    
      title: '上传附件'
    },
    component: () => import('@/view/components/uploadAttachment/index.vue')
  },

2.1.6.3 ルーターの命名規則

path と ChildrenPoints の命名規則には、ケバブケースの命名規則が採用されています (ディレクトリ名とファイル名はすべてケバブケースであるため、vue ファイルのディレクトリ構造の一貫性を保つようにしてください。これにより、対応するファイルを簡単に見つけることができます)。

名前の命名規則は KebabCase の命名規則を採用しており、コンポーネントのコンポーネント名と一致しています。(キープアライブ機能を維持するため、コンポーネントの名前に従ってキープアライブがキャッシュされるため、両者の一貫性が高くなければなりません)

// 動的ロード

export const reload = [
  {
    
    
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
    
    
      title: '动态加载',
      icon: 'icon iconfont'
    },
    children: [
      {
    
    
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
    
    
          title: 'SmartReload',
          childrenPoints: [
            {
    
    
              title: '查询',
              name: 'smart-reload-search'
            },
            {
    
    
              title: '执行reload',
              name: 'smart-reload-update'
            },
            {
    
    
              title: '查看执行结果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
];

2.1.6.4 ルーターでのパスの命名規則

ケバブケースの命名規則を採用することに加えて、パスは / で始まる必要があり、子のパスも / で始まる必要があります。次の例

目的：

特定のページに問題があり、vue ファイルをすぐに見つける必要がある、/ で始まらない場合、パスは親と子で構成されている、複数回検索する必要がある、などのシナリオがよくあります。ルーターファイルを検索して検索し、先頭が / で始まる場合は、対応するコンポーネントをすぐに検索できます

{
    
    
    path: '/file',
    name: 'File',
    component: Main,
    meta: {
    
    
      title: '文件服务',
      icon: 'ios-cloud-upload'
    },
    children: [
      {
    
    
        path: '/file/file-list',
        name: 'FileList',
        component: () => import('@/views/file/file-list.vue')
      },
      {
    
    
        path: '/file/file-add',
        name: 'FileAdd',
        component: () => import('@/views/file/file-add.vue')
      },
      {
    
    
        path: '/file/file-update',
        name: 'FileUpdate',
        component: () => import('@/views/file/file-update.vue')
      }
    ]
  }

2.2 HTML仕様

2.2.1 ファイルテンプレート

HTML5 ファイルのテンプレート:

<!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>HTML5标准模版</title>
  </head>
  <body>
  </body>
</html>

携帯端末：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <title>移动端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->

</head>
<body>
</body>
</html>

パソコン側：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
    <meta name="robots" content="index,follow">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="ie-stand">
    <title>PC端HTML模版</title>

    <!-- S DNS预解析 -->
    <link rel="dns-prefetch" href="">
    <!-- E DNS预解析 -->

    <!-- S 线上样式页面片，开发请直接取消注释引用 -->
    <!-- #include virtual="" -->
    <!-- E 线上样式页面片 -->

    <!-- S 本地调试，根据开发模式选择调试方式，请开发删除 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- /本地调试方式 -->

    <link rel="stylesheet" href="http://srcPath/index.css">
    <!-- /开发机调试方式 -->
    <!-- E 本地调试 -->
</head>
<body>
</body>
</html>

2.2.2 要素とラベルのクロージャー

HTML 要素には次の 5 種類があります。

空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
生のテキスト要素: スクリプト、スタイル
RCDATA 元素：textarea、title
外部要素: MathML 名前空間および SVG 名前空間の要素
通常の要素: HTML で許可されている他の要素は通常の要素と呼ばれます

ブラウザーがコードをより適切に解析し、コードを読みやすくできるようにするために、次の規則があります。

開始タグと終了タグのある要素はすべて開始タグと終了タグを記述する必要があり、開始タグやバンドルタグを省略できる一部の要素も記述する必要があります。
空の要素タグには「/」文字は追加されません。

<!-- good -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始有终，浏览器能正确解析</p>
</div>
 
<br data-tomark-pass>

<!-- bad -->
<div>
    <h1>我是h1标题</h1>
    <p>我是一段文字，我有始无终，浏览器亦能正确解析
</div>

<br/>

2.2.3 コードのネスト

要素のネスト仕様。各ブロック要素は独自の行にあり、インライン要素はオプションです。

<!-- good -->
<div>
    <h1></h1>
    <p></p>
</div> 
<p><span></span><span></span></p>

<!-- bad -->
<div>
    <h1></h1><p></p>
</div> 
<p> 
    <span></span>
    <span></span>
</p>

段落要素と見出し要素はインライン要素のみをネストできます。

<!-- good -->
<h1><span></span></h1>
<p><span></span><span></span></p>

<!-- bad -->
<h1><div></div></h1>
<p><div></div><div></div></p>

2.3 CSS仕様

2.3.1 命名

 クラス名には小文字を使用し、ダッシュで区切り
ます
。

派手でわかりにくい名前ではなく、要素の目的と目的を反映した ID 名とクラス名、またはその他の一般的な名前を常に使用してください。

推奨されない:

.fw-800 {
    
    
    font-weight: 800;
  }
  .red {
    
    
    color: red; 
   }

お勧め：

.heavy {
    
    
   font-weight: 800;
  }
.important {
    
     
  color: red; 
 }

2.3.2 セレクター

1) CSS セレクターでのタグ名の使用を避ける

構造、パフォーマンス、および動作の分離の原則の観点から、CSS では HTML タグはできる限り避けるべきであり、CSS セレクター内のタグ名は潜在的な問題を引き起こす可能性があります。

2) 直接の子セレクターを使用する

多くのフロントエンド開発者は、セレクターチェーンを作成するときに直接の子セレクターを使用しません (注:
直接の子セレクターと子孫セレクターの違い)。これにより、設計に重大な問題が発生する場合や、費用がかかる場合があります。ただし、いずれにせよ、
これは非常に悪い習慣です。DOM の末尾に一致する必要がある非常に一般的なセレクターを作成していない場合は、常に直接の子セレクターを考慮する必要があります。

推奨されない:

.content .title {
    
    
   font-size: 2rem;
  }

お勧め：

.content > .title {
    
    
   font-size: 2rem;
 }

2.3.3 省略された属性を使用してみる

推奨されない:

border-top-style: none; 
font-family: palatino, georgia, serif; 
font-size: 100%; line-height: 1.6; 
padding-bottom: 2em; 
padding-left: 1em;
 padding-right: 1em; 
 padding-top: 0;

お勧め：

border-top: 0; 
font: 100%/1.6 palatino, georgia, serif; 
padding: 0 1em 2em;

2.3.4 独自の行にある各セレクターと属性

推奨されない:

button {
    
     
 width: 100px; height: 50px;
 color: #fff;
 background: #00a0e9;
  }

お勧め：

button {
    
    
  width: 100px; 
  height: 50px;
  color: #fff;
  background: #00a0e9; 
}

2.3.5 0以降の単位を省略する

推奨されない:

 div {
    
    
  padding-bottom: 0px; 
  margin: 0em;
 }

お勧め：

div {
    
    
    padding-bottom: 0; 
    margin: 0; 
}

2.3.6 グローバルスタイルの汚染を防ぐために、ID セレクターとグローバルラベルセレクターの使用を避ける

推奨されない:

#header {
    
    
 padding-bottom: 0px; 
 margin: 0em;
}

お勧め：

.header {
    
     
 padding-bottom: 0px; 
 margin: 0em; 
}

2.4 JavaScriptの仕様

2.4.1 命名

上記の1.1.6 JavaScript ファイル名を参照してください。

2.4.2 コード形式

2.4.2.1 インデントに 2 つのスペースを使用する

お勧め：

if (x < y) {
    
    
  x += 10;
} else {
    
    
  x += 1; 
}

2.4.2.2 読みやすさを向上させるために、異なるロジック、異なるセマンティクス、および異なるビジネスコードの間に空白行を挿入して区切ります。

注: いずれの場合も、区切るために複数の空白行を挿入する必要はありません。

2.4.3 文字列

二重引用符 (") ではなく一重引用符 (') を一律に使用します。これは、HTML 文字列を作成するときに非常に有益です。
推奨:

 let str = 'foo';
 let testDiv = '<div id="test"></div>';

推奨されない:

let str = 'foo'; 
let testDiv = "<div id='test'></div>";

2.4.4 オブジェクト宣言

1) リテラル値を使用してオブジェクトを作成する

お勧め：

 let user = {
    
    };

推奨されない:

 let user = new Object();

2) オブジェクトコンストラクターの代わりにリテラルを使用する

お勧め：

var user = {
    
     age: 0, name: 1, city: 3 };

推奨されない:

var user = new Object(); 
user.age = 0; 
user.name = 0; 
user.city = 0;

2.4.5 ES6+の使用

ES6+ で追加された糖衣構文と関数を最初に使用する必要があります。これにより、プログラムが簡素化され、コードがより柔軟で再利用可能になります。待ってください箭头函数、await/async ，解构， let ， for…of。

2.4.6 括弧

if、else、for、while、do、switch、try、catch、finally、with のキーワードの後には中括弧を続ける必要があります (コードブロックの内容が 1 行のみの場合でも)。

お勧め：

if (condition) {
    
     
   doSomething();
}

推奨されない:

if (condition) doSomething();

2.4.7 undefined 判断

変数を判断するために undefined を直接使用しないでください。変数を判断するには、typeof と文字列 'unknown' を使用してください。
お勧め：

 if (typeof person === 'undefined') {
    
     ... }

推奨されない:

if (person === undefined) {
    
     ... }

2.4.8 条件判定と最大3階層までのループ

三項演算子と論理演算子を使用して条件判定を解決できる場合は、条件判定を使用しないでください。ただし、長すぎる三項演算子を記述しないように注意してください。3層以上ある場合は関数に抽出し、明確なコメントを書いてください。

2.4.9 この変換の命名

コンテキストへの参照には、「self」を使用してのみ名前を付けることができます。

2.4.10 console.log の使用には注意が必要です

console.log を大量に使用するとパフォーマンスの問題が発生するため、Webpack 以外のプロジェクトではログ機能を慎重に使用してください。

アノテーション仕様

コメントの目的:

コードの可読性が向上し、コードの保守性が向上します。

アノテーションの原則:

必要のない場合はコメントを追加しないでください（できるだけ短く）
必要なだけ (必要なだけ)

パブリックコンポーネントの使用手順

API ディレクトリ内のインターフェイス js ファイルはコメント化する必要があります
ストア内の状態、突然変異、アクションなどをコメントする必要があります
vue ファイル内のテンプレートにはコメントを付ける必要があります。ファイルが大きい場合は、開始終了コメントを追加してください。
vue ファイルのメソッド、各メソッドにはコメントを追加する必要があります
vue ファイルのデータ、一般的でない単語はコメントする必要があります

他の

1) DOM を手動で操作しないようにしてください。

vue フレームワークを使用しているため、プロジェクト開発では vue のデータ駆動型更新 DOM を使用するようにし、(最後の手段でない限り) DOM 要素の追加、削除、変更、変更などの DOM を手動で操作しないようにしてください。スタイル、イベントの追加など。

2) 無駄なコードを削除する

git/svn などのコードバージョンツールを使用するため、いくつかのデバッグコンソールステートメントや、役に立たない非推奨の関数コードなど、無駄なコードは適時に削除する必要があります。

拡大

この仕様を策定する際には、私たちのチームの実際の状況を組み合わせることに加えて、いくつかの主要メーカーやオープンソース組織のフロントエンドコード仕様も参考にしました。