VUE3学习 第二章 vite认识 SFC语法规范 VUE3-vscode插件 npm run dev执行过程详解 模板语法和V3指令

一、vite 目录介绍

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) 和 TS插件 TypeScript Vue Plugin(Volar)
注意！ V3的插件 和 V2 (vetur)的插件不能同时开启 会冲突，记得关闭另一个

二、SFC 语法规范

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

< template>
每个 *.vue 文件最多可同时包含一个顶层 < template> 块。

其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。

< script>
每一个 *.vue 文件可以有多个 < script> 块 (不包括< script setup>)。

该脚本将作为 ES Module 来执行。

其默认导出的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是 defineComponent 的返回值。

< script setup>
每个 *.vue 文件最多只能有一个 < script setup> 块 (不包括常规的 < script>)

该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。

< style>
一个 *.vue 文件可以包含多个

< style> 标签可以通过 scoped 或 module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 < style> 标签可以在同一个组件中混

三、 npm run dev 过程

在我们执行这个命令的时候会去找 package json 的scripts 然后执行对应的dev命令

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },

因为我们的电脑上面并没有配置过 vite 相关命令 所以无法直接执行 vite

其实在我们执行npm install 的时候（包含vite） 会在node_modules/.bin/ 创建好可执行文件

.bin 目录，这个目录不是任何一个 npm 包。目录下的文件，表示这是一个个软链接，打开文件(vite)可以看到文件顶部写着 #!/bin/sh ，表示这是一个脚本

在我们执行npm run xxx npm 会通过软连接 查找这个软连接存在于源码目录node_modules/vite

"bin": {
  "vite": "bin/vite.js"
},

所以npm run xxx 的时候，就会到 node_modules/bin中找对应的映射文件，然后再找到相应的js文件来执行

1.查找规则是先从当前项目的node_modlue /bin去找,
2.找不到去全局的node_module/bin 去找
3.再找不到 去环境变量去找

node_modules/bin中 有三个vite文件。

# unix Linux macOS 系默认的可执行文件，必须输入完整文件名
vite
 
# windows cmd 中默认的可执行文件，当我们不添加后缀名时，自动根据 pathext 查找文件
vite
 
# Windows PowerShell 中可执行文件，可以跨平台
vite

我们使用windows 一般执行的是第二个
MacOS Linux 一般是第一个

四、模板语法

模板插值语法
在script 声明一个变量可以直接在template 使用用法为{{变量名称}}

<template>
  <div>{{ message }}</div>
</template>
 
<script setup lang="ts">
const message = "sh"
</script>
 
<style>
</style>

**模板语法是可以编写条件运算的**
<template>
  <div>{{ message == 0 ? '111' : '222' }}</div>
</template>
 
<script setup lang="ts">
const message:number = 1
</script>
 
<style>
</style>

## 运算也是支持的
<template>
  <div>{{ message  + 1 }}</div>
</template>

**操作API 也是支持的**

<template>
  <div>{{ message.split('，') }}</div>
  const message:string = "1，2，3，4"
</template>

五、指令

v- 开头都是vue 的指令

v-text 用来显示文本

v-html 用来展示富文本

v-if 用来控制元素的显示隐藏（切换真假DOM）

v-else-if 表示 v-if 的“else if 块”。可以链式调用

v-else v-if条件收尾语句

v-show 用来控制元素的显示隐藏（display none block Css切换）

v-on 简写@ 用来给元素添加事件

v-bind 简写: 用来绑定元素的属性Attr

v-model 双向绑定

v-for 用来遍历元素

1. v-on修饰符 冒泡案例

<template>
  <div @click="parent">
    <div @click.stop="child">child</div>
  </div>
</template>
 
 
<script setup lang="ts">
const child = () => {
  console.log('child');
 
}
const parent = () => {
  console.log('parent');
}
 
</script>

// 点击一个  两个都会触发 ， 可以阻止表单提交 用  @click.prevent
// 也可以直接 return false
<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
 
 
<script setup lang="ts">
const submit = () => {
  console.log('child');
 
}

2. v-bind 绑定class 案例

1. 普通的------------
<template>
  <div :class="[flag ? 'active' : 'other', 'h']">12323</div>
</template>
 
 
<script setup lang="ts">
const flag: boolean = false;
</script>
 
 
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

2. ts的-------------------------
<template>
  <div :class="flag">{{flag}}</div>
</template>
 
 
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

3. v-bind 绑定style案例

<template>
  <div :style="style">2222</div>
</template>
 
 
 
<script setup lang="ts">
 
 
type Style = {
  height: string,
  color: string
}
 
const style: Style = {
  height: "300px",
  color: "blue"
}
 
</script>
 
 
<style>
</style>

4. v-model 案例

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
 
 
<script setup lang="ts">
import { ref } from 'vue'
const message = ref("v-model")
</script>
 
 
 
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>