博客更新地址啦~,欢迎访问:https://jerryyuanj.github.io/blog

使用vue一年多了,做了一个javaee的项目(全栈,前端使用的mvvm框架vue),三个移动端项目,其中两个钉钉子应用(钉钉的坑很多,心累),一个微信的(ing)。自己也慢慢摸索出一些项目中的最佳实践,整理了一下,做个记录一起交流。如果你在阅读过程中,觉得我某些地方做的不对或者有更好的方法时,欢迎交流~

项目结构

清晰的目录结构不仅可以展现一个团队的水平,而且别人维护(接锅)的时候,也能更好的理解你的项目。这个每个团队都有自己的标准或者风格,没有固定的格式。我一般是这么安排的(vue-cli项目),下面是src目录:

—— src
  |—— assets // 项目资源目录
	  |—— styles // 样式文件
		  |—— reset.scss // reset css,会在 /src/main.js 中被导入
		  |—— variables.scss // 项目中的变量,混合(mixin)等公有样式变量
		  |—— ...
	  |—— images // 图片
	  |—— fonts // 字体
	  |—— ...
  |—— components // 组件目录
	  |—— layout // 布局相关组件
		  |—— Header.vue // 头部
		  |—— BottomMenu.vue // 底部菜单
		  |—— ...
	  |—— common // 公有组件
	  |—— base // 基础组件
	  |—— ...
  |—— pages // 页面目录
	  |—— user // 用户相关页面
		  |—— Login.vue // 登录页面
		  |—— Register.vue // 注册页面
		  |—— Info.vue // 详情页面
	  |—— order // 订单相关页面
		  |—— List.vue // 订单列表
		  |—— Detail.vue //订单详情
		  |—— ...
	  |—— Home.vue // 主页
	  |—— ...
  |—— router // 路由
	  |—— modules // 存放各个模块的路由
		  |—— user.js // 用户模块
		  |—— order.js // 订单模块
	  |—— index.js // 路由主js,整合各个模块,并且还会定义一些全局钩子等其他
  |—— store // 全局状态管理目录
	  |—— mutation-types.js // mutation types
	  |—— index.js // 主js,整合各个模块的
	  |—— actions.js // actions
	  |—— modules // 各个模块的states
		  |—— user.js
		  |—— order.js
  |—— common // 全局工具方法
	  |—— data-format.js // 数据转换
	  |—— http.js // 网络请求
	  |—— ...
  |—— App.vue
  |—— main.js
  |—— init-plugins.js // 依赖的第三方的初始化,会在main.js中引入

以上只是我个人的习惯,不过这个结构要根据具体的项目情况调整。不必为了模块化而模块化。如果你的项目业务逻辑不复杂,整个项目也就十几个页面,可以适当的删减部分模块。

组件

你的项目可能需要一些这样的组件,来提升用户体验。

  • no-data-found

    这个存在的场景是,比如你加载数据列表或者筛选列表查询等数据操作,如果请求成功但是没有数据,这时候有必要提供一个no-data-found的组件。

  • error

当你的应用出错的时候,比如网络超时加载不了数据,也可以给一个组件做提示

方法抽取

在开始我们项目之前,我们应该知道,有哪些方法是必要的、共有的,类似于我们的工具方法一样。这里我罗列一些供参考:

网络请求
  • 项目可能用到几种请求?(POST,GET,PUT,DELETE…)
    对于不同的请求,我们的请求头也需要改变,是抽取成四个方法,还是在一个方法上变异?
    哪种更适合现在的业务场景?
  • 请求出错如何处理(组件内捕获?全部捕获?其他?…)
    为什么提出这个问题呢?因为这是我前不久我的leader给我提的优化方案。之前的项目都没在意过这个,后来是把axios包了一层,使用了类似jQuery的请求方式,实现了组件内捕获业务场景错误(校验失败之类的),全部捕获请求错误(404,500,400等)。
数据转换
  • 日期格式转换
  • 日期与字符串转换

关于日期都所有操作,建议采用momentJs。功能强大而且兼容性好,我深深的记得之前一个钉钉项目中日期操作不兼容iphone手机的时候,那个bug让我找了半天才找到根源。
官网传送门:http://momentjs.cn/

  • 数字与字符串转换
交互方法

你的应用应该包含一套用于提示用户的组件:
Toast
用于提示用户一些信息
Confirm
用户提示用户是否确认接下来的操作。对于一些重要的操作,比如提交表单,删除信息等操作,务必使用。
Loading
当用户在上传或者下载图片等其他资源的时候,用于提示进度信息。当然这个请求方法要能够获得到相应的进度信息才行,伪造须谨慎(手动斜眼笑)。
Spinner
加载数据时的提示,俗称“菊花图“

mint-ui:http://mint-ui.github.io/docs/#/
vux:https://doc.vux.li/zh-CN/

这里要说的是,你可以对这些方法进行二次封装,以便更方便的使用。包装后,可能就可以像下面这样使用了:

Dialog.toast('cool')
Dialog.confirm('Are you sure?',()=>{Dialog.toast('confirm')})
Dialog.spinner('loading...')

如何管理css

该分离还是该合并

我们知道vue的SFC(单文件组件,即以.vue结尾的文件),提供了三个基础的顶级标签:<template>, <style>,<script>。我个人比较喜欢把样式也写进SFC中,因为这样针对性很强,调试某个页面样式的时候,只要打开一个文件就行了。(这么说是因为我一开始是隔离所有的css文件到assets目录下,这样虽然代码看起来漂亮了,你只要在style标签内import样式就可以了,但是调试的时候非常不方便。)

