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

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. linux下EOF写法梳理

    在平时的运维工作中,我们经常会碰到这样一个场景:执行脚本的时候,需要往一个文件里自动输入N行内容.如果是少数的几行内容,还可以用echo追加方式,但如果是很多行,那么单纯用echo追加的方式就显得愚蠢 ...

  2. November 3rd Week 45th Thursday 2016

    Shared joy is a double joy, the same as your gift and idea. 与人分享,欢乐.灵感加倍. As a coder, I must work wi ...

  3. [干货]Chloe官网及基于NFine的后台源码毫无保留开放

    扯淡 经过不少日夜的赶工,Chloe 的官网于上周正式上线.上篇博客中LZ说过要将官网以及后台源码都会开放出来,为了尽快兑现我说过的话,趁周末,我稍微整理了一下项目的源码,就今儿毫无保留的开放给大家, ...

  4. windows批处理运行java程序

    明确需求 今天你编了一个java swing版照片查看器,想让计算机上的所有照片默认打开方式都改成你的照片查看器. 使用工具软件 很多工具软件都是不把jre打包到exe中的,这就是说打包之后的exe只 ...

  5. Java jdbc访问sqlserver,oracle数据库

    1.JDBC访问Oracle数据库 public class Jdbc_Oracle { // 静态代码块,只会执行一次,类似C#静态构造方法 static { try { // 加载数据库驱动一次 ...

  6. ECharts学习(3)--toolbox(工具栏)

    1. toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2. toolbox中的属性,不包含五个工具.里面最主要的就是feature这 ...

  7. Android Hook技术

    原文:http://blog.csdn.net/u011068702/article/details/53208825 附:Android Hook 全面入侵监听器 第一步.先爆项目demo照片,代码 ...

  8. 简明 VIM 练级攻略

    http://coolshell.cn/articles/5426.html vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个 ...

  9. UVA1225

    每增加1个整数,所有位上的对应数都加一.建立一个10000列10行的表,然后查表就可以了. #include<stdio.h> #include<string.h> ][]; ...

  10. mysql 创建存储过程报错

    在创建存储过程前把结束符定义为 delimiter // 然后再创建就不会报错