首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Vue 3的Vue路由器引发17次警告,并且未显示app文件的内容。

Vue 3的Vue路由器引发17次警告,并且未显示app文件的内容。
EN

Stack Overflow用户
提问于 2021-07-09 22:08:42
回答 1查看 1.3K关注 0票数 1

我正在尝试构建一个简单的单页应用程序,所以我创建了一个项目选择(默认值(Vue 3预览) (Vue 3 babel,eslint)),并且我在vue精通教程https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/之后手动设置了路由,问题是在运行后cmd中出现了17次警告(npm运行服务)

我的cmd的输出:(有些太大了)

代码语言:javascript
复制
 WARNING  Compiled with 17 warnings                                                11:40:21 PM
 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'computed' was not found in 'vue'

 warning  in ./src/main.js

"export 'createApp' was not found in 'vue'

 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'defineComponent' was not found in 'vue'

这里是我的App.vue

代码语言:javascript
复制
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里是我的/src/路由器/index.js

代码语言:javascript
复制
import { createWebHistory, createRouter } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

这里是我的/src/main.js

代码语言:javascript
复制
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App).use(router).mount('#app')

my package.json

代码语言:javascript
复制
{
  "name": "frontend-gp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "core-js": "^3.6.5",
    "vue": "^3.1.4",
    "vue-router": "^4.0.10",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

如果你需要更多的资源,请告诉我

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-09 22:16:53

您应该卸载当前的vue版本并安装新版本:

代码语言:javascript
复制
npm uninstall vue -S

然后

代码语言:javascript
复制
npm install vue@next -S
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68323123

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档