Vue（2）——脚手架与组件化开发

1. VueCLI

• 安装npm i @vue/cli -g
• 创建vue项目vue create 项目名称
  • 可以选择模板：vue3、vue2、手动选择功能
• 项目目录结构
  • package.json：scripts中设置了一些命令
    • serve：打开一个本地的静态资源服务器 npm run serve
    • build：代码打包(打包的代码在dist目录下) npm run build
  • node_modules：第三方工具
  • public：不参与编译的资源
  • src：参与编译的资源
    • components（组件：包含了结构、样式和逻辑）：保存自定义组件功能
    • App.vue：根组件
    • main.js：Vue应用的入口文件，对vue进行了基础配置
• config：各种配置文件

2. 组件通信

2.1 父传子：通过props进行处理

//App.vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')
</script>

<template>
  <ChildComp :msg="greeting" />
</template>

//ChildComp.vue
<script setup>
const props = defineProps({
  msg: String
})
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

2.2 子传父：通过emits进行处理

//App.vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

//ChildComp.vue
<script setup>
const emit = defineEmits(['response'])

emit('response', 'hello from child')
</script>

<template>
  <h2>Child component</h2>
</template>

3. 组件插槽

//App.vue
<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

//ChildComp.vue
<template>
  <slot>Fallback content</slot>
</template>