vite与vue-cli的异同

vite

官网

vite官网

创建vue3项目

yarn create vite my-vue-app --template vue

与vue-cli项目异同

• 目录结构基本与vue-cli一直，主要不同点在于public下的index.html被移到了根目录下
• vue文件内script默认放在了template之前(暂不清楚原因)，并且加上了setup属性

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

• main.js中vue的引入方式也改变了，变为以下方式

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

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

• 在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

• vue.config.js文件变成了vite.config.js