为什么我vue组件已经写好了，但就是在htm中使用不了。浏览器也没有报错，这是为什么？？？

Z时代
2024-02-25
分类：IT

vue"><!-- App.vue -->
<template>
  <div>
    <NavbarComponent></NavbarComponent>
    <router-view></router-view>
  </div>
</template>
<script>
import NavbarComponent from './components/NavbarComponent.vue';
export default {
  name: 'App',
  components: {
    NavbarComponent,
  },
};</script>

<!-- NavbarComponent.vue -->
<template>
  <nav class="top-nav">
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/about">About</router-link></li>
      <li><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>
<script>
export default {
  name: 'NavbarComponent',
};
</script>
<style scoped>
/* 样式可以根据你的需求自定义 */
.top-nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}
.top-nav ul {
  list-style-type: none;
  padding: 0;
}
.top-nav ul li {
  display: inline;
  margin-right: 20px;
}
.top-nav ul li a {
  color: #fff;
  text-decoration: none;
}</style>

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import NavbarComponent from './components/NavbarComponent.vue';
const app = createApp(App);
app.component('NavbarComponent', NavbarComponent);app.mount('#app');

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- 引入构建后的 JavaScript 文件 -->
        <script src="../js/vue.js"></script>
        <script src="../my-vue-app/dist/js/chunk-vendors.44358afb.js"></script>
        <script src="../my-vue-app/dist/js/app.80b7c03b.js"></script>
    </head>
    <body>
        <div id="app">
            <navbar-component></navbar-component>
        </div>
        <h1>测试</h1>
    </body></html>

为什么我vue组件已经写好了，但就是在htm中使用不了。浏览器也没有报错，这是为什么？？？

回答：

你是不是少引用了什么文件啊？你看看打包好后的html文件里是怎么引用的先。

回答：

之前之所以项目没有构建成功，我觉得主要的原因是没用掌握好vue相关方面的知识点，没要理清楚一些基本的概念。

知识点：
1 单页面应用程序
1.1 什么是单页面应用程序
单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

1.2 单页面应用程序的特点
1.单页面应用程序将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。

2.一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换HTML 的内容，从而实现页面与用户的交互。

2 main.js文件，App.vue文件，自定义vue文件的作用

main.js：

main.js 是Vue.js项目的主入口文件，其作用如下：

创建Vue实例：在 main.js 中，你会创建Vue应用的根实例。这是通过调用createApp（或new Vue，如果你在使用Vue 2.x）来完成的。

挂载应用：一旦Vue实例创建，你会使用 mount 方法将Vue应用挂载到HTML页面中的特定元素上，通常是一个<div>元素。这个过程将启动Vue应用，使其开始运行。

引入和配置插件：main.js 也用于引入和配置Vue.js的插件，如Vue Router、Vuex（用于状态管理）、Axios（用于发起HTTP请求）等。这些插件通常在Vue应用创建之前进行配置。

全局配置：在 main.js 中，你可以进行一些全局配置，如设置路由路由模式、引入全局样式、设置请求拦截器等。这些配置会影响整个应用。

导入全局组件、过滤器和指令：如果你有一些组件、过滤器或自定义指令是全局可用的，你可以在 main.js 中导入它们并注册它们。

App.vue：

App.vue 是一个Vue组件，通常用作应用的根组件。它的作用如下：

根组件：App.vue 通常用作Vue应用的根组件，也就是所有其他组件都将嵌套在它内部。在 main.js 中，你会将 App.vue 注册为根组件，并将其挂载到HTML页面上。

应用的整体结构：App.vue 包含了整个应用的结构，包括布局、导航、页脚等。它定义了应用的外观和整体结构。

嵌套子组件：在 App.vue 中，你可以嵌套其他子组件，这些子组件通常用于表示不同的应用视图或UI元素。这种组件嵌套使得应用更容易维护和扩展。

渲染和数据管理：App.vue 也包含了Vue模板和脚本，用于渲染应用的内容和管理数据。你可以在这里定义与应用状态相关的数据和逻辑。

自定义vue 文件
自定义的 .vue 文件也是Vue.js应用中的重要组成部分，它们通常包含了特定组件的定义，包括模板、脚本和样式。
组件定义：每个自定义的 .vue 文件通常定义一个Vue组件，它可以代表一个独立的UI元素、视图或功能。这种组件化的开发方式使得代码更加模块化、可维护和可重用。

模板：.vue 文件中包含模板部分，这是用来定义组件的HTML结构。模板部分定义了组件的外观和布局。

脚本：脚本部分包含了与组件相关的JavaScript代码，包括数据、方法、生命周期钩子等。这是组件的行为逻辑部分。

样式：样式部分定义了组件的样式，通常使用CSS或CSS预处理器（如Sass、Less）编写。样式部分通常是局部作用域的，这意味着它们仅适用于当前组件，不会影响其他组件的样式。

独立性：每个 .vue 文件通常是独立的，它们封装了组件的全部内容，包括模板、脚本和样式。这使得组件的独立开发和测试变得更加容易。

模块化：.vue 文件的组织方式使得你可以轻松地将它们导入到应用的其他部分，包括其他 .vue 文件、main.js 文件以及路由文件。这种模块化的开发方式有助于构建大型应用。

解决办法：
1.这个是编写好的文件项目。
为什么我vue组件已经写好了，但就是在htm中使用不了。浏览器也没有报错，这是为什么？？？
2.在这边我创建了一个自定义的.vue文件，NavbarComponen.vue。

3.展示

4.总结
之前项目组件引用失败是因为，自己创建了一个t.html的静态网页文件。但实际上，我们并不需要去单独创建网页文件，index.html就是我们的入口。我们只需要像上面图片那样子编写自定义组件文件.vue，然后再App.vue文件进行引用，main.js进行挂载即可。。