可以使用全局变量吗

当然,前提是在你使用css预处理器的情况下:
为了系统的UI一致性(consistency),我们的设计稿肯定是一套统一的主题的。所以我们不同页面的边框粗细颜色,按钮背景色,字体大小颜色,一级边框二级边框…,一级标题二级标题…等等众多的样式需要保持一致。如果在每个页面都定义一次,这可行,但是工作量和做法都是不值得提倡的。
有一些loader就是负责处理这类情况的,以sass为例,你可以使用 sass-resources-loader 来完成全局变量的共享。使用方法也很简单:

  • 安装
 npm install sass-resources-loader --save-dev
  • 使用
    如果你使用的vue-cli版本是3之前的话,修改项目中/build/utils.js中的scss成如下:
scss: generateLoaders('sass').concat({
 loader: 'sass-resources-loader',
 options: {
   resources: path.resolve(__dirname, '../src/assets/styles/variables.scss')
 }
})

接下来就可以在任意的组件中使用这个varibles.scss里面的样式了。

reset.css

有的ui框架会修改默认样式,而且不同浏览器的样式标准也有一些不同,所以resetcss很有必要。国内诸如淘宝,百度等都有自己的resetcss,你可以参考这篇博客获得帮助,也可以根据这个自定义自己项目的resetcss。
https://meyerweb.com/eric/tools/css/reset/

<style scoped> with <style>

也许你遇到过这种情况,需要修改某一个ui框架的默认样式,但是在scoped的style块中修改不成功。不得不将style块的scoped属性拿掉,或者将这个要改变的样式放进全局样式里再在main.js中导入,或者直接将样式定义在App.vue里面。这些都是可行的,但是要注意命名空间要是正确的,不然是找不到样式的。
这里提供另一种方法。其实在vue的SFC中,是允许多个style块的。你可以像下面这样使用:

<style scoped lang="scss">
	.order-detail {
		// put your local style here
	}
</style>
<style>
	.mint-button{
		// put your global style here if you want to change the lib's style
	}
</style>

善用vue-router的meta

可能很多人用vue-router的时候,只是用来做路由跳转,配置路由的时候,添加一个path和component就完事了。如果这样能满足你的所有需求,那也ok。但是有一些业务场景,使用meta属性可以非常巧妙的解决问题。
这里分享一下我使用过的例子:

title

想要动态的显示应用/系统的标题,你会怎么做呢?
你可能会在每一个页面的钩子中给document.title赋值,但是有更简单的方法,比如我定义一个下面的router:

{
  name:'user-detail',
  path:'/user-detail',
  component: UserDetail,
  meta: {
   title: '用户信息'
 }
},

接着在App.vue里面,添加下面的代码:

watch:{
  '$route':function(to, from){
    document.title = to.meta.title
  }
}

这样每次定义router的时候,只要填写了meta属性,系统的title就会跟着改变了。
另外,在App.vue里面watch的$route,还有很多用处,比如处理前进后退的动画等。

keepAlive

我们知道vue提供了一个<keep-alive> 组件,用户缓存组件以获得更快的交互。简单介绍一下,当设置某一页面为keep-alive的时候,它的mounted只会在第一次加载的时候执行一次,后面在打开该页面的时候都不会执行。但是activateddeactivated两个钩子可以捕获页面进入和退出的动作。
根据不同的业务逻辑,有些页面需要缓存有些页面不需要缓存,所以我们也可以定义在router中:

{
  name:'user-detail',
  path:'/user-detail',
  component: UserDetail,
  meta: {
   title: '用户信息',
   keepAlive: true
 }
},

然后修改主路由入口的代码(App.vue)

<template v-if="$route.meta.keepAlive">
  <keep-alive>
    <router-view/>
  </keep-alive>
</template>
<template v-else>
  <router-view/>
</template>

这样你就可以根据自己的需要,决定哪些页面需要缓存了。
关于<keep-alive> 组件的更多用法,参考:https://cn.vuejs.org/v2/api/#keep-alive

scrollToTop

我们知道,vue-router提供了页面的滚动行为。vue-router的滚动行为
我们也可以在路由中配置该属性,来细粒度的控制我们页面的滚动行为。

scrollBehavior方法,摘自官网例子 。我给注释翻译了一下。
https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js

// - 只在支持html5 history 模式的浏览器中有效
// - 默认无滚动行为
// - 返回false的话,会阻止滚动行为
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    // savedPosition 只在popstate的导航中有效
    // popstate:https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
    return savedPosition
  } else {
    const position = {}
    // 通过返回选择器来滚动到锚点位置
    if (to.hash) {
      position.selector = to.hash
    }
    // 检查路由元数据(meta)配置中是否是返回顶部的需求
    if (to.matched.some(m => m.meta.scrollToTop)) {
     // 设置滚动位置的x和y坐标:顶部
      position.x = 0
      position.y = 0
    }
    // 如果返回的位置是假值(falsy)或者是空对象,将会返回当前滚动的位置
    return position
  }
}

OK,今天就说这么多,还有一些,比如异常处理,vuex使用场景,一致性(consistency)等,下次有机会在写一篇,今天头有点痛,得睡觉了。

有一些实践我已经用到这个项目https://github.com/JerryYuanJ/a-vue-app-template中了,但是由于这个项目写的时间比较早,而且主要是为了熟悉vue和其他一些练习为主,那时候还不懂事,所以很多地方还是得改的,如果你需要拿项目来练手上面的一些实践的话,这会是个不错的选择。你可以pull requeset,我会merge的~欢迎star

Logo

前往低代码交流专区

更多推荐