使用vite构建项目步骤
- 安装node，cmd输入：node -v验证是否安装成功；一般node安装后会自动安装npm，cmd输入：npm -v验证是否安装成功
- 选择一个文件夹作为项目文件夹，搜索框输入cmd，输入：npm init @vitejs/app
- 输入项目名称或者按enter使用默认名称：vite-project
- 选择框架vue
- 进入项目：cd vite-project
- 执行：npm install
- 运行项目：npm run dev
- 如果出现报错，管理vue模板校验：vscode>setting>取消勾选Vetur>Validation:template
单文件组件
<template>
</template>
<script>
</script>
<style>
</style>
vite项目的单文件组件使用逻辑
- 自定义的单文件组件如helloworld.vue通过export导出
- 在app.vue中通过import导入自定义的单文件组件
- 在main.js中通过mount方法挂载
viet项目在app.vue中同样可使用单文件组件的形式，这时如果同时要引入自定义的单文件组件，需使用如下方式：
import HelloWorld from ‘./components/HelloWorld.vue‘
export default {
components: {
HelloWorld
}
父组件app.vue通过props向子组件helloword.vue传值时如果报错，子组件中可使用单根组件
在父组件app.vue中使用引入的子组件时，可使用小写，必须用 - 连接；使用子组件必须有 /