Vue.js - 我进展缓慢

问题描述 投票：0回答：1

一切似乎都无法解析主页和应用程序的文件路径。我什至将我的所有文件输入 AI 并进行检查。我什么都没有。

来自 src 文件夹中的 main.js：

从“@views/Home.vue”导入主页； // 使用别名 从'@src/App.vue'导入应用程序； // 使用别名

来自路由器文件夹中的index.js：

从“@views/Home.vue”导入主页； 从“@src/App.vue”导入应用程序；

应用程序.vue：

<template>
<div id="app">
</div>
</template>

<script>
export default {
name: 'App',
};
</script>

<style>
</style>

Home.vue：

<template>
<div class="flex justify-center items-center h-screen ">
<div class="bg-white p-10 rounded-lg shadow-lg">
<h2 class="text-2xl mb-4">Sign in</h2>
<form class="flex flex-col space-y-4">
<input type="email" placeholder="Email" class="border p-2" />
<button class="bg-blue-500 text-white p-2 rounded">Send Code</button>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
<style scoped>
</style>

我已经尝试了我能想到的一切，以及人工智能能想到的一切。这是一个空的、全新的项目。没什么可检查的。

javascript firebase vue.js import tailwind-css
1个回答
0
投票

我认为 App.vue 有问题。所以我用你的代码用 Vue 3 重新创建了一个小项目，它可以工作。 所以这就是

index.html
:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

这是默认代码我没有更改它。 

ìndex.html
是 Vue 应用程序的挂载点。 Vue 实例附加到此元素并渲染其中的组件，从 
App.vue
开始。

在此文件中有指向

main.js
的链接：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

在 Vue.js 应用程序中，

main.js
充当应用程序的入口点。这是您运行 Vue 应用程序时执行的第一个文件。

创建这个应用程序时我决定使用路由器，所以 App.vue 是这样的：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <header>
    <div class="wrapper">

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

在路由器文件夹中有

index.js
，其中包含路线：

mport { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router


App.vue
充当根组件，应用程序中的所有其他组件都是从该根组件安装或启动的。本质上，它是 Vue 3 应用程序的主要入口点。

如果您想使用自己的

App.vue
，而不需要路由器，就像在您的示例中一样，您需要在 App.vue 中使用文件 home，例如如下所示：

<script setup>
import HomeView from './views/HomeView.vue';
</script>

<template>
  <div id="app">
    <HomeView/>
  </div>
</template>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.