526互联

create-vue和vue-cli创建项目的差异

发布时间 2023-08-12 15:16:35作者: 蕝戀

这里对比的是vue-cli和create-vue创建vue3项目的文件中的内容差异。

原来public中的index.html被移动到根目录：（原因见这里：）

https://cn.vitejs.dev/guide/#index-html-and-project-root

<!-- 
 不同点1：script放在了最前面，方便编写代码，实际上你给他放在最后面也没问题.
   script属性“setup”是组合式api的一个语法糖，可以让我们更简洁使用组合式api。下面的笔记会补充，现在只需要知道这是一个语法糖。
 -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <!-- 不同点2：模板中不再要求必须只能有一个根标签，可以看到vue3之后可以有多个根标签 -->
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
    <!-- 不同点3： 局部组件只需要导入就可以直接使用，不需要局部注册了 -->
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
</style>