vue2 开发问题整理

vue2 常见坑

做了vue2 项目，把遇到的坑整理下:

• babel 解析报错
  未使用eslint
  SyntaxError: Unexpected token
  methods: {
  …mapActions([
  ‘increment’,
  ‘incrementIfOdd’
  ])
  }
  解决方案：可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread 。
  但是我已近配置了stage2,接着在babel的配置文件 .babelrc 中应用插件：
  babel: {
  presets: [‘es2015’],
  plugins: [‘transform-runtime’,’transform-object-rest-spread’]
  }
  接下来重新打包就OK啦–npm run build

• run dev 和run build 后图片不能正常显示问题
  首先使用vue-cli之后，config/index.js配置问题，将build配置修改
  

用require模式引入图片，会被url-loader加载，图片会加入hash值后缀

还有多种处理方法，可以参考链接：这里写链接内容

• 静态资源处理
  所有需要进行压缩的静态资源需要放入static目录

• 数据更新，视图不更新
  /**
  *param billList Array
  *param index 存放位置
  *param b 需要存放数据
  **/
  vm.$set(billList,index,b)

• vue-router解析
  1.mode设置为history表示利用了history.pushState API来完成URL跳转而无须重新加载页面。
  扯远一点，mode有三种模式如下：
  I) hash模式:使用URL hash值来作为路由。支持所有浏览器。
  II) history模式：依赖HTML5 History API和服务器配置。查看HTML5 History模式。
  III) abstract模式:支持所有JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。
  2.scrollBehavior 设置了滚动条起始位置。
  3.linkActiveClass 设置当前选中项的样式类名
  4.最重要的是routes(注意：不是routers，没有r)
  (1) path 就是 router-link to后面跟的链接，注意保持一致；
  (2) component 对应的组件

• 参考链接
  1 vue-cli使用目录介绍
  http://blog.csdn.net/hongchh/article/details/55113751
  2 图片问题处理
  http://www.cnblogs.com/xiaojingyuan/p/7080768.html
  3 vue-cli创建工程
  http://www.cnblogs.com/xiaojingyuan/p/7080768.html
  4 Vuex坑解决方案
  http://blog.csdn.net/xdongll/article/details/74295299