vue2 开发问题整理

vue

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

回到顶部