从简单的 Vue 3 演示项目中学习

专业研究祖传Bug编写术

已于 2023-12-06 14:56:43 修改

阅读量146

点赞数 1

分类专栏： Vue 3基础入门教程文章标签： vue.js 学习 javascript 前端

于 2023-10-11 22:18:05 首次发布

本文链接：https://blog.csdn.net/aahwj/article/details/133779365

版权

Vue 3基础入门教程专栏收录该内容

28 篇文章 26 订阅

订阅专栏

在这里插入图片描述

本文接着上一篇《初识 Vue 3，使用Hbuilder X 开发工具初建项目》，详细解析一下这个项目中，主要文件的作用。

index.html文件

在 Vue 3 中，index.html 文件的作用和在其他 Vue 版本中的作用一样，它是整个应用的入口文件。当浏览器加载应用时，它会首先加载 index.html 文件，并解析其中的内容。这个文件包含了 HTML 代码，用于创建应用的基本结构，如 head 和 body 标签、样式表和脚本文件等。

在 Vue 3 应用中，通常会将 App.vue 组件（或其他根组件）渲染到 index.html 文件的某个 DOM 元素中，上一篇文章创建的项目中的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>

在这个例子中，App.vue 组件会被渲染到 id 为 “app” 的 div 元素中，而应用的主要逻辑则位于 main.js 脚本文件中。

main.js文件

接下来我们看看main.js文件中的内容。

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

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

这段代码使用Vue 3中的createApp函数创建了一个Vue应用，并将App.vue组件作为根组件进行挂载。具体解释如下：

import { createApp } from ‘vue’：从Vue库中导入名为createApp的函数。
import App from ‘./App.vue’：从当前目录下的App.vue文件中导入App组件。
createApp(App)：使用createApp函数创建一个Vue应用，并将App组件作为根组件。
mount(‘#app’)：将根组件挂载到HTML页面上的一个id为app的元素中。

App.vue文件

接下来我们看看main.js文件中的内容。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<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>

这段代码是一个Vue的单文件组件，其中包括了模板(template)、脚本(script)和样式(style)三个部分。

在脚本中，使用了<script setup>语法，它是Vue 3的新特性之一，用于在组件中声明变量、引入组件等等。
这里使用了import语句导入了一个名为HelloWorld的组件，并将其注册到模板中。

在模板中，通过<img>标签引入了一个名为logo.png的图片，并在下面使用了<HelloWorld>标签渲染了HelloWorld组件，传递了一个名为msg的属性值。

在样式中，定义了一个名为app的样式规则，设置了字体、字体平滑、文本对齐方式、颜色和外边距等属性。这个app样式规则被应用到了组件的根元素上。

Vue 3的新特征 setup语法

它可以让我们更方便地定义组件，简化了Vue组件的结构，提高了开发效率。下面是一些<script setup>的用法：

变量声明：在<script setup>中声明变量，不需要使用data函数或computed属性。例如：

<script setup>
  let name = 'Vue 3'
  const age = 3
</script>

注册组件：可以在<script setup>中使用defineComponent()注册组件，简化了组件的定义。例如：

<script setup>
  import { defineComponent } from 'vue'
  
  export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: String
    }
  })
</script>

Props的解构赋值：在<script setup>中，我们可以使用对象解构赋值接收props传递的数据。例如：

<script setup>
  props: {
    msg: String
  }
  
  console.log(msg) // 直接使用message变量
</script>

模板引用：可以使用ref引用模板中的DOM元素或组件实例，再在<script setup>中直接使用引用变量。

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script setup>
  const myDiv = ref(null)
  console.log(myDiv.value.innerHTML) // 直接使用myDiv变量
</script>

<script setup>带来的是一种简洁、清晰的代码结构，避免了Vue2中代码冗长的问题。

HelloWorld.vue文件

接下来我们看看HelloWorld.vue文件中的内容。

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <p>
    Welcome:
    <a href="https://hx.dcloud.net.cn/" target="_blank">HBuilderX</a>
  </p>

  <p>
    <a href="https://vitejs.dev/guide/features.html" target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
  </p>

  <button type="button" @click="count++">count is: {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>

这是一个Vue组件文件，包含三个部分：script、template和style。其中：

script setup是Vue 3的新特性，用于声明组件的数据、方法和生命周期钩子。在这个例子中，使用了ref来声明一个叫做count的响应式变量；
defineProps是一个函数，用于声明props属性。在这个例子中，声明了一个名为msg的props，类型为String；
template部分包含了组件的HTML结构，使用了Vue的模板语法来绑定数据和事件。在这个例子中，使用了插值语法{{}}来绑定msg和count变量，使用了@click事件来监听按钮的点击事件；
style部分是组件的CSS样式，使用了scoped属性来限制样式只在当前组件内生效。在这个例子中，给a标签定义了一个颜色属性。

这个组件实现了一个简单的计数器，当点击按钮时，计数器的值会加1。同时，组件内还展示了一些文本信息和超链接。

以上是对一个简单Vue 3演示项目主要文件的解析。可能对新手来说看完还是有点疑惑，但是没关系，先记住这些疑问，在接下来的学习中，慢慢将它们一一解开。