現在、プロジェクト開発は基本的にチームによって行われており、フロントエンドとバックエンドの分離という現在の開発モデルが採用されています。人が多く、各人のコードスタイルが異なるため、後の人員の退社後に、厄介なプロジェクトとメンテナンスにつながります。また、反復的な開発は致命的であるため、チームは共通の仕様に従う必要があります。統一された仕様により、チームによって作成されたプロジェクトを容易に維持し、数年後に繰り返し開発することができます。
コードスタイルを統一して標準化する必要がある
例：次のコード仕様を見てください。各Vueファイルはマウントされており、その中にメソッドがあるため、コードは次のように記述する必要があります。この変数を保存するために、チーム全体がvmを使用します。これは、コードの可読性を高めるための統一チーム仕様です。なぜこれを保存するのですか？この点は、矢印関数やネストされた関数呼び出しで問題になる可能性があるためです。ページデータ取得チームがマウントして取得するのはもちろん、作成することもできますが、統一された仕様が必要で、全員の初期化データを同じ場所で取得しています。これを将来行う場合、チームのメンバーは他の人が作成したコンポーネントを使用します。彼の初期化ではマウント済みのみが確認され、初期化中に実行されるメソッドが確認されます。
mounted() {
let vm = this;
vm.init(); // 页面初始化的数据都在这个方法里执行
},
methods: {
init() {
let vm = this;
vm.initData(); // 获取页面初始化数据
vm.getDetail(); // 获取页面需要的详细信息
},
// 页面中的方法命名也必须统一，见名知意，不能个性化，统一的命名规范十分方便以后维护以及功能迭代
initData() {
},
getDetail() {
}
}
さらに、すべての開発者のコードの形式を標準化するために、eslintを使用してチームプロジェクトのコードを検証する必要があります。
コードの読みやすさを向上させ、将来のメンテナンスコストを削減するために、必要なメソッド、パラメーター、およびカスタムフラグにコメントを付ける必要があります。
コードは次のとおりです（例）：
data() {
return {
routeFlag: 'add' // add为新增，review为复核，back为打回重新申请，update为更新操作，overdue为过期
}
},
methods: {
// 用户信息提交,type == 1,新增操作，type == 2，变更操作， type == 3，提交到其他系统审核
handeSubmit(type) {
// 过滤用户id信息
peopleArray.filter((item) => {
return item.id == fromData.id;
});
}
}
フレームワークのパブリックリソースのカプセル化と配置
プロジェクトの最初に、使用するテクノロジーと使用するフレームワークを最初に決定し、このフレームワークに基づいて、エンタープライズ開発のニーズを満たすチームのフレームワークをカプセル化する必要があります。例としてvueを取り上げます。srcディレクトリにhttp.jsを構築する必要があります。このファイルは主にaxiosをインポートしてから、リクエストとレスポンスをインターセプトし、共通のリクエストヘッダーを設定してから、リクエストパラメータの統合処理を行います。 axiosベースのget、post、getJson、postJson、およびその他のメソッドをvueインスタンスプロトタイプ（つまり、vue.prototype.get =自己カプセル化関数）にマウントすることをお勧めします。プロジェクトはthis.get getリクエストを直接呼び出すことができます。もちろん、このhttp.jsファイルはmain.jsに導入する必要があります。
次に、srcの下にapiフォルダーを作成する必要があります。一部のサブモジュールフォルダーは、各モジュールに必要なインターフェイスとデータ取得メソッドである地下に構築されます。
srcの下にutilsフォルダーも必要です。このフォルダーには、システムのいくつかの一般的なツールと機能（時刻フォーマット機能、小数点インターセプト、お金の変換、携帯電話のメールボックスフォーマットの検証、オブジェクトのクローニング、その他の一般的なパブリック機能など）が格納されています。ユーザーをページに直接紹介して、n人の開発者がn個の場所にn回のフォーマット関数を作成することを回避できます。
srcの下に構築されたスタイルフォルダーは、システムにいくつかのパブリックスタイルを格納するために使用されます。index.scssがその中に構築され、table.scss（テーブルパブリックスタイル）およびdetail.scss（詳細ページパブリックスタイル）がindex.scssに導入されます。モジュール式の開発のアイデアもあります。
プロジェクトでは、vuexを使用して一部のデータを管理し、対応するモジュールデータをストアに確立し、インデックスで使用するすべてのモジュールを導入します。後でデータが変更されないように、vuexで変異とアクションの大文字の定数を定義することをお勧めします。実際、ユーザーの基本情報やトークン、ユーザーが選択した言語など、vuexの一部のユーザーデータはローカルに永続化する必要があります。これは、データが利用可能になる前にjsファイルのみが実行されているが、ブラウザーが更新されると、ファイルがリロードされるためです。 、vuexのデータが消えるため、vue-persistenceプラグインを使用してデータの永続化を行うことができます。
ルーティングファイルは、非同期読み込みを使用してコンポーネントをインポートし、requireまたはコンポーネントを使用する必要があります：（）=> import（ '@ / views / 404'）、コンポーネント非同期は実際には関数割り当てプロセスであり、現在のコンポーネント、関数のみを実行しますコンポーネントは実行後にのみ導入されます。この方法は、大きなプロジェクトコンポーネントの問題を解決します。すべてのコンポーネントが読み込まれると、1年かかる場合があります（冗談ですが、主な表現は、複数のコンポーネントを同時に読み込むには遅すぎるということです）。ルーティングファイルでは、グローバルルーティングガードは、ログインしていないユーザーの操作に使用されます。コードは次のとおりです。
// 全局路由守卫
router.beforeEach(function (to, from, next) {
if (to.matched.length === 0) {
// 判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
next('/404');
} else {
// 浏览器刷新，vuex中数据消失，从本地缓存拿
// userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}, 这是store中的userInfo获取，看本地是否有，有的话拿本地数据
let token = store.state.userInfo.token;
// meta标签中标记路由是否要登陆 isLogin
if (to.meta.isLogin) {
if (token) {
next();
} else {
next('/login');
}
} else {
next();
}
}
});
ビューフォルダーにレイアウトを記述して、プロジェクトのサイドバー、ナビゲーションバー、メインを初期化します。これにより、要素のレイアウトを直接使用できます。ナビゲーションバーの仕様は次のように記述されます（各ルートはトラバーサルによって取得され、ルーティング配列はユーザーの権限に従って要求できます）ルーティング配列を返す）：
<el-aside class="main_con" style="width:250px;">
<el-menu :default-active="$store.state.treeState" unique-opened @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo" :collapse="isCollapse" router text-color="#fff" background-color="#422c50">
<template v-for="(item,index) in treeData">
<el-submenu :index="item.router" v-if="item.childResource.length>0" :key="index">
<template slot="title">
<i :class="item.icon"></i>
<span v-text="item.resName"></span>
</template>
<template v-for="(child,indx) in item.childResource">
<el-menu-item :index="child.router" v-if="child.childResource.length==0" :key="indx">
<template slot="title">
{
{child.resName}}
</template>
</el-menu-item>
<el-submenu :index="child.router" v-if="child.childResource.length>0" :key="child.resName">
<template slot="title">
{
{child.resName}}
</template>
<el-menu-item :index="child.router" v-for="(child,idx) in child.childResource" :key="idx">
{
{child.resName}}
</el-menu-item>
</el-submenu>
</template>
</el-submenu>
<el-menu-item :index="item.router" v-if="item.childResource.length==0" :key="index">
<i :class="item.icon"></i>
<span slot="title" v-text="item.resName"></span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
data() {
return {
treeData: [{
'icon': 'el-icon-s-home',
'resName': '首页',
'router': '/platformManage/home/home',
'childResource': []}，{
'icon': 'el-icon-tickets',
'resName': '列表',
'router': '/platformManage/list/list',
'childResource': [
{
'icon': 'el-icon-tickets',
'resName': '列表页',
'router': '/platformManage/list/list',
'childResource': []
}, {
'icon': 'el-icon-tickets',
'resName': '预授权码列表',
'router': '/platformManage/applyOut/applyOut',
'childResource': []
}
]
}
]
}
}
コンポーネント開発の目的は、いくつかの複雑な機能を単純化し、機能の反復と簡単なメンテナンスを行うことです
在项目中要合理的利用组件，啥叫合理的利用，就比如有一百个功能的页面，你可以把它分给10个人，每人负责十个，但是如果这是个人又把它细分，每人由原来的十个变成了一百个，这无疑是把工作更复杂化了，所以要合理的利用组件化的思想，别为了使用组件而使用组件!
如果你想成为一名高级前端开发，你得了解webpack是如何打包的，它能识别js模块，打包其他文件你的会配置loder和第三方插件plugins。webpack中引入vender.js是为了让第三方库在打包一次以后就不再打包，因为第三方库的代码一般会去改动，比如Jquery。webpack中引入happypack是为了加快打包速度，让程序可以在一个时刻同时进行多个打包！