Vueの大型アプリケーションを構築するためのベスト10の実践（結び目）

10553 ワード
Vue ビルド 適用
これらは私が大型Vueプロジェクトを構築して得た一番いい実践です。これらの技術はあなたのより効率的なコード化を助けます。そしてそれを維持して協力しやすくします。
今年のフリーキャリアで大型Vueプログラムを開発しました。これらのプロジェクトはVuex storesをたくさん使っています。😰 ，多くのVueコンポーネント（数百個あります）と多くのビュー（pages）😄。私にとってこれは非常に有意義な経験であり、多くの拡張方法を発見しました。また、めちゃくちゃな使い方を直す必要があります。🍝
ですから、私はベスト10の実践を共有します。もし大型プロジェクトがあるなら、彼らを使うことを勧めます。
1.Slotsを使うと、あなたのコンポーネントがより強く、分かりやすくなります。
最近私は文章を書きました。主に、Slotsを使用すると、コンポーネント多重化が改善され、維持が容易になる理由を説明する。
しかし、これは大型Vueプロジェクトと何の関係がありますか？彼らを使ってあなたの痛いところを解決する青写真を描きます。
もし私がポプラを開発したいなら。最初は難点がないように見えますが、タイトル、説明、ボタンなどが含まれています。だから全てをプロのつもりで終わってしまうのではないですか？私は三つのカスタムpropsを使いました。そして、clickボタンを押す時に一つのイベントをトリガします。こんなに簡単です。😅
事業が継続的に発展するにつれて、フォームフィールド、異なるボタン（どのページに表示されるかによって）、カード、フッター、リストなどの他の多くの新しい内容を表示する必要があります。この問題はより多くのpropsを追加することによって解決できます。😩しかし、業務が発展するにつれて、部品が複雑すぎます。彼は多くのサブコンポーネントを含んでいるので、多くのイベントをトリガする必要があります。🌋私はピットさんの問題に出会いました。機能を修正して他のpageの機能に影響を与えました。私は守るべき部品ではなく怪物を作った。
しかし、最初に使った方がいいかもしれません。最終的にはこのコンポーネントを再構成するための小さいコンポーネントを使用します。彼を維持しやすく、理解しやすく、広げやすいようにします。

<template>
 <div class="c-base-popup">
  <div v-if="$slot.header" class="c-base-popup__header">
   <slot name="header">
  </div>
  <div v-if="$slot.subheader" class="c-base-popup__subheader">
   <slot name="subheader">
  </div>
  <div class="c-base-popup__body">
   <h1>{{ title }}</h1>
   <p v-if="description">{{ description }}</p>
  </div>
  <div v-if="$slot.actions" class="c-base-popup__actions">
   <slot name="actions">
  </div>
  <div v-if="$slot.footer" class="c-base-popup__footer">
   <slot name="footer">
  </div>
 </div>
</template>

