vue项目最佳实践

使用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结尾的文件)，提供了三个基础的顶级标签：