Vue 小项目的最佳实践

项目简介

目前一期只是为App内某个模块资讯模块文章的分享和APP下载，后续还会有更多的功能,为了项目可扩展、可伸缩结合了我以前的实践搭建了此项目项目地址,如果这个简单的项目能给您带来帮助请给小哥哥⭐Star好不好（手动笔芯）。

功能

• 根据分享出来的文章ID获取数据
• 在网页内可以打开或者下载该APP
• 微信平台的特殊处理
  • 微信平台的屏蔽了scheme,文章页面的打开APP的功能需要出浮窗提示去浏览器中打开
  • 下载APP页面在微信中，IOS可以唤起APP Store,安卓则需要提示浮窗

使用技术须知

Vue,VueRouter,Vuex三件套不在多说

Axios

主要用来发起Http请求，想要详细了解具体使用方式和操作指南可以请参考笔者下面的几篇文章
Axios全攻略
Vuex2和Axios的开发
注意：因为Axios使用了Promise,适配低版本浏览器 一定要配合使用es6-promise

Vuex-router-sync

Vuex-router-sync资料
功能：将Router中的 这些数据注入到Store中，方便我们调用。
在此项目中 我用此插件获取URL上的文章ID

Vue-meta

Vue-meta资料
功能：改变网页Head上的一些标签值。
在此项目中，我用此插件改变文章页面上的Title，在浏览器中标题不那么木讷。

Mobi.css

Mobi.css资料
功能：小而精美的手机端CSS布局库
在此项目中，不想用太大的UI框架也不想自己写太多的样式，选择了它。

Vue-infinite-loading

Vue-infinite-loading资料
功能：缓解加载数据时页面空白的尴尬，可自定义loading动画。

关键实现

URL上获取文章ID

和APP的同学商量了我们就用http://xxxx/article/:id的方式去定义分享出去文章地址，页面通过获得URL上的
ID去请求相对应的数据。我是使用Vuex-router-sync直接从Store中获得ID的rootState.route.params.id

// 文件src/modules/action
/** 获取文章信息 */
export const getArticle = ({ rootState, commit }) => {
  return new Promise((resolve, reject) => {
    axios({
      method: 'get',
      url: 'share/news_details',
      params: {
        news_id: rootState.route.params.id
      }
    })
    .then((response) => {
      commit(types.ARTICLE, response.data.data)
      resolve(response)
    })
    .catch((error) => {
      reject(error)
    })
  })
}

Store中获取环境区别

在每个页面进行操作时，我们需要鉴别当前系统是IOS或者安卓，每次通过正则去鉴别UA里的字符串太麻烦，所以我将此放到Store中，方便所有的组件使用

// 文件src/modules/store
const state = {
  system: (/iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) ? 'IOS' : 'Android'),
  article: {},
  isWeixin: (/MicroMessenger/ig).test(navigator.userAgent)
}

合理的处置异常

我们去加载数据时可能会遇到失败的情况，这里需要对页面有一个良好的处理，这里我主要使用Vue-infinite-loading去实现页面上的效果。

_onInfinite () {
  this.getArticle().then(() => {
    // 完成之后loading消失
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
  })
  .catch(() => {
    // 异常之后页面的展示  执行下方slot="no-results"部分
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete')
  })
}

<infinite-loading :on-infinite="_onInfinite" ref="infiniteLoading" spinner="bubbles">
  <span slot="no-results">好像来到了奇怪的地方~</span>
  <span slot="no-more"></span>
</infinite-loading>

keep-alive组件复用

这是一个很能提高页面性能的标签，会将已使用过的不活动的组件缓存起来而不是销毁。在性能不太好的手机上，模版的渲染也是需要一定时间的，我们可以用这个标签将缓存曾经使用过的组件（页面），在此组件激活时刷新里面的数据即可。激活时使用activated这个生命周期

activated

  activated () {
    this.clearArticle() //激活时先清除Store中的数据 因为$InfiniteLoading是根据页面高度来发起请求的
    this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
  }

组件代码的规范

始终基于模块的方式来构建你的 app，每一个子模块只做一件事情。
Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。

我们需要将我们*.vue文件按照一定的结构组织，使得组件便于理解，主要有以下几点比较重要：

• 导出一个清晰、组织有序的组件，使得代码易于阅读和理解。同时也便于标准化。
• 按首字母排序属性，data, computed, watches 和 methods 使得属性便于查找。
• 合理组织，使得组件易于阅读。(name; extends; props, data and computed; components; watch and methods; lifecycle methods, 等.);
• 使用 name 属性。借助于vue devtools可以让你更方便的测试
• 合理的 CSS 结构，如 BEM 或 rscss - 详情?;
• 使用单文件 .vue 文件格式来组件代码

同时配合ESLint将代码写的更加规范和阅读，我这边使用Standard的风格，在VScode中也开启了Standard的验证。
ESLint官网
JavaScript 代码规范-Standard风格
组件规范也可以参考笔者这篇：Vue.js 组件编码规范

最后

看起来此项目简单，实则上用了不少插件去实现需要较强的动手（第三方坑也多，选择一个好的插件得先去github上看看，作者的代码质量），需要保持一定的弹性方便日后的扩展也要避免过度的设计。大家若想要加速自己的开发速度，可以多逛逛Vue awesome上看看大多数都是高质量的插件，其实很多轮子都有人造好了，选取好的直接拿来用岂不妙哉？