vue3基础流程

🙂博主：锅盖哒
🙂文章核心：vue3基础流程

目录

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>

---

8. 总结和结论

Vue 3提供了一套强大而灵活的工具，用于构建现代Web应用。它的主要优点包括：

• 响应式系统：

• Vue的响应式系统可以自动跟踪数据的变化，并更新DOM，使得开发者可以专注于应用逻辑，而不是DOM操作。

• 组件化：

• 通过将UI分解为一系列的组件，Vue使得代码更易于管理和维护。

• 易于学习：

• Vue的API设计简单直观，易于上手。

• 灵活性：

• Vue不强制使用某种开发模式，提供了多种方式来组织代码。

然而，Vue也有其缺点，例如：

• 社区规模：

• 虽然Vue的社区正在快速增长，但它仍然没有达到React或Angular的规模。

• 生态系统：

• 虽然Vue有很多可用的库和工具，但它们的数量和质量仍然不如React或Angular。

总的来说，Vue 3是一个强大、灵活且易于学习的前端框架，非常适合用于开发现代Web应用。