vue2 开发问题整理

• Z时代
• 2024-01-10
• 分类：综合

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

以上是 vue2 开发问题整理 的全部内容， 来源链接： utcz.com/z/377612.html