vue.js项目实战,最全vue项目实战
这篇文章边肖想和你分享建立和维护大型Vue.js项目的10个最佳实践。如果你需要朋友，请和边肖一起学习下面这篇文章的具体内容。
:
目录
1.使用slot使组件更容易理解，功能更强大。2.正确整理您的Vuex储物件。3.使用操作(Vuex操作)进行API调用和提交数据。4.使用mapState、mapGetters、MapMutations和mapAction简化基本代码5。使用API factory 6。使用$config访问您的环境变量(在模板中特别有用)7。按照惯例写投稿评论8。在生产项目9时，总是冻结软件包的版本。显示大量数据时使用Vue虚拟滚动条10。跟踪第三方包的大小。这是我在为Vue项目使用大型代码库时开发的最佳实践。这些技巧将帮助您开发更有效的代码，更易于维护和共享。
在我今年的自由职业生涯中，我有机会参与一些大型Vue应用程序。我说的这个项目有超过12个Vuex商店，大量的组件(有时有数百个)和许多视图(页面)。事实上，这对我来说是一次非常有意义的经历，因为我发现了许多有趣的模式来使代码可扩展。我还必须修复一些导致著名的意大利面条代码难题的错误。
因此，今天，我将与您分享10个最佳实践，如果您必须处理大量代码库，我建议您遵循这些实践。
1.使用插槽（slot）使组件更易于理解并且功能更强大
有一天，我只需要创建一个弹出窗口。乍一看，没有什么真正复杂的，只是包括标题、描述和一些按钮。所以我要做的就是把一切都当做一个属性。最后，我使用了三个属性来定制组件，当人们单击按钮时，将会发出一个事件。很简单！汗_笑：
然而，随着项目的不断发展，团队要求我们在其中显示许多其他新内容：表单字段、不同的按钮(取决于它们显示在哪个页面上)、卡片、页脚和列表。我发现如果继续用属性让这个组件不断扩展的话，好像是可以的。但是上帝：疲倦：我错了！这个组件很快变得太复杂而难以理解，因为它包含了无数的子组件，使用了太多的属性，并发出了大量的事件。火山：我经历了一个可怕的情况。当你在某个地方做了更改，它最终会以某种方式破坏另一个页面上的其他内容。我做了一个弗兰肯斯坦怪物，而不是一个可维护的组件！
然而，如果我从一开始就依赖插槽，情况可能会更好。最后，我重构了一切来提供这个小部件。易于维护，理解更快，可扩展性更强！
模板
div class=c-base-popup
div v-if= $ slots . header class= c-base-popup _ _ header
插槽名称=header
/div
div v-if= $ slots . subheader class= c-base-popup _ _ subheader
插槽名称=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
插槽名称=“操作”
/div
div v-if= $ slots . footer class= c-base-popup _ _ footer
插槽名称=页脚
/div
/div
/模板
脚本导出默认值{
道具：{
描述：{
类型：字符串，
默认值：空
},
标题：{
类型：字符串，
必填：真
}
}
}/脚本
我的看法是，根据经验，由懂得何时使用插槽的开发人员构建的项目，确实对其未来的可维护性有很大影响。这可以减少发出的事件数量，使代码更容易理解，并在内部显示任何所需的组件时提供更大的灵活性。
作为一条经验法则，请记住，当您最终将子组件的属性复制到其父组件中时，您应该从这一点开始使用插槽。
2.正确组织您的 Vuex 存储
通常，新的Vue.js开发者开始学习Vuex是因为他们偶然发现了以下两个问题：
他们需要从树结构中实际上相距太远的另一个组件访问给定组件的数据，或者
他们需要数据在组件被破坏后继续存在。
那时，他们创建了第一个Vuex商店，了解了模块，并开始在应用程序中进行组织。
问题是在创建模块时没有单一的模式可循。但是我强烈建议你考虑一下如何组织它们。据我所知，大部分开发者喜欢按照功能来组织。例如：
验证码
博客
收件箱
设置
就我而言，我发现按照它们从API中提取的数据模型来组织它们更容易理解。例如：
用户数量
部队
消息内容
小部件
文章
你选择哪一个取决于你自己。唯一需要记住的是，从长远来看，井井有条的Vuex储物件将提高团队的工作效率。这也会让新人在加入你的团队时，更容易把你的想法放在你的代码库周围。
3.使用操作（Vuex Actions）进行 API 调用和提交数据
我的大多数API调用都是在vuex操作中进行的。你可能会疑惑：为什么打这里比较好？
只是因为他们大部分都是提取我在商店(vuex store)需要提交的数据。此外，它们提供了我非常喜欢的封装和可重用性。我这样做还有其他一些原因：
如果我需要在两个不同的地方获得一篇文章的首页(例如博客和首页)，我可以用正确的参数调用适当的调度程序。数据将被提取、提交和返回，除了调度器调用之外没有重复的代码。
如果我需要创建一些逻辑来避免提取第一页，我可以在一个地方完成。除了减少服务器上的负载，我相信它可以在任何地方使用。
我可以在这些操作(vuex操作)中跟踪我的大多数Mixpanel事件，从而使分析代码库非常容易维护。我确实有一些应用程序，其中所有的Mixpanel调用都是在操作中单独进行的。当我不用知道跟踪什么，不跟踪什么，什么时候发的时候，欢喜：这样工作会给我带来多少快乐。
译注：Mixpanel是一家数据跟踪和分析公司，允许开发人员跟踪各种用户行为，如用户查看的页面数量、iPhone应用程序分析、脸书应用程序交互和电子邮件分析。类似Firebase的埋点分析工具。
4.使用 mapState，mapGetters，mapMutations 和 mapAction 简化代码库
当只需要访问一个组件内部的state/getter或者调用action/mutation时，通常不需要创建多个计算属性或者方法。使用mapState、mapGetters、mapMutations和mapActions可以帮助您缩短代码，通过分组简化复杂性，并从内存中的一个位置掌握全局。
//NPM
从“vuex”导入{ mapState，mapGetters，mapActions，map mutations }；
导出默认值{
计算值：{
//访问根属性
.mapState(my_module ，[property])，
//访问getters
.mapGetters(my_module ，[property])，
//访问非根属性
.mapState(my_module ，{
property:state=state . object . nested . property
})
},
方法：{
//访问操作
.mapActions(my_module ，[myAction])，
//访问突变
.mapMutations(my_module ，[myMutation])
}
};
你需要的关于这些便利助手的所有信息都在Vuex官方文档中提供。
5.使用 API 工厂
我通常喜欢创建一个助手。可以在任何地方调用$api来获取api端点。在项目的根目录中，我有一个包含所有类的api的文件夹(见下面的一个)。
美国石油学会(American Petroleum Institute)
认证
通知
团队
每个节点对其类别的所有端点进行分组。这就是我如何在Nuxt应用程序中使用插件来初始化这个模式(这与标准Vue应用程序中的过程非常相似)。
//项目：API
从“@/api/auth”导入Auth；
从“@/api/teams”导入团队；
从" @/API/通知"导入通知；
导出默认值（上下文，注入)={
if (process.client) {
const token=本地存储。getitem( token )；
//定义时设置标记
if (token) {
语境. axios.setToken(token， Bearer )；
}
}
//初始化应用程序接口储存库
常量存储库={
认证：认证(上下文$axios)，
团队：团队（上下文$axios)，
通知：通知（上下文$axios)
};
注入(“api”，存储库);
};
导出默认$axios=({
forgotPassword(电子邮件){
返回$axios .$post(/auth/password/forgot ，{ email })；
},
登录（电子邮件、密码){
返回$axios .$post(/auth/login ，{ email，password })；
},
注销(){
返回$axios .$ get(/auth/logout )；
},
寄存器（有效负载){
返回$axios .$post(/auth/register ，有效负载);
}
});
现在，我可以简单地在我的组件或状态管理操作中调用它们，如下所示：
导出默认值{
方法：{
onSubmit() {
尝试{
这个. api.auth.login(this.email，this。密码)；
} catch(错误){
控制台.错误(错误);
}
}
}
};
6.使用 $config 访问您的环境变量（在模板中特别有用）
您的项目可能在某些文件中定义了一些全局配置变量：
配置
发展
生产网
我喜欢通过这个. config助手快速访问它们，尤其是当我在模板中时。与往常一样，扩展Vue对象非常容易：
//NPM
从“Vue”导入Vue
//项目：公共资源
从" @/config/development.json "导入开发；
从" @/config/production.json "导入生产；
如果(过程。环境。node _ ENV===生产){
vue。原型。$ config=object。冻结(生产);
}否则{
vue。原型。$ config=object。冻结(开发);
}
7.遵循一个约定来写提交注释
随着项目的发展，您将需要定期浏览组件的提交历史记录。如果您的团队没有遵循相同的约定来书写他们的提交说明，那么将很难理解每个团队成员的行为。
我总是使用并推荐角度提交消息准则。在我从事的每个项目中，我都会遵循它，在许多情况下，其他团队成员也会很快发现遵循它也更好。
遵循这些准则会导致更具可读性的消息，从而在查看项目历史记录时更易于跟踪提交。简而言之，这是它的工作方式：
git commit -am 类型（范围):主题
#这里有一些样品
git commit -am docs(变更日志):将变更日志更新到5
git commit -am 修复(发布):需要依赖最新的rxjs和zone.js
看看他们的自述文件文件以了解更多约定。
8.始终在生产项目时冻结软件包的版本
我知道.所有软件包都应遵循语义版本控制规则。但实际情况是，其中一些并非如此。汗_笑：
为避免因您的一个依赖项在半夜醒来破坏了整个项目，锁定所有软件包的版本会使您的早晨工作压力减轻。无辜：
它的意思很简单：避免使用以 ^ 开头的版本：
{
名称:我的项目，
版本: 1.0.0 ,
私有:对，
依赖项:{
axios: 0.19.0 ，
8.0.0 ,
imagemin-pngquant: 8.0.0 ，
imagemin-svgo: 7.0.0 ，
nuxt: 2.8.1 ，
},
devDependencies: {
自动修复程序: 9.6.1 ,
巴别塔-埃斯林特: 10.0.2 ,
eslint: 6.1.0 ，
埃斯林特友好格式化程序: 4.0.1 ,
eslint-loader: 2.2.1 ，
eslint-plugin-vue: 5.2.3
}
}
9.显示大量数据时使用 Vue 虚拟滚动条
当您需要在给定页面中显示很多行或需要循环访问大量数据时，您可能已经注意到该页面的呈现速度很快。要解决此问题，可以使用虚拟学校。
新公共管理安装vue-虚拟滚动条
它将仅渲染列表中的可见项，并重用组件和数字正射影像图元素，以使其尽可能高效。它真的很容易使用，顺滑得很
模板
回收卷轴
滚动器
:items=list
:item-size=32
关键字段=id
虚拟插槽="{ item } "
div class=用户
{{ item.name }}
/div
/RecycleScroller
/模板
10.跟踪第三方程序包的大小
当很多人在同一个项目中工作时，如果没有人关注他们，安装的软件包数量会迅速增加，这是不可思议的。为了避免您的应用程序变慢(尤其是当移动网络变慢时)，我在Visual Studio代码中使用了导入费包。这样我就可以从编辑器中直接看到导入的模块库有多大，可以看到导入的模块库太大时会发生什么。
例如，在最近的一个项目中，整个lodash库(压缩后大约24kB)被导入。问题是项目中只使用了一个方法，cloneDeep。在通过导入费用包发现这个问题后，我们通过以下方式解决了它：
npm删除lodash
npm安装lodash.clonedeep
然后可以在需要的地方导入clonedeep函数：
从“lodash.clonedeep”导入cloneDeep
的JavaScript
为了进一步优化，您还可以使用Webpack Bundle Analyzer软件包，通过交互式可扩展树形图来可视化Webpack输出文件的大小。
这就是关于建立和维护大型Vue.js项目的10个最佳实践的文章。更多关于建立和维护Vue.js项目的实用内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。