<script>
export default {
 props: {
  description: {
   type: String,
   default: null
  },
  title: {
   type: String,
   required: true
  }
 }
}
</script>
経験によって、slaotsを上手に使う開発者がプロジェクトを構築することは将来のプロジェクトのメンテナンス性にとってもっと重要な意義があると思います。
⚠️ 経験的なルールは、サブアセンブリに親コンポーネントのpropsが使用されている場合には、slaotsを使用するべきである。
2.しっかり組織しているあなたのVuex store
通常、新しいVue開発者がVuexを学ぶのは二つの問題のためです。
  • は、コンポーネントがより遠いコンポーネント（入れ子レベルまたは兄弟コンポーネント：訳者注）を必要とするとき、データにアクセスする。
  • 廃棄部品のデータを保持する必要がある場合。
    • このように彼は最初のVuex storeを創建して、moudelesの使い方を学んで、そしてプログラムを組織する時。💡
    問題はmodulesを作成する時に単一モードがないことです。彼らをどうやって組織するかを明確にしたいと強く提案します。私が知っている限りでは、多くの人は機能によって彼らを組織するのが好きです。たとえば:
  • Auth.
  • Blog.
  • Inbox.
  • Settings.
    • 私はAPIから得られたデータモデルで組織するほうが分かりやすいです。例:
  • Users
  • Tems
  • Message
  • Widgets
  • Artcles
    • それを使うのは自分次第ですが、長い目で見れば組織の良いVuex storeのほうが生産力があります。これは新人が溶け込んで、あなたの初心を受け継ぎやすいです。
    3.アクションでアプリを呼び出し、データを提出する。
    ほとんどのAPIの呼び出しはVuexのactionsの中にあります。なぜこのようにしたのかを知りたいです。🤨
    簡単に言うと、データを引き出すにはstoreの中でcomitが必要です。そして彼は私の好きなパッケージと多重化を提供しました。その他の理由は：
  • もし私が二つのところで最初のページのデータを取得したら。異なるパラメータを使って起動すればデータが得られます。初めて以外に重複コードが呼び出されません。
  • データの重複を避けるためにいくつかのロジックを作成する必要がある場合、一箇所で一回だけデータを引く必要があります。サーバーに負担をかける以外に、これらのデータはどこでも使えます。
  • 私はactionsの中で最後のMixpanel事件ができます。メンテナンス性に基づいて問題を分析しやすくします。私のコードの大部分のactionの中ではMixpanelだけが呼び出します。😂データに関心を持たなくてもいいです。このような仕事のやり方はとてもいいです。
    • 4.mapState、mapGetters、mapMuttions、mapActionを使用してコードを簡潔にします。
    コンポーネントの中でstate/gettersにアクセスするか、またはactions/muttionsを呼び出すときは、通常複数の計算属性を作成する必要があります。mapStateを使用して、mapGetters、mapMuttionsおよびmapActionsは、store modulesからのデータを1つの場所に集中することができ、このようにコードを簡潔にし、よりよく理解することができる。
    
// NPM
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
 computed: {
  // Accessing root properties
  ...mapState("my_module", ["property"]),
  // Accessing getters
  ...mapGetters("my_module", ["property"]),
  // Accessing non-root properties
  ...mapState("my_module", {
   property: state => state.object.nested.property
  })
 },

 methods: {
  // Accessing actions
  ...mapActions("my_module", ["myAction"]),
  // Accessing mutations
  ...mapMutations("my_module", ["myMutation"])
 }
};
    あなたが欲しいのはここに全部some impotant things you need to know regarding slaots in Vue.jsがあります。
    5.API Factoresを早く利用してください。
    私は通常thisを作成します。APIの入り口はどこでも訪問できます。私のプロジェクトのルートディレクトリには私のすべての種類があります。
    
api
├── auth.js
├── notifications.js
└── teams.js
    すべては一つのインターフェースのグループです。これはNuxtアプリケーションでプラグインを使用して初期化します。標準Vueアプリケーションのプロセスと非常に似ています）。
    
// PROJECT: API
import Auth from "@/api/auth";
import Teams from "@/api/teams";
import Notifications from "@/api/notifications";

export default (context, inject) => {
 if (process.client) {
  const token = localStorage.getItem("token");
  // Set token when defined
  if (token) {
   context.$axios.setToken(token, "Bearer");
  }
 }
 // Initialize API repositories
 const repositories = {
  auth: Auth(context.$axios),
  teams: Teams(context.$axios),
  notifications: Notifications(context.$axios)
 };
 inject("api", repositories);
};

    
export default $axios => ({
 forgotPassword(email) {
  return $axios.$post("/auth/password/forgot", { email });
 },

 login(email, password) {
  return $axios.$post("/auth/login", { email, password });
 },

 logout() {
  return $axios.$get("/auth/logout");
 },

 register(payload) {
  return $axios.$post("/auth/register", payload);
 }
});
    このように私は簡単にコンポーネントやVuexの操作で彼らを呼び出すことができます。
    
export default {
 methods: {
  onSubmit() {
   try {
    this.$api.auth.login(this.email, this.password);
   } catch (error) {
    console.error(error);
   }
  }
 }
};
    6.$configを使って環境変数にアクセスする（テンプレートでは特に有用）。
    プロジェクトにはグローバル設定変数がいくつか定義されています。
    
