用webpack + vue 模仿cnode社区做的移动端的App ^-^

先上地址

github: https://github.com/153913232a/webpack-vue（求大佬们点颗星星）

vue学了也有一段时间了，所以想着做点东西，刚好cnode社区提供了比较完善的api，花了一个星期的时间做了一个移动端的社区，样式参考的是http://react-china.org/t/webpack-react-react-router-redux-less-flex-css-es6-react-cnode/6332 这位大佬，他用的是react，写得很6，有时间可以详细看一下。

总结：

1.使用了flex.css模块布局，最大的感觉就是在写css不需要考虑在css中如何写布局

2.http请求还是有点多，待优化

3.熟悉了async + await的使用, 这东西非常实用不会阻塞同步代码的执行。其实就是await一个promise对象，然后方法外面需要加上async。

4.熟悉了better-scroll的使用，它可以让移动端的h5有android app ListView的那种滑动效果。只要注意一下scroll里面一层要使用absolute定位，要是还是不行，那就是高度计算有问题（比如在v-show=false时就计算了高度，只要refresh一下就Ok了）。

5.熟悉了vuex，浏览器缓存等的使用。在vue组件中通过$store调用，script用this.$store调用，也可以用它的语法糖，通过mapGetters,mapMutations等调用

6.熟悉了vue-router嵌套的使用，这个app里嵌套了两层路由，

7.熟悉了webpack的配置与使用。

8.熟悉了字体图的使用，可以自由的改变样式很方便。

遇到的坑：

1. regeneratorRuntime is not defined

这个错误是我在.vue中使用async await 时报的错，网上说因为没有把.vue中的es6转化为es5，因为async await是es6里的。

解决：安装 babel-polyfill babel-plugin-transform-runtime，然后修改.babelrc里的配置

"plugins": [
    "transform-runtime"
]

2. Cannot read property '_withTask' of undefined

这个可能是click里写了个方法但methods中没定义

3. 关于vue-router遇到的问题

这个我也不知道该怎么描述，就是一个组件通过路由跳到它的子组件时，会有一段卡顿（就是空白页什么都没有，很奇怪），但其实子组件已经创建了，我也不知道为什么，后来我是通过在最外层加一层loading提示框解决这个问题

还有一个关于router.beforeEach的使用

刚开始我是这样写的：

router.beforeEach((to, from, next) => { // 这里做个路由拦截，需要先登录
  if(to.meta.auth) {
    if(storage.get('user')) {
      next()
    } else {
      next({
        path: '/sigin',
        query: {redirect: to.fullPath}
      })
    }
  } 
})

然后路由就gg了。很明显这里的beforeEach会拦截所有的路由，可是这里面只判断了需要验证的路由，所以其他的路由就过不去了。

解决：

改成这样

router.beforeEach((to, from, next) => { // 这里做个路由拦截，需要先登录
  if(to.matched.some(res => res.meta.requireAuth)) { // 遍历所有需要验证的路由，里面可以具体判断
    if(storage.get('user')) {
      next()
    } else {
      next({
        path: '/sigin',
        query: {redirect: to.fullPath}
      })
    }
  } else { // 不需要验证的路由直接通过
    next()
  }
})

4. webpack配置方面的问题

vue-loader版本的问题： 15版本后需要在plugins里加一句new VueLoaderPlugin()

devserver代理问题：

proxy: {
  '/api/*': {
    target: 'https://cnodejs.org',
    pathRewrite: { '^/api': '/api' },
    changeOrigin: true,
    secure: false, // 接受 运行在 https 上的服务
  }
}

这样写是ok的。意思就是/api/v1/topics相对路径代理成https://cnodejs.org/api/v1/api/v1/topics

打包问题：用devserver时是正常的，当我build后放到服务器上时，发现样式全乱了。然后发现组件的样式根本就没有打包到最后的css文件里，自己写的公共样式也没打包进来，只有一些第三方库的样式，比如element-ui，flex.css的，很奇怪。后来根据网上说的，调整了一下main.js里文件的顺序，然后也没什么卵用。最后我是把第三方库的css和自己写的css打包到两个不同的文件里，具体可以看代码里的webpack.config.js这个文件

编译速度问题：我最大的感受可能就是自己配的webpack编译的真的太慢了。。。每次改一下样式或者哪里稍微动一下都要重新编译个几十秒，而我又有点强迫症，所以。。。

5.关于activated生命周期函数的使用

因为最外层加了keep-alive，所以在路由被push back后组件不会被销毁，所以就造成了一个问题：实际中你可能碰到每次路由进一个组件你都想触发created重新获取数据（比如从首页跳到详情页），可以去掉keep-alive,但是对于其他组件效率就不高了。vue提供了一个activated函数，每次路由进来都会触发这个钩子，这样就可以在这个函数里进行数据的获取，这个函数可以说是贯穿我写的组件。。

如果哪里写的有问题希望各位大佬指出！！！

用webpack + vue 模仿cnode社区做的移动端的App ^-^

猜你喜欢