这是我在采用小型标识符库展开 Vue 工程项目时合作开发的最差课堂教学。这些技巧将帮助您合作开发更有效的标识符，更更易保护和共享。
今年的自由生涯中，我有机会从事很多小型Vue插件的工作。我所谈论的工程项目有超过12个Vuex 储存，大批组件（有时数十个）和很多快照（网页）。事实上，这对我来说是非常有意义的历经，即使我辨认出了很多有趣的商业模式来使标识符可扩充。我还必须修复很多导致著名的意大利面条标识符难题的女体盛。因此，今天，将与您分享10个最差课堂教学，假如您要处理大批的标识符库，我Jarnisy遵从这些最差课堂教学。1.采用连接埠（slot）使组件更更易认知因此机能更强大我最近写了一篇该文，介绍有关Vue.js中的连接埠您须要介绍的一些重要事项。它着重说明连接埠怎样使您的组件更可重用且更更易保护，以及为什么要采用它。但，这与小型Vue.js工程项目有什么关系？一图胜聪悟，所以我将为您画一张图片，这是我第一次后悔不采用它。有一天，我只须要建立两个弹出窗口。貌似，没有什么真正繁杂的，只是包括标题，描述和很多按键。所以我要做的就是把大部份小东西都当作特性。最后，布季谢了三个特性来定制组件，当人们空格键按键时会收到两个该事件。十分简单！但，随着工程项目的急速发展，工程项目组要求我们在其中表明很多其他新文本：表单词段，不同的按键（依赖于表明在哪个网页上），卡牌，页脚和列表。我辨认出，假如我继续采用特性来使这个组件急速扩充，似乎也能。但上帝，我错了！该组件很快变得太繁杂了，以至于无法认知，即使它包含了无数的子组件，采用了太多的特性并收到了大批该事件。我历经了一种可怕的情况，当您在藏匿处展开更改时，它最后以某种方式破坏了另一页上的其他文本。我丫科学小飞侠的怪物，而不是两个可保护的组件！但，假如我从一已经开始就依赖连接埠，情况可能会更好。最后，我解构了大部份小东西以提供这个小组件。更易保护，更快地认知因此可扩充性更高！
{{ title }}
{{ description }}我的观点是，根据经验，由知道何时采用连接埠的合作开发者构建的工程项目确实对其未来的可保护性有很大的影响。这样就能减少收到该事件的次数，使标识符更更易认知，因此能在内部表明所需的任何组件时提供更大的灵活性。作为两个经验法则，请读懂，当最后在子组件的父组件中关键步骤组件的特性时，应该从对已经开始采用连接埠。2.正确组织机构您的 Vuex 储存通常，捷伊 Vue.js 合作开发者已经开始学习 Vuex，因为她们偶然辨认出了以下两个问题：她们或者须要从genomes中事实上相距太远的另两个组件访问给定组件的统计数据，或者她们须要统计数据在组件销毁后继续存在。那是她们建立第两个 Vuex 储存，介绍组件并已经开始在插件中进行组织机构的时候。问题是建立组件时没有单一商业模式能遵从。但，我雷西县您考虑怎样组织机构它。据我介绍，绝大多数合作开发者都喜欢按机能组织机构它。比如：接收者博客电话簿设定就我而言，我辨认出根据它从API提取的数据模型来组织机构它时更容易认知。比如：用户数量队伍留言文本小部件该文您选择哪两个依赖于您。唯一要读懂的是，从长远来看，组织机构良好的 Vuex 储存将使工程项目组更具生产力。这也将使萨德基更容易在加入您的工程项目组时就将您的想法围绕您的标识符库。3.采用操作方式（Vuex Actions）展开 API 初始化和提交统计数据我的绝大多数API初始化（假如不是全部）都在我的 Vuex 操作方式（vuex actions）中展开。您可能想知道：为什么这里初始化更好？仅仅即使它中的绝大多数都提取了我须要在储存（vuex store）中提交的统计数据。此外，它提供了我真正喜欢的封装性和可重用性。我这样做还有其他很多原因：假如我须要在两个不同的地方方展开。除了减少服务器上的负载之外，我还有信心它能在任何地方采用。我能在这些操作方式(vuex actions)中跟踪我的绝大多数 Mixpanel 该事件，从而使分析标识符库真正更易保护。我确实有很多应用程序，其中大部份 Mixpanel 初始化都是在操作方式中单独展开的。当我不必介绍跟踪什么不跟踪什么以及何时发送时，这种方式工作会给我带来有多大的快乐。译注：Mixpanel 是一家统计数据跟踪和分析公司，允许开发者跟踪各种用户行为，比如用户浏览的网页数，iPhone 应用分析，Facebook 应用互动情况，以及 Email 分析。类似Firebase一样的埋点分析工具。4.采用 mapState，mapGetters，mapMutations 和 mapAction 简化标识符库当您只须要访问state/getter或在组件内部初始化action/mutation时，通常无需建立多个计算特性或方法。采用mapState，mapGetters，mapMutations和mapActions能帮助你缩短你的标识符，通过分组来化繁为简，从你储存里组件两个地方就能掌握全局。// NPMimport { mapState, mapGetters, mapActions, mapMutations } from”vuex”;exportdefault {computed:{// Accessing root properties …mapState(“mymodule”,[“property”]),// Accessing getters …mapGetters(“mymodule”,[“property”]),// Accessing non-root properties …mapState(“mymodule”,{property: state => state.object.nested.property })},methods:{// Accessing actions …mapActions(“mymodule”,[“myAction”]),// Accessing mutations …mapMutations(“mymodule”,[“myMutation”])}}; Vuex官方文档中提供了您在这些便捷帮助器上所需的大部份信息。5.采用 API 工厂我通常喜s teams.js 每个节点都将其类别的大部份端点分组。这是我在 Nuxt 插件中采用插件初始化此商业模式的方式（这与标准 Vue 插件中的过程非常相似）。// PROJECT: APIimport Auth from”@/api/auth”;import Teams from”@/api/teams”;import Notifications from”@/api/notifications”;exportdefault (context, inject)=>{if (process.client){const token = localStorage.getItem(“token”);// Set token when definedif (token){ context.$axios.setToken(token,”Bearer”);} }// Initialize API repositoriesconst repositories ={auth: Auth(context.$axios),teams: Teams(context.$axios),notifications: Notifications(context.$axios)}; inject(“api”, repositories);}; exportdefault $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 操作方式中初始化它，如下所示：exportdefault {methods:{ onSubmit(){try {this.$api.auth.login(this.email, this.password);} catch (error){console.error(error);} }}};6.采用$config 访问您的环境变量（在模板中特别有用）您的工程项目可能在某些文件中定义了很多全局配置变量：config development.json production.json 我喜欢通过this.$config助手快速访问它，尤其是当我在模板中时。与往常一样，扩充Vue对象非常容易：// NPMimport Vue from”vue”;// PROJECT: COMMONSimport development from”@/config/development.json”;import production from”@/config/production.json”;if (process.env.NODEENV ===”production”){ Vue.prototype.$config = Object.freeze(production);} else { Vue.prototype.$config = Object.freeze(development);}7.遵从两个约定来写提交注释随着工程项目的发展，您将须要定期浏览组件的提交历史记录。假如您的工程项目组没有遵从相同的约定来书写她们的提交说明，那么将很难认知每个工程项目组成员的行为。我总是采用并推荐Angular commit消息准则。在我从事的每个项目中，我都会遵从它，在很多情况下，其他工程项目组成员也会很快辨认出遵从它也更好。遵从这些准则会导致更具可读性的消息，从而在查看工程项目历史记录时更更易跟踪提交。简而言之，这是它的工作方式：git commit -am “():”# Here are some samplesgit commit -am “docs(changelog): update changelog to beta.5″git commit -am “fix(release): need to depend on latest rxjs and zone.js”看看她们的README文件以介绍更多约定。8.始终在生产工程项目时冻结软件包的版本我知道…大部份软件包都应遵从语义版本控制规则。但实际情况是，其中很多并非如此。为避免因您的两个依赖项在半夜醒来破坏了整个工程项目，锁定大部份软件包的版本会使您的早晨工作压力减轻。它的意思很简单：避免使用以^开头的版本：{“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 虚拟滚动条当您须要在给定网页中表明很多行或须要循环访问大批统计数据时，您可能已经注意到该网页的呈现速度很快。要解决此问题，能采用vue-virtual-scoller。npm install vue-virtual-scroller 它将仅渲染列表中的可见项，并重用组件和dom元素，以使其尽可能高效。它真的很容易采用，顺滑得很！{{ item.name }}10.跟踪第三方程序包的大小当很多人在同两个工程项目中工作时，假如没有人关注它，那么已安装软件包的数量会迅速增加，令人难以置信。为了避免您的插件变慢（尤其是在移动网络变慢的情况下），我在Visual Studio Code中采用了导入费用包。这样，我能从编辑器中直接看到导入的组件库有多大，因此能查看导入的组件库过大时出了什么问题。比如，在最近的工程项目中，导入了整个 lodash 库（压缩后大约24kB）。问题在于，工程项目里仅仅采用cloneDeep 两个方法。通过在导入费用包中识别此问题后，我们通过以下方式解决了该问题：npm remove lodashnpm install lodash.clonedeep 然后能在须要的地方导入clonedeep函数：import cloneDeep from”lodash.clonedeep”;为了进一步优化，您还能采用Webpack Bundle Analyzer软件包通过交互式可缩放树状图来可视化Webpack输出文件的大小。处理小型Vue标识符库时，您还有其他最差课堂教学吗？请在下面的评论中告诉我，或者在Twitter @RifkiNada上与我联系。关于作者娜达里基（Nada Rifki）Nada 是一位 JavaScript 合作开发者，他喜欢采用 UI 组件来建立具有出色 UX 的界面。她专门研究 Vue.js，喜欢分享任何能帮助她的前端 Web 合作开发者的小东西。Nada还涉足数字营销，舞蹈和中文领域。作者：Yujiaao来自：https://segmentfault.com/a/1190000040712187译自：https://www.telerik.com/blogs/all-you-need-to-know-about-slots-in-vuejs
– EOF –
