mikigo blog测开前端学习基础分享
基础部分
TS 与 JS
TS是JS的一个超集，支持静态类型检查。
调试工具（按F12打开浏览器的调试工具）
元素
展示页面元素（html） 页面样式（css）
源代码
展示页面使用的动态脚本（js）
控制台
展示脚本执行的日志 执行调试脚本
网络
展示页面需要的网络调用（接口信息、资源获取信息，包括响应信息和标头）
应用
存储
展示本地存储和会话存储、cookie、缓存等
学习VUE
快速开始
创建项目
npm create vue@latest
npm create vue@latest
Need to install the following packages:
create-vue@3.12.1
Ok to proceed? (y) y
Vue.js - The Progressive JavaScript Framework
✔ 请输入项目名称： … test_frontend
✔ 是否使用 TypeScript 语法？ … 否 / 是
✔ 是否启用 JSX 支持？ … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是
✔ 是否引入 Pinia 用于状态管理？ … 否 / 是
✔ 是否引入 Vitest 用于单元测试？ … 否 / 是
✔ 是否要引入一款端到端（End to End）测试工具？ › 不需要
✔ 是否引入 ESLint 用于代码质量检测？ › 否
正在初始化项目 /home/lufei/Develop/sample/test_frontend...
项目初始化完成，可执行以下命令：
cd test_frontend
npm install
npm run dev启动项目
# ... 按新建项目时提示的命令启动即可
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
# ...访问前端
通过启动项目提示的访问链接，即可打开项目首页
编译和部署
vue代码需要编译成 js，css，html 才能被浏览器解析或执行
npm run dev 可以访问是因为 npm 对 vue 代码进行了动态实时转化，您也因此可以在开发中动态修改代码
npm run build
## 编译命令会生成一个`dist`目录，您可以通过web服务器，将dist目录服务给您的用户项目目录说明
├── dist # 编译生成的静态代码和js文件
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── index.html # 项目首页，用户的访问将从这里开始
├── jsconfig.json # 代码配置文件，保存js相关配置，例如导入路径
├── node_modules # npm install 安装的依赖组件或代码
│ ├── ...
│ ├── vite-plugin-vue-inspector
│ ├── @vue
│ ├── vue
│ └── ... # 实际还会有 vue 和 vite 等其他一些依赖组件
├── package.json # 记录包的元信息
├── package-lock.json # 记录包的详细信息，锁定包版本
├── public # 公共资源目录，可以通过 /public URL 直接访问
│ └── favicon.ico
├── README.md
├── src # vue 源代码目录
│ ├── App.vue
│ ├── assets
│ ├── components
│ └── main.js
└── vite.config.js # vite 配置文件，您可以在这里配置开发服务等vite 是一个 vue 的打包工具，它提供了 vue 的开发服务（npm run dev）和包的编译功能（npm run build）
开始 VUE 代码
从main.js开始
使用 npm create vue@latest 生成的项目，会从 main.js 开始执行 vue 代码。
新建、挂载应用
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')模块导入
## 你需要全局处理的内容，可以放在这里
## 导入样式
import './assets/main.css'
## 导入组件
import ElementPlus from "element-plus";
import TestComponent from "./components/TestComponent.vue";
## 注册组件
app.use(ElementPlus)
app.component("testComponent", TestComponent)组件
组件，在用户端，可以理解为一个页面，一个页面可以由1个根组件和多个子组件组成。
组件代码
组件代码主要包括3个部分：模板（template）、脚本（script，和模板至少有1个）、样式（style，可选）
<script>
// 脚本内容，使用 js/ts 语法，除了 js 逻辑，可以实现 vue 的绑定、响应、生命周期等功能
</script>
<template>
// 模板内容， 使用 html 语法，可以使用 vue 指令，实现条件、循环等渲染功能
</template>
<style>
// 样式，使用 css 语法，可以使用 vue 组件中的变量值
</style>使用组件
<script setup>
// 导入组件
import TestComponent from "./components/TestComponent.vue"
</script>
<template>
<!-- 使用组件 -->
<TestComponent />
</template>组件引用
可以在父组件中，引用子组件，使用子组件暴露的对象(变量、方法)
<script setup>
import {ref} from "vue"
import TestComponent from "./components/TestComponent.vue"
const testRef = ref(null)
// 使用 testRef 即可引用组件
console.log("sayHi in TestComponent:", testRef.sayHi())
</script>
<template>
<TestComponent ref="testRef" />
</template>组件 Props
Props 可以理解为组件的属性，可以在使用组件的时候，传入 props
子组件 components/TestComponent.vue 内容：
<script setup>
const props = defineProps(['name'])
</script>
<template>
<div>{{ name }}<div>
</template>在父组件 App.vue 中使用组件：
<template>
<TestComponent name="test1" />
</template>
<script setup>
import TestComponent from "./components/TestComponent.vue"
</script>属性透传：如果自组件未定义 props，但是父组件传递了属性，子组件会将属性传递给自身的子节点。
组件 Slots
slots 为组件插槽，用来为组件传递模板内容
子组件TestComponent
<template>
<div>
<slot>
<!-- 这里可以定义插槽的默认内容 -->
</slot>
</div>
</template>父组件
<template>
<TestComponent>
<!-- 父组件传递的插槽内容 -->
</TestComponent>
</template>
<script setup>
import TestComponent from "./components/TestComponent.vue"
</script>具名插槽：当需要多个插槽时，可以使用
<slot>的name属性指定插槽，而在父组件中，使用v-slot:<name>为指定的插槽传递内容
事件
子组件可以注册事件，并被父组件捕获并响应。
子组件
<script setup>
const emit = defineEmits(['refresh'])
function buttonClick() {
// 触发事件
emit('refresh')
}
</script>父组件
<script setup>
import TestComponent from "./components/TestComponent.vue"
// 父组件的事件处理函数
function onChileRefresh() {
console.log("child refreshed")
}
</script>
<template>
<TestComponent @refresh="onChileRefresh" />
</template>