config
├── development.json
└── production.json
    私は通常thisを使います。特にテンプレートの中にいる時は。従来通りVueオブジェクトを拡張するのはとても簡単です。
    
// NPM
import Vue from "vue";

// PROJECT: COMMONS
import development from "@/config/development.json";
import production from "@/config/production.json";

if (process.env.NODE_ENV === "production") {
 Vue.prototype.$config = Object.freeze(production);
} else {
 Vue.prototype.$config = Object.freeze(development);
}
    7.comit命名のルールを守る。
    プロジェクトの発展の過程で、コンポーネントの変更の歴史に常に関心を持つ必要があります。comitの慣例を守らない人がいると、彼らのやっていることが分かりにくいです。
    私はいつも使っています。公式文書を勧めています。私はすべてのプロジェクトで彼を使います。通常チームの中の他の人も彼の長所を発見します。
    これらのルールを守ってcomitをもっと読みやすくして、プロジェクトの歴史を見る時にcomitを追跡しやすくします。簡単に言えば、彼はこう使います。
    
git commit -am "<type>(<scope>): <subject>"

# Here are some samples
git commit -am "docs(changelog): update changelog to beta.5"
git commit -am "fix(release): need to depend on latest rxjs and zone.js"
    彼らのアングラーcomit message guide lineの更新を見てください。
    8.常に生産環境においてPackageのバージョンを凍結する。
    知っています。すべてのパッケージはREADME fileに従うべきです。しかし、実際にはそうではない。😅
    依存性を避けるために、プロジェクト全体が夜中に引っ張られ、すべてのプログラムパッケージのバージョンを凍結して、夜明けまで寝て、作業を楽しむことができます。😇
    これは簡単です。^で始まるバージョンは避けてください。
    
{
 "name": "my project",

 "version": "1.0.0",

 "private": true,

 "dependencies": {
  "axios": "0.19.0",
  "imagemin-mozjpeg": "8.0.0",
  "imagemin-pngquant": "8.0.0",
  "imagemin-svgo": "7.0.0",
  "nuxt": "2.8.1",
 },

 "devDependencies": {
  "autoprefixer": "9.6.1",
  "babel-eslint": "10.0.2",
  "eslint": "6.1.0",
  "eslint-friendly-formatter": "4.0.1",
  "eslint-loader": "2.2.1",
  "eslint-plugin-vue": "5.2.3"
 }
}
    9.大きなデータを表示するときは、Vue仮想スクロールバーを使うべきです。
    ページに複数行を表示したり、大量のデータを循環する必要がある場合、このページのレンダリング速度が速く遅くなることに気づきました。この問題を解決するにはthe semantic versioning rulesを使ってもいいです。
    
npm install vue-virtual-scroller
    彼はリスト内の可視項目のみをレンダリングし、コンポーネントとdom要素を多重化して、できるだけ効率的にする。このように簡単です。魔法のようです。✨
    
<template>
 <RecycleScroller
  class="scroller"
  :items="list"
  :item-size="32"
  key-field="id"
  v-slot="{ item }"
 >
  <div class="user">
   {{ item.name }}
  </div>
 </RecycleScroller>
</template>
    10.サードパーティパッケージのサイズを追跡する
    複数の人が一つのプロジェクトに協力する場合、インストールの依存性がないと信じられないほど速くなります。プログラムが遅くならないように（特にモバイルネットワーク環境で）VSCでvue-virtual-scollerを使って、導入されたカバンの大きさをエディタで見られます。大きな原因を見つけます。
    例えば、最近のプロジェクトでは、lodashライブラリ全体（圧縮後24 kB）が導入されています。何か問題がありますかclone Deep方法だけを使用します。import cost packageで問題を見つけました。以下の方法でこの問題を解決しました。
    
npm remove lodash
npm install lodash.clonedeep
    使用する場所にインポート:
    
import cloneDeep from "lodash.clonedeep";
    さらに最適化するために、Webpack Bundele Analyzerパッケージを用いて、ツリーマップを通してWebpack出力ファイルのサイズを可視化することもできます。
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
    台湾中原大学php教程孫仲岳主講
    vue単一選択ボックスのデフォルト選択を実現します。