客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
这是我在使用大型代码库进行 Vue 项目时开发的最佳实践。这些技巧将帮助您开发更有效的代码，更易于维护和共享。 今年的自由职业生涯中，我有机会从事一些大型Vue应用程序的工作。我所谈论的项目有超过12个Vuex 存储，大量组件（有时数百个）和许多视图（页面）。实际上，这对我来说是非常有意义的经历，因为我发现了许多有趣的模式来使代码可扩展。我还必须修复一些导致著名的意大利面条代码难题的错误做法 因此，今天，我将与您分享10个最佳实践，如果您要处理大量的代码库，我建议您遵循这些最佳实践。 1.使用插槽（slot）使组件更易于理解并且功能更强大有一天，我只需要创建一个弹出窗口。乍一看，没有什么真正复杂的，只是包括标题，描述和一些按钮。所以我要做的就是把所有东西都当作属性。最后，我用了三个属性来定制组件，当人们单击按钮时会发出一个事件。十分简单！:sweat_smile: 但是，随着项目的不断发展，团队要求我们在其中显示许多其他新内容：表单字段，不同的按钮（取决于显示在哪个页面上），卡片，页脚和列表。我发现，如果我继续使用属性来使这个组件不断扩展，似乎也可以。但是上帝，:weary:我错了！该组件很快变得太复杂了，以至于无法理解，因为它包含了无数的子组件，使用了太多的属性并发出了大量事件。:volcano:我经历了一种可怕的情况，当您在某处进行更改时，它最终以某种方式破坏了另一页上的其他内容。我搞了个科学怪人的怪物，而不是一个可维护的组件！ 但是，如果我从一开始就依赖插槽，情况可能会更好。最后，我重构了所有东西以提供这个小组件。易于维护，更快地理解并且可扩展性更高！
<template>
<div class="c-base-popup">
<div v-if="$slots.header" class="c-base-popup__header">
<slot name="header">
</div>
<div v-if="$slots.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="$slots.actions" class="c-base-popup__actions">
<slot name="actions">
</div>
<div v-if="$slots.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>
我的观点是，根据经验，由知道何时使用插槽的开发人员构建的项目确实对其未来的可维护性有很大的影响。这样就可以减少发出事件的次数，使代码更易于理解，并且可以在内部显示所需的任何组件时提供更大的灵活性。 作为一个经验法则，请记住，当最终在子组件的父组件中复制子组件的属性时，应该从这一点开始使用插槽。 2.正确组织您的 Vuex 存储通常，新的
那是他们创建第一个 问题是创建模块时没有单一模式可以遵循。但是我强烈建议您考虑如何组织它们。据我了解，大多数开发人员都喜欢按功能组织它们。例如：
就我而言，我发现根据它们从API提取的数据模型来组织它们时更容易理解。例如：
您选择哪一个取决于您。唯一要记住的是，从长远来看，组织良好的 3.使用操作（Vuex Actions）进行 API 调用和提交数据我的大多数API调用（如果不是全部）都在我的 仅仅因为它们中的大多数都提取了我需要在存储（
译注： 4.使用 mapState，mapGetters，mapMutations 和 mapAction 简化代码库当您只需要访问
// 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"])
}
};
5.使用 API 工厂我通常喜欢创建一个 api ├── auth.js ├── notifications.js └── teams.js 每个节点都将其类别的所有端点分组。这是我在
// 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 我喜欢通过
// 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.遵循一个约定来写提交注释随着项目的发展，您将需要定期浏览组件的提交历史记录。如果您的团队没有遵循相同的约定来书写他们的提交说明，那么将很难理解每个团队成员的行为。 我总是使用并推荐 遵循这些准则会导致更具可读性的消息，从而在查看项目历史记录时更易于跟踪提交。简而言之，这是它的工作方式： 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" 看看他们的 8.始终在生产项目时冻结软件包的版本我知道...所有软件包都应遵循语义版本控制规则。但实际情况是，其中一些并非如此。:sweat_smile: 为避免因您的一个依赖项在半夜醒来破坏了整个项目，锁定所有软件包的版本会使您的早晨工作压力减轻。:innocent: 它的意思很简单：避免使用以 ^ 开头的版本：
{
"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 虚拟滚动条当您需要在给定页面中显示很多行或需要循环访问大量数据时，您可能已经注意到该页面的呈现速度很快。要解决此问题，可以使用 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.跟踪第三方程序包的大小当很多人在同一个项目中工作时，如果没有人关注它们，那么已安装软件包的数量会迅速增加，令人难以置信。为了避免您的应用程序变慢（尤其是在移动网络变慢的情况下），我在 例如，在最近的项目中，导入了整个 lodash 库（压缩后大约24kB）。问题在于，项目里仅仅使用 npm remove lodash npm install lodash.clonedeep 然后可以在需要的地方导入clonedeep函数： import cloneDeep from "lodash.clonedeep"; 的JavaScript
到此这篇关于建立和维护大型 Vue.js 项目的 10 个最佳实践的文章就介绍到这了,更多相关建立和维护 Vue.js 项目实践内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！ |
请发表评论