#测开前端学习基础分享

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

# ...

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 配置文件，您可以在这里配置开发服务等

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)

<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>

<script setup>
const props = defineProps(['name'])
</script>
<template>
      <div>{{ name }}<div>
</template>

<template>
     <TestComponent name="test1" />
</template>
<script setup>
import TestComponent from "./components/TestComponent.vue"
</script>

<template>
<div>
<slot>
<!-- 这里可以定义插槽的默认内容 -->
</slot>
</div>
</template>

<template>
<TestComponent>
<!-- 父组件传递的插槽内容 -->
</TestComponent>
</template>
<script setup>
import TestComponent from "./components/TestComponent.vue"
</script>

<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>