App.vue

App.vue 通常被视为 Vue 应用程序的根组件。

kimi是这么介绍的：

App.vue 通常被视为 Vue 应用程序的根组件。它是所有组件层次结构的起点，并且是应用程序中最顶层的组件。在这个文件中，您可以定义全局的布局、样式以及一些通用的逻辑。App.vue 的主要作用包括：

  1. 全局布局：定义应用程序的结构和布局，例如导航栏、侧边栏、页脚等。
  2. 全局样式：设置应用程序级别的样式，例如主题、颜色变量等。
  3. 路由视图：作为路由出口，展示路由匹配到的组件。
  4. 全局过滤器：注册全局过滤器，供子组件使用。
  5. 全局指令：注册全局自定义指令，供整个应用程序中的组件使用。
  6. 生命周期钩子：可以在这里使用生命周期钩子（如 created、mounted 等），执行一些全局的初始化操作。

App.vue基本结构有三个。
实际上，每个.vue文件都包含相同的这三个部份。这个例子里面，./components/HelloWorld.vue这个文件也是这三个部份。

1
2
3
4
5
6
7
8
9
10
11
12
<template>
# 可以理解会显示在静态html的<body>中的内容
</templte>

<script>
# 可以理解为所有程序脚本
# 比如import、export，定义function等等
</script>

<style>
# CSS风格描述
</style>

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
import HW from './components/HelloWorld.vue'

# 这句指令，把components文件夹下面的HelloWorld.vue组建导入进来，并且命名为HW，后面用HW这个名字来引用他。
可以在后续使用的时候，通过<hw>...</hw>这样的语法嵌入HelloWorld.vue的内容。

export default {
  name: 'App',
  components: {
    HW
  }
}
# 这句指令，导出了当前的对象，也就是现在App.py的一个具体的对象，给这个对象命名为App，这个对象里包含了一个局部组建是HW，就是前面import里定义的组建
</script>

template

1
2
3
4
5
6
7
8
9
10
<template>
# 这里插入了一个图片，非常直接的html代码
  <img alt="Vue logo" src="./assets/logo.png">

# 这里把script里倒入的，名为HW的HelloWorld部件，直接用作了一个块。并且传入了变量msg  
  <HW msg="Welcome to Your Vue.js App"/>

# 同理其实后面可以插入多个components

</template>

style

待续

main.js

main.js 是 Vue 应用程序的入口文件。

kimi是这么介绍的：

在这个文件中，您会创建 Vue 实例，并且对其进行配置和初始化。main.js 的主要作用包括：

  1. 创建 Vue 实例：初始化 Vue 实例，并将其挂载到 DOM 中的某个元素上。
  2. 配置路由器：如果您的应用程序使用 Vue Router，那么您需要在 main.js 中导入并安装路由器。
  3. 集成 Vuex：如果您的应用程序使用 Vuex 进行状态管理，那么您需要在 main.js 中创建并配置 Vuex store。
  4. 插件集成：集成第三方插件或库，例如 axios、element-ui 等。
  5. 全局混入：使用全局混入（mixins）来共享跨多个组件的逻辑。
  6. 资源导入：导入全局组件和指令，使得它们可以在应用程序的任何地方直接使用。

例如，一个最简单的main.js:

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'

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

具体的来说：

import { createApp } from 'vue'

这行代码使用 ES6 的 import 语法从 vue 包中导入了 createApp 函数。createApp 是 Vue 3 中用于创建一个新的 Vue 应用程序实例的函数。这个函数接受一个组件对象作为参数，并返回一个应用程序实例。

import App from './App.vue'

这行代码同样使用 import 语法，从当前目录下的 ./App.vue 文件中导入了一个名为 App 的 Vue 组件。App.vue 是一个单文件组件（Single-File Component，SFC），它是 Vue 应用程序的根组件，包含了应用程序的结构、样式和逻辑。

需要注意的是，这里的 App 可以是任何自定义的名字，但是要和下面createAPP()中的名字对应。换句话说，这里的import其实是吧App.vue定义成了一个变量，然后在下面的createAPP()里作为一个参数传入。

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

这行代码首先调用 createApp 函数，并将 App 组件作为参数传递给它，从而创建了一个新的 Vue 应用程序实例。App 组件作为根组件，将包含整个应用程序的其余部分。

接着，使用 .mount() 方法将这个应用程序实例挂载到 DOM 中。#app 是一个 CSS 选择器，它指向页面上具有 id="app" 的元素。当 .mount() 方法被调用时，Vue 会将 App 组件渲染到这个元素内部。

同上，这里的App需要跟上面import里被定义的名字一样。

所以上面的代码也可以写成：

1
2
3
4
5
import { createApp } from 'vue'
import abcde from './App.vue'

createApp(abcde).mount('#app')