构建Vue大型应用的10个最佳实践(小结)

网络编程 2024/11/16 佚名

3 1 2

这些是我构建大型Vue项目得出的最佳实践，这些技巧将帮助你更高效的编码，并且使其更容易维护和协作。

在我今年的自由职业生涯中我有幸开发了一些大型Vue程序。我所说的这些项目使用了大量Vuex stores "color: #ff0000">1. 使用Slots可以使你的组件更强大和便于理解。

最近我写了一篇文章some important things you need to know regarding slots in Vue.js。主要讲了为什么使用Slots可以提高组件复用且易于维护。

但是这和大型Vue项目有啥关系呢。我将描绘一个使用他们解决你痛点的蓝图。

假如我要开发一个popup。起初看起来没有什么难点，仅仅是包括标题，描述和一些按钮。所以把所有东西都当作props不就完了吗。我用了三个自定义props，并且click按钮的时候触发一个事件。就是这么简单！ "htmlcode">

<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>

根据经验在我看来，由熟练使用slots的开发人员构建项目对将来项目的可维护性有更重要的意义。

"color: #ff0000">2.好好组织的你Vuex store

通常，一个新的Vue开发人员学习Vuex是因为两个问题：

当一个组件需要重一个比较远的组件（嵌套层级或者兄弟组件：译者注）访问数据时。
需要持有一个销毁组件的数据时。

这样他创建第一个Vuex store，学习moudles的用法并且组织程序时。"color: #ff0000">3.用Actions调用api和提交数据。

我的大部分（不是全部）API调用都在Vuex的actions中，你一定想知道为什么这样做。"color: #ff0000">4.使用mapState、mapGetters、mapMutations和mapAction精简代码。

当你在组件中访问state/getters或者调用actions/mutations时通常需要创建多个计算属性。使用mapState，mapGetters，mapMutations和mapActions可以将来自store modules中的数据集中在一个地方，这样可以精简代码并且更好理解。

// 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"])
 }
};

你想要的这里都有Vuex官方文档。

5. 快使用API Factories

我通常会创建this.$api助手，可以在任何地方访问我的API入口。我的项目根目录有一个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.$config获取，尤其是当我在模板中时。一如既往扩展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.遵守一个commit命名规则。

在项目发展的过程中，经常需要关注组件的变更历史。如果团队中有人没有遵守commit惯例，那么将很难理解他们所做的事情。

我总是使用并推荐Angular commit message guidelines。我所有的项目中都会使用他，通常团队中的其他人也会发现他的好处。

遵守这些规则使commit更加可读，在查看项目历史时使得commit更加容易追踪。简言之，他是这样用的：

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"

看他们的README file更新更多。

8.始终在生产环境中冻结Package的版本。

我知道...所有软件包都应遵循 the semantic versioning rules.。但实际情况并非如此。"htmlcode">

{
 "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元素，以使其尽可能高效。如此简单就像一个魔法！ "htmlcode">

<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中使用import cost package这样就可以编辑器中看到导入的包有多大，并且找出大的原因。

例如在最近的项目中，导入了整个lodash库（压缩后24kB）。有啥子问题？仅仅使用cloneDeep方法。通过import cost package找到了问题，我们通过以下方式解决了该问题：

npm remove lodash
npm install lodash.clonedeep

在使用的地方导入：

import cloneDeep from "lodash.clonedeep";

为了进一步优化，我们还可以使用Webpack Bundle Analyzer包通过树状图来可视化Webpack输出文件的大小。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Vue构建应用,Vue构建大型应用

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“构建Vue大型应用的10个最佳实践(小结)”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

构建Vue大型应用的10个最佳实践(小结)

ElementUI多个子组件表单的校验管理实现

Node配合WebSocket做多文件下载以及进度回传

评论“构建Vue大型应用的10个最佳实践(小结)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

构建Vue大型应用的10个最佳实践(小结)

ElementUI多个子组件表单的校验管理实现

Node配合WebSocket做多文件下载以及进度回传

评论“构建Vue大型应用的10个最佳实践(小结)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存