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
非常重要的入口文件 (webpack
,rollup
他们的入口文件都是 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>
- 每个 *.vue 文件最多可同时包含一个顶层
<template>
块。 - 其中的内容会被提取出来并传递给
@vue/compiler-dom
,预编译为JavaScrip
t 的渲染函数,并附属到导出的组件上作为其render
选项。
<script>
- 每一个
*.vue
文件可以有多个<script>
块 (不包括<script setup>
)。 - 该脚本将作为
ES Module
来执行。 - 其默认导出的内容应该是
Vue
组件选项对象,它要么是一个普通的对象,要么是defineComponent
的返回值。
<script setup>
- 每个
*.vue
文件最多只能有一个<script setup>
块 (不包括常规的<script>
) - 该脚本会被预处理并作为组件的
setup()
函数使用,也就是说它会在每个组件实例中执行。<script setup>
的顶层绑定会自动暴露给模板。更多详情请查看<script setup>
文档。
<style>
- 一个
*.vue
文件可以包含多个<style>
标签。 <style>
标签可以通过scoped
或module 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
最后编辑:海马 更新时间:2025-01-03 13:55