Question

请教vue.js的问题

我用vscode工具搭建了vue项目，helloword也实现了，但是我在App.vue文件里面使用代码：const vm = new Vue({ el: ".vueBox", data: { isChoose:false }, methods:{ imgScc:function () { this.isChoose = !this.isChoose } }会报Uncaught ReferenceError: Vue is not defined错误，这个vue对象为什么实例化不成功啊？main.js里面已经有import Vue from 'vue' 啊，请高手解答一下是什么原因？





Answer 1

/*!
* Vue.js v1.0.12
* (c) 2015 Evan You
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
global.Vue = factory();
}

通过你的第二张截图看到你也用的是一个在线 js 资源。

看一下这个 js 资源有没有正常的加载下来。

我从中把前几行引用出来。你可以看到，实例化的全局变量的名称。你可以通过断点调试确认执行情况。

我看到你的这段代码的上面还有一些代码。你需要排除一下是不是上面的代码对 Vue 实例有一些影响。

追问

其实可以不用引用在线的vue.js吧，因为main.js里面有了vue的资源，不知道为什么会报错

追答

你两个截图里其实体现了两种引用方式。
不应并存。

Answer 2

??????
你这个代码太奇怪了吧？
第一页的vue是通过npm的包引入的，第二张图为什么又要通过script标签方式引入一个？
而且你还把new Vue写入了两个不同的script标签里面，如果是vue-cli一般也不这么写阿
你的.vue文件是个组件，.html文件才是你的实际地址，.vue是要被编译到html中引入的js里面的，所以当然不能在.vue文件里这么引了。访问顺序一下子就出问题了
如果你想在另一个script标签中用vue，必须要再引入一次才行的
<script>
import Vue from 'vue'; //这个要加上！
const vm = new Vue({
...})
</script>
太奇怪了这个代码，你用的什么脚手架？

Answer 3

在main.js import的Vue 只在main.js里面有效 这是作用域的问题

你在HelloWorld2.vue里面再次import一个Vue就可以引用了
但是你这么使用vue-cli是不规范的
建议你去github上找一些项目先看看别人是怎么写的

Answer 4

Vue.js自定义指令