Vue 项目开发全流程解析_vue 编写代码的流程-CSDN博客

本文链接：https://blog.csdn.net/m0_57836225/article/details/144172697

Vue.js 作为一款流行的前端框架，其开发流程对于构建高效、可维护的 Web 应用至关重要。在这篇博客中，我们将详细介绍 Vue 项目的开发流程，帮助大家快速上手并深入理解 Vue 项目的构建过程。

项目启动
在创建并启动 Vue 项目后，我们首先会访问到一个默认页面。这是因为在 Vue 项目中，存在一个名为index.html的文件，它作为项目的默认首页。在src目录下，还有两个关键文件：app.vue（根组件）和main.js（入口文件）。这三个文件共同构成了 Vue 项目的基础架构。
文件关联分析
当浏览器访问 Vue 项目时，实际访问的是index.html。在该页面中，通过<script>标签导入了main.js文件，此时main.js中的代码开始执行。在main.js里，有一行代码import app from './app.vue'，这意味着它导入了根组件app.vue。同时，main.js还通过import { createApp } from 'vue'导入了 Vue 提供的createApp函数（这里的导入是从本地node_modules目录中获取，因为在项目创建时已将 Vue 相关内容下载到本地）。然后，调用createApp函数创建一个 Vue 应用实例，并通过mount函数控制HTML元素，这里的#app对应index.html中某个div的id值，最终 Vue 会接管该div。在main.js中导入app.vue并将其作为参数传递给createApp函数，这就使得app.vue中的内容能够展示在首页的div中。因此，在实际开发中，我们主要关注app.vue文件的编写，而index.html和main.js中的代码大部分自动生成，一般无需修改。

文件组成
app.vue是 Vue 项目中的组件文件，也称为单文件组件。它将一个组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在同一个文件中。具体来说，<script>标签内编写逻辑代码，用于控制模板的数据和行为；<template>标签内是模板部分，最终会生成展示在浏览器上的HTML；<style>标签用于编写样式，控制组件展示效果。
代码演示
- 首先，打开app.vue文件，将其中的内容全部清空，以便重新编写。
- 在<template>标签内添加一个<h1>标签，如<h1>北京</h1>。保存文件后，回到浏览器，此时页面上会展示出 “北京” 字样。
- 若要控制 “北京” 的样式，在<style>标签内编写样式代码。例如，添加注释后，编写h1 { color: red; }，保存后浏览器中的 “北京” 字样会变为红色。
- 接下来演示JavaScript代码的两种书写风格。
  - 第一种风格：

export default {
  data() {
    return {
      msg: '上海'
    };
  }
};

然后在<template>标签内将之前的 “北京” 改为差值表达式{{ msg }}，保存后浏览器中的内容会变为 “上海”。

<script setup>
import { ref } from 'vue';
const msg = ref('西安');
</script>

同样在<template>标签内使用差值表达式{{ msg }}绑定，保存后浏览器会展示 “西安”。

Vue 项目的入口文件是main.js。
Vue 的单文件组件（app.vue）包含三个部分：
- <script>：逻辑部分，用于控制组件的数据和行为。
- <template>：生成最终展示的HTML。
- <style>：编写样式，控制组件展示效果。在实际开发中，我们重点编写app.vue文件来构建 Vue 项目的各个组件，从而实现丰富的页面功能和交互效果。

通过以上步骤，我们对 Vue 项目的开发流程有了一个全面的了解。希望大家在实际项目开发中，能够熟练运用这些知识，构建出高质量的 Vue 应用程序。如果在学习过程中有任何疑问，欢迎随时交流。