开发分享组件问题总结

分享组件

• better-scroll 与 v-show / v-if

  问题描述：使用v-show，better-scroll不起作用的问题
  原理及解决方案：由于better-scroll初始化的要求，如若使用v-show，将可能会出现滑动不了的尴尬局面，此时改用v-if就能解决问题

---

• ES6 的新api的兼容性问题

  问题描述：在ios8中不能使用Object.assign
  解决方案：

  1. 引入垫片babel-runtime，详细使用请参考babel-runtime官方文档
  2. 使用垫片babel-polyfill，详细使用请参考babel-polyfill官方文档

---

• ios8 background-image:url(xxx) url的参数问题

  问题描述：在ios8中不能使用background-image的url参数接受不了base64的格式
  解决方案：将背景图引入方式改为img标签src的引入方式

---

• css3 兼容问题

  **问题描述：**css3 flex布局出现兼容问题
  解决方案：

  1. 引入postcss-loader，详细使用请参考postcss-loader官方文档
  2. 安装autoprefixer ，详细使用请参考autoprefixer官方文档
  3. 配置postcss.config.js，具体配置为
     module.exports = {plugins: require('autoprefixer')]}

---

• webpack-dev-server 将localhost改为本机ip无法打开的问题

  问题描述：使用webpack-dev-server会发现将localhost改为本机ip竟然无法打开
  解决方案：在命令后面添加参数–host 0.0.0.0，具体命令为
  cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0

---

• 如何书写vue组件，既能保证可以通过组件式的方式使用，又能通过插件式的方式引用

  问题描述：实现分享组件，可以通过import的方式引用，也可以通过script标签的形式引入
  解决方案：对写好的组件暴露install方法，详情请参考vue 插件。例如：

  import '../scss/reset.scss'        // 移动端样式初始化
  import share from './share'        // 引入分享插件
  
  share.install = function (Vue, options) {
      Vue.component(share.name, share)
  }
  
  if (typeof window !== 'undefined' && window.Vue) {
      window.Vue.use(share);
  }
  
  export default share
  

---