【解决Vue问题（Uncaught ReferenceError Vue is not defined）】用vue-cli 命令：vue init webpack-simple my-app创建了一个新项目，在新项目中在默认创建的App.vue组件中导入vue-router，但是Vue抛出错误:’
Uncaught ReferenceError: Vue is not
defined’
，下面是main.js文件：
import Vue from 'vue'
import App from './App.vue'new Vue({
el: '#app',
render: h => h(App)
})
App.vue文件：
<
template>
<
div id="app">
<
router-view><
/router-view>
<
/div>
<
/template><
script>
import Vue from 'vue';
//**why I need to import it again? I already imported it in main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import QuestionOne from './components/QuestionOneTemplate';
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
];
const router = new VueRouter({
routes
});
window.router = router;
export default {
router,
name: 'app',
data () {
return {
}
}
}
<
/script><
style lang="scss">
<
/style>
解决办法
是否有办法使用main.js导入的vue ?没有，你需要将它导入到使用Vue的每个文件中，可使用import/require链接。每个导入都是相同的单例实例，因此你可以这样获取路由：从Vue组件的javascript使用$router和route，这样就不用使用import，或者只在模板中使用$router和route（不推荐使用），但是你可以将Vue分配给main中的全局遍历，这样使用全局变量就不用使用导入，如下：
main.js文件：
import Vue from 'vue';
global.MyVue = Vue
App.vue文件：
import VueRouter from 'vue-router';
MyVue.use(VueRouter);
为什么呢？这就是ES6的链接方式，考虑到它的布线，如果有超过1个Vue库可用，链接器如何知道使用哪一个？如果另一个库定义了一个名为Vue的变量或函数，该怎么办？可能lib将自己的内部Vue用于事件总线或其他特性。
推荐阅读
- 解决Vue问题（[Vue warn] Avoid mutating a prop…Prop being mutated list (found in component )）
- 解决vue-cli安装错误（npm ERR! A complete log of this run can be found in npm ERR!）
- 前端CSS（实现CSS集合）
- PHP date_default_timezone_set()函数用法详解
- 算法设计（在按行排序的矩阵中找到中位数）
- PHP atanh()函数用法介绍
- PHP fread()函数用法介绍
- 算法设计（检查单链表是否为回文的函数）
- Python MongoDB 排序sort查询介绍