说是坑,其实大部分是我们自己的过错!

vuex官方demo在1.0可以运行,在2.0报错?
此类问题,应该很常见吧?

还有顺溜的利用1.0搭建的webpack编译环境到了vue2.0突然失效了,报错了?简直要疯啊

1.问题一


*Failed to load resource: net::ERR_FILE_NOT_FOUND

*app.js:16381 Uncaught SyntaxError: Unexpected token import

可能你会疑惑,webpack中明明写了 babel 加载器,query中也写了参数presets,然而 es6 的 import依然不识别,这是为什么呢?
答案是如果你的 include 路径没写错,那么 你就应该添加 .babelrc 的配置文件,比如:

1
2
3
4
{
"presets": ["es2015", "stage-2"],
"comments": false
}

2.问题二

Failed to mount component: template or render function not defined
这是什么问题呢?因为是2.0的时代了,但我们没认真看api,可能顺手用了1.0的习惯,很明显template or render是 模版编译渲染问题。
官方文档解释 独立构建-vs-运行时构建 解释的多么清楚,一定要看文档
默认 NPM 包导出的是 运行时 构建。为了使用独立构建,在 webpack 配置中添加下面的别名:

1
2
3
4
5
resolve: {
alias: {
'vue$': 'vue/dist/vue.js'
}
}

3.问题3


vuex官方demo在1.0可以运行,在2.0报错?
[Vue warn]: Property or method “counterValue” is not defined

这又是什么原因呢,因为用着 vue2.0和 vuex2.0 却 使用着 vuex1.0 的语法文档。

什么也不说了,看文档吧 Vuex2 中文文档

这里有写的一个vuex2 demo预览 ,demo源代码 直接使用,无需安装webpack打包,无模块.

vue2/vuex2的那点坑的更多相关文章

  1. vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题. 问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能 ...

  2. Vue2.0 新手完全填坑攻略——从环境搭建到发布

    Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vu ...

  3. 基于vue2+vuex2+vue-router+axios+elementUI做的自动化后台模板

    github地址:https://github.com/sailengsi/sls-admin 此项目重点突出在架构上模式,这个架构模式,可以让我们在开发中,很方便的拓展与维护,并且可以保持结构清晰的 ...

  4. vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

  5. [Vue] Vue2 + @vue/composition-api 的一个坑

    Vue2 + @vue/composition-api 和 Vue3 composition api 不一致的地方(待验证) <div v-for="item in arr" ...

  6. Vue2.0 新手完全填坑攻略—从环境搭建到发布

    http://www.open-open.com/lib/view/open1476240930270.html https://jingyan.baidu.com/article/91f5db1b2 ...

  7. Vue2.0 新手完全填坑攻略——从环境搭建到发布(转载)

    强力推荐,详情请点击此链接http://www.jianshu.com/p/5ba253651c3b

  8. (转)Vue2.0 推荐环境

    Vue2.0 新手完全填坑攻略——从环境搭建到发布 http://www.jianshu.com/p/5ba253651c3b Jinkey原创感谢 showonne.yubang 技术指导Demo ...

  9. Vue 全家桶学习资源(转)

    companion: React 全家桶学习资源(持续更新) 下面整理了一些关于Vue以及Vue衍生的学习资源: 官网文档 官网API ECMAScript 6 入门 30分钟掌握ES6/ES2015 ...

随机推荐

  1. ubuntu-Linux系统读取USB摄像头数据(uvc)

    这几天在做小车的过程中,需要用到图像采集.我想现在用的摄像头是UVC免驱的.根据国嵌的教程中有一个gspca摄像头的程序.我发现把gspca的采集程序用到uvc上时,在显示图像的时候提示没有huffm ...

  2. 代码管理工具 --- git的学习笔记二《git的工作原理》

    通过几个问题来学习代码管理工具之git 一.git是什么?为什么要用它?使用它的好处?它与svn的区别,在Mac上,比较好用的git图形界面客户端有 git 是分布式的代码管理工具,使用它是因为,它便 ...

  3. JUnit 4 与 TestNG 对比

    原文出处: 付学良的网志 原文出处2: http://www.importnew.com/16270.html -------------------------------------------- ...

  4. NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  5. grouping sets从属子句的运用

    grouping sets主要是用来合并多个分组的结果. 对于员工目标业绩表'businessTarget': employeeId targetDate idealDistAmount 如果需要分别 ...

  6. Django中 如何修改models字段的默认值

    场景描述: 在建表的时候,新闻表的内容简介字段,给的默认值是可以为空的,但是没有设置默认值为blank,那么,这种情况下,对于只有标题,没有内容简介的新闻来讲,发布之后,前端显示的内容简介位置是non ...

  7. Sublime插件:

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } ht ...

  8. Linux 基础

    命令说明 $ type cmd # 获取命令类型 $ which cmd # 命令的位置 $ help cmd / cmd --help / man cmd # 获取命令帮助 $ whatis cmd ...

  9. RP

    关键印象 Base note 任务(task):一段代码. 进程(process):程序的实体,一个正在运行中的可执行文件.拥有独立的虚拟内存空间和系统资源,包括端口权限. 线程(thread):进程 ...

  10. 如何使用Linux命令行查看Linux服务器内存使用情况?

    一个服务器,最重要的资源之一就是内存,内存够不够用,是直接关系到系统性能的关键所在. 本文介绍如何查看Linux服务器内存使用情况, 1.free命令 free -m [root@localhost ...