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上看看大多数都是高质量的插件，其实不少轮子都有人造好了，选取好的直接拿来用岂不妙哉？