vue3.0入门（五）：vite构建vue项目

使用vite构建项目步骤

1. 安装node，cmd输入：node -v验证是否安装成功；一般node安装后会自动安装npm，cmd输入：npm -v验证是否安装成功
2. 选择一个文件夹作为项目文件夹，搜索框输入cmd，输入：npm init @vitejs/app
3. 输入项目名称或者按enter使用默认名称：vite-project
4. 选择框架vue
5. 进入项目：cd vite-project
6. 执行：npm install
7. 运行项目：npm run dev
8. 如果出现报错，管理vue模板校验：vscode>setting>取消勾选Vetur>Validation:template

单文件组件

<template>  
</template>

<script>  
</script>

<style>  
</style>

vite项目的单文件组件使用逻辑

1. 自定义的单文件组件如helloworld.vue通过export导出
2. 在app.vue中通过import导入自定义的单文件组件
3. 在main.js中通过mount方法挂载

viet项目在app.vue中同样可使用单文件组件的形式，这时如果同时要引入自定义的单文件组件，需使用如下方式：

import HelloWorld from ‘./components/HelloWorld.vue‘
export default {
components: {
HelloWorld
}

父组件app.vue通过props向子组件helloword.vue传值时如果报错，子组件中可使用单根组件
在父组件app.vue中使用引入的子组件时，可使用小写，必须用 - 连接；使用子组件必须有 /

vue3.0入门（五）：vite构建vue项目

原文：https://www.cnblogs.com/chniny/p/14916253.html