最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Following documentation I cannot create an instance of Vue.js 3 - Stack Overflow

programmeradmin2浏览0评论

The code

/main.js

The Problem

I'm trying to build a simple tic-tac-toe app in StackBlitz. This is my main.js file:

import Vue from "vue";
import App from "./App.vue";
import TicTacToe from "./ponents/TicTacToe";
import Cell from "./ponents/Cell";

Vueponent("tic-tac-toe", TicTacToe);  // error: "cannot read property 'ponent' of undefined"

Also note my package.json file has vue as a dependency:

"dependencies": {
  "vue": "^3.0.0"
},

So the error means Vue needs to be defined, ok so I refer to the 3x documentation:

const app = Vue.createApp({ /* options */ })

But I get Cannot read property 'createApp' of undefined


So then I try to define an instance:

const Vue = new Vue({});

I get Cannot access 'Vue' before initialization


So, based on a google search of that error, I try:

Vue = new Vue({})

And I get vue_1.default is not a constructor.

So what am I doing wrong?

The code

https://stackblitz./edit/vue-ttt?file=src/main.js

The Problem

I'm trying to build a simple tic-tac-toe app in StackBlitz. This is my main.js file:

import Vue from "vue";
import App from "./App.vue";
import TicTacToe from "./ponents/TicTacToe";
import Cell from "./ponents/Cell";

Vue.ponent("tic-tac-toe", TicTacToe);  // error: "cannot read property 'ponent' of undefined"

Also note my package.json file has vue as a dependency:

"dependencies": {
  "vue": "^3.0.0"
},

So the error means Vue needs to be defined, ok so I refer to the 3x documentation:

const app = Vue.createApp({ /* options */ })

But I get Cannot read property 'createApp' of undefined


So then I try to define an instance:

const Vue = new Vue({});

I get Cannot access 'Vue' before initialization


So, based on a google search of that error, I try:

Vue = new Vue({})

And I get vue_1.default is not a constructor.

So what am I doing wrong?

Share Improve this question edited Oct 18, 2020 at 21:44 Boussadjra Brahim 1 asked Oct 18, 2020 at 20:36 Travis HeeterTravis Heeter 14.1k13 gold badges95 silver badges142 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

When you work with bundler like vue-cli, webpack or vite ..., you should import createApp to create new instance and use it for app.use or app.ponent ... :

 import { createApp } from "vue";
 const app = createApp({ /* options */ })

Using CDN like :

<script src="https://unpkg./vue@next"></script>

the Vue instance is available globally so you could use it as follows :

const app = Vue.createApp({ /* options */ })

You are getting this error because Vue3 is using named export instead of a default export. You can read more about it here.

You can fix this error by simply importing all the named exports onto an object called Vue:

import * as Vue from 'vue';
发布评论

评论列表(0)

  1. 暂无评论