vue项目前端架构设计

为更好地实施我们的业务需求，需要一些规则或思考来帮助我们设计架构我们的前端工程,本文将以Vue项目为例，讨论如何设计与实施我们的项目架构，来满足版本的迭代、更新.

组件

组件：一个个的可复用单元，单页面程序的组件跟传统的UI组件稍有不同，不仅仅包含了样式，也包含了容器元素。可以泛化组件，抽取出一些参数，根据参数来渲染为不同的视图。

全局组件

一次注册，遍地使用，方便。适用于高频使用的组件，会增加性能开销。

局部组件

使用一次注册一次，适用于低频使用的组件，节省性能。

代码结构

• components global
• local

const globalCompoes = require.context(
// 其组件目录的相对路径
'./components/global',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式
/[a-zA-Z]+\-[a-zA-Z]+\.vue$/
)
//遍历并注册全局组件
globalCompoes .keys().forEach(fileName => {
// 获取组件配置
// ./article-button.vue
const componentConfig = requireComponent(fileName)
//去除文件名中的 './'和'.vue'字符
const componentName = fileName.replace(/\.\/|\.vue/g,'')
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})

组件间的通讯

将视图分为一个个的组件，增强复用性的同时也造成了彼此状态的隔离，用户看到的是一个页面，页面里的一个个组件之间沟通交流是无法避免的事实—需要通讯。我们将之分为父子组件间的通讯和非父子间通讯。

父子组件通讯

• 父组件props 值 到子组件，子组件监听props值的变化，来调整视图。
• 子组件的变化通过 emit 事件的形式通知到父组件，父组件通过监听子组件的emit事件来知晓变化。

非父子组件间的通讯

我们使用状态管理模式 vuex,来管理组件之间状态的共享。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
}
const mutations = {
}
const getters = {
}
const actions = {
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
//main.js
import store from './store.js'
new Vue({
el: '#app',
router,
store,
})

• 公共state,或者基层state,被组件强烈依赖的状态：验证状态、登录状态、用户名、用户权限…这些状态有个共同点：

  需要一次初始化。其他组件依赖于这些状态，而且非数据性状态

  .数据性状态形如：

  群列表、文章列表

  。
• 啥时候用到actions？当我们需要初始化一些状态的时候，比如

  公共state

  ,我们将具体的api请求写到actions里,在根节点dispath对应的action.

  写入store,并写入sessionStorage（防止页面刷新 store丢失）

• 数据状态则不要结合actions,会带来代码冗余。
• 如果对响应式要求没那么高，使用sessionStorage或者localStorage也未尝不可。

UI部分

样式与容器，构成了视图。我们所谓地UI指UI视图

组件是否包含布局？

答案时肯定的，如果我们讲布局放在了组件之外，那么请问，组件所有的导向能否保持一致和统一，如果不能，那么组件就是存在特定布局的，那么既然存在这特定的布局，为何我们还拘泥与脱离布局包装。
所以布局必须在组件内组织。模块化style是有必要的（scoped标识）。

组件的UI设计与组织

因此，我们有必要通过sass预处理语言来组织我们的UI结构

• .component

• &.layout

  ,组件布局，如需细分则设置

  .layout_simple

  、

  layout_specific

  等等

• &.interface

  ,组件外观，如需细分则设置

  .interface_lala

  等

  .childA

  子标签

  &.layout

  布局
• 外观

这样我们就讲组件的布局与外观分离，更方便维护了，虽然增加了适当的冗余，但是恰到好处，结构清晰，也好扩展。