error in ./src/router/index.js Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' ERROR in ./src/router/index.js 3:0-36 Module not found: Error: Can't resolve '@/views/Home.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 4:0-38 Module not found: Error: Can't resolve '@/views/About.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in ./src/router/index.js 5:0-42 Module not found: Error: Can't resolve '@/views/Contact.vue' in '/root/www/src/router' @ ./src/main.js 5:0-30 9:2-8 ERROR in [eslint] /root/www/src/App.vue 26:7 error The "HelloWorld" component has been registered but not used vue/no-unused-components 怎么解决该问题

时间: 2023-06-19 20:09:33 浏览: 1197

详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

5星 · 资源好评率100%

Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。它以组件化开发、易学习、高性能著称。本文将深入探讨Vue.js项目中三个关键文件：main.js、App.vue和page/index.vue之间的区别。让我们从项目结构说起。一个标准的Vue.js项目通常有以下部分： 1. **index.html** - 这是项目的入口文件，它通常包含一个`<div id="app">`作为Vue实例挂载的根元素。 2. **src** - 这个目录包含了所有自定义的源代码，如组件、样式和配置。 3. **node_modules** - 存储项目依赖的外部库和模块。 4. **config** - 配置文件夹，用来设置项目的各种配置，如端口、路径等。 5. **build** - 包含Webpack配置，用于处理项目构建，区分开发环境和生产环境的配置。 **main.js** - 这是Vue应用的启动文件，也是项目的入口点。在这个文件中，我们导入Vue库，创建一个新的Vue实例，并挂载到HTML中的特定元素上。同时，我们还可以在这里注册全局组件、引入UI库（如Element UI）以及设置路由。例如： ```javascript import Vue from 'vue' import App from './App' import router from './router' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element); Vue.config.productionTip = false new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) ``` **App.vue** - 这是应用的主组件，所有的视图组件都在这个组件中通过`<router-view>`进行切换。`<router-view>`是一个特殊的组件，它会根据当前的路由来渲染对应的组件。App.vue通常包含一个简单的模板，如： ```html <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App', data () { return {} } } </script> <style scoped> /* App组件的样式 */ </style> ``` **page/index.vue** - 这是一个示例页面组件，代表应用中的一个具体视图。它有自己的模板、数据、方法和样式。`page`是一个常见的目录结构，用于组织应用的不同页面或模块。例如，一个简单的`index.vue`组件可能如下： ```html <template> <div class="index"> <h1>Welcome to Index Page</h1> </div> </template> <script> export default { name: 'IndexPage', data () { return { message: 'Hello Vue!' } } } </script> <style scoped> .index { text-align: center; } </style> ``` 在Vue.js的路由配置中，我们通常会在`src/router/index.js`文件中定义。例如： ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from '../components/Login' Vue.use(Router) export default new Router({ routes: [ { path: '/Login', name: 'Login', component: Login }, { path: "/login1", component: () => import('@/components/login1.vue') } ], mode: "history" // 去除URL中的# }) ``` 总结来说，main.js是应用的核心，负责初始化Vue实例和配置；App.vue是应用的顶级组件，提供了一个容器来展示路由切换的各个视图；page/index.vue等页面组件则代表具体的视图，它们可以通过路由被渲染到App.vue的`<router-view>`中。理解这些文件的区别对于有效管理和开发Vue.js项目至关重要。

这个错误提示是因为你的项目中缺少了对应的文件或者组件。你可以按照以下步骤进行排查： 1. 确认该路径下是否存在对应的文件，如 '@/views/Contact.vue' 是否存在于对应的目录下。 2. 确认你是否在对应的文件中正确导出了组件。 3. 确认你是否在对应的页面中正确引入了对应的组件。 4. 确认你是否在 main.js 中正确引入了路由和对应的组件。如果以上步骤都没有解决问题，你可以尝试重新安装依赖和重启项目。

阅读全文

相关推荐

vue代码示例.docx

VUE.js开发的微信软件源码

These dependencies were not found: * @/views/About.vue in ./src/router/index.js * @/views/Home.vue in ./src/router/index.js

ERROR in ./src/page/login/health.vue Module Error (from ./node_modules/vue-loader/dist/index.js): At least one <template> or <script> is required in a single file component. @ ./src/router/index.js 10:19-82 @ ./src/main.js 6:0-39 11:8-14

ERROR in ./src/router/index.js 8:0-36 Module not found: Error: Can't resolve '@/server/routes' in 'C:\Users\19119\Desktop\vue-tea\src\router'

最新推荐

俄罗斯RTSD数据集实现交通标志实时检测

管理建模和仿真的文件

预测区间与置信区间：机器学习中的差异与联系

基于KNN通过摄像头实现0-9的识别python代码

易语言开发的文件批量改名工具使用Ex_Dui美化界面

"互动学习：行动中的多样性与论文攻读经历"

【机器学习预测区间入门】：从概念到实现

如何修改QSpinBox的文字颜色？

爱心援助动态网页教程：前端开发实战指南

关系数据表示学习