Vite目录

public 静态文件夹,通常用来存放一些无需编译的东西,比如图片啥的
src.assets 可编译,用来放图片的
src.components 组件存放的地方
src.App.vue 全局组件
src.main.js 用来放公共API的
src.index.html 入口文件
package.json 配置一些命令还有依赖包的地方
tsconfig.json 配置文件的,比如严格模式、语法之类的
vite.config.ts vite的配置文件

对App.vue的认识

  • template只能写一个
  • setup也只能写一个(写多了报错)

public 下面的不会被编译 可以存放静态资源

assets 下面可以存放可编译的静态资源

components 下面用来存放我们的组件

App.vue 是全局组件

main ts 全局的ts文件

index.html 非常重要的入口文件 (webpackrollup 他们的入口文件都是 enrty input 是一个 js 文件 ,而 Vite 的入口文件是一个 html 文件,他刚开始不会编译这些 js 文件 只有当你用到的时候 如 script src="xxxxx.js"会发起一个请求被 vite 拦截这时候才会解析 js文件)

vite config ts 这是 vite 的配置文件具体配置项 后面会详解

VsCode Vue3 插件推荐 Vue Language Features (Volar)

SFC 语法规范

*.vue 件都由三种类型的顶层语法块所组成: <template><script><style>

<template>

  1. 每个 *.vue 文件最多可同时包含一个顶层 <template> 块。
  2. 其中的内容会被提取出来并传递给 @vue/compiler-dom,预编译为 JavaScript 的渲染函数,并附属到导出的组件上作为其 render 选项。

<script>

  1. 每一个 *.vue 文件可以有多个 <script> 块 (不包括<script setup>)。
  2. 该脚本将作为 ES Module 来执行。
  3. 其默认导出的内容应该是 Vue 组件选项对象,它要么是一个普通的对象,要么是 defineComponent 的返回值。

<script setup>

  1. 每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)
  2. 该脚本会被预处理并作为组件的 setup() 函数使用,也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。

<style>

  1. 一个 *.vue 文件可以包含多个 <style> 标签。
  2. <style> 标签可以通过 scopedmodule attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混
<template>

 <div></div>

</template>

<script setup lang='ts'>
import { ref,reactive} from 'vue'

</script>
<style scoped>

</style>
作者:海马  创建时间:2023-03-26 16:57
最后编辑:海马  更新时间:2025-01-03 13:55