黑马 Vue3 小兔生鲜2 熟悉关键文件

在创建我们的vue3项目之后，我们需要关注哪些关键文件？

首先是package.json文件

这个文件里面有我们的操作指令，安装了哪些依赖，和依赖的版本信息

要执行 npm run 指令 来启动指令，我们也可以进行修改，设置自己的私有指令

然后我们看vite.config.js

这个文件是我们的vite脚手架的配置文件

 以后我们安装一些配置，需要在这里，上面有官方文档，可以去看

然后就是我们的入口文件 main.js

路径：demo1\src\main.js

与vue2通过new Vue(){} 来创建实例不同，vue3是通过createApp来创建的

 

然后我们看·，index.html文件

 这里面就有一个id="app"的div

这就是main,js里面挂载的场所

接下来，我们看App.vue

这是vue3的组件内容，与vue2顺序不一样

有些同学可能会在main标签那里冒红

为了解决 [vue/no-multiple-template-root] 错误，您需要确保模板根节点只包含一个元素。您可以使用一个 div 元素来包裹这些元素，或者将这些元素合并为一个元素。

示例：

html<template>
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
</template>

如果您正在使用 Vue 3，可以使用单个 <template> 标记来包含多个元素，如下所示：

html<template>
  <h1>Title</h1>
  <p>Paragraph</p>
</template>

另外，为了消除来自 eslint-plugin-vue 的警告，您可以在 .eslintrc 文件中添加以下规则：

json{
  "rules": {
    "vue/no-multiple-template-root": "off"
  }
}

这样可以关闭此规则，从而防止出现这种类型的警告。