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

站长资源 2024/11/27 佚名

10 1538 10

DDR爱好者之家 Design By 杰米

这些是我构建大型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构建大型应用

DDR爱好者之家 Design By 杰米

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

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

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

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

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

更新日志

友情链接