vue3基础流程

news2024/12/23 18:44:40

1. 安装和创建项目

2. 项目结构

3. 主要文件解析

3.1 main.js

3.2 App.vue

4. 组件和Props

5. 事件处理

6. 生命周期钩子

7. Vue 3的Composition API

8. 总结和结论

响应式系统：

组件化：

易于学习：

灵活性：

社区规模：

生态系统：

1. 安装和创建项目

首先，你需要安装Node.js和npm。然后，你可以使用Vue CLI来创建一个新的Vue 3项目：

npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

这将创建一个新的Vue 3项目，并启动一个开发服务器。

2. 项目结构

Vue 3项目通常包含以下目录和文件：

node_modules/: 存放项目依赖的目录。
public/: 存放静态资源的目录。
src/: 存放源代码的目录。
- assets/: 存放静态资源的目录。
- components/: 存放Vue组件的目录。
- App.vue: 主组件文件。
- main.js: 入口文件。
package.json: 存放项目元数据和依赖信息的文件。
vue.config.js: Vue CLI配置文件。

3. 主要文件解析

3.1 `main.js`

这是Vue应用的入口文件。它创建一个Vue实例，并将其挂载到DOM元素上。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

3.2 `App.vue`

这是主组件文件，它定义了应用的根组件。

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

4. 组件和Props

组件是Vue应用的基本构建块。你可以将UI分解为一系列的组件，每个组件负责一部分UI的渲染和交互。

Props是一种特殊的属性，你可以用它将数据从父组件传递到子组件。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :myProp="someData" />
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      someData: 'Hello from parent'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ myProp }}</div>
</template>

<script>
export default {
  props: ['myProp']
}
</script>

5. 事件处理

你可以使用v-on指令或@符号来监听DOM事件，并在事件发生时执行一些JavaScript代码。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!')
    }
  }
}
</script>

6. 生命周期钩子

Vue组件有一系列的生命周期钩子，你可以在这些钩子中执行代码，以响应组件生命周期的不同阶段。

<script>
export default {
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

7. Vue 3的Composition API

Vue 3引入了Composition API，这是一组新的API，允许你更灵活地组织组件的逻辑。

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      count,
      increment
    }
  }
}
</script>