Vue项目开发流程

上篇我们介绍了工程化的 Vue 项目，将 Vue 项目启动起来并访问到了首页面。接下来，我们来分析如何访问到 Vue 项目的首页面，也就是 Vue 项目的开发流程。

现在访问的页面是 Vue 项目默认的首页 index.html，它是在创建 Vue 项目后，public 目录下自带的页面。在 index.html 中默认引入了入口文件 main.js。

main.js 是 Vue 项目的入口文件，其中引入了很多公共组件，比如 App.vue 组件，使用了关键字 import 引入模块，与 import 对应的还有 export 关键字，export 用于将对象或函数导出为模块。比如通过 import App from './App.vue'，代表导入当前目录下的 App.vue 组件，并命名为 App。 

在 main.js 中，除了导入 App 根组件，还导入了 vue 对象和后续要用的 router 路由信息。之后创建了 vue 核心对象 Vue，并将 Vue 对象实例挂载到 #app 区域，该区域指的是 index.html 界面中 div 的区域。创建 Vue 对象时指定了 router 路由和 render 函数，render 函数用于将导入的 app 组件中定义的视图创建出对应的虚拟 DOM 元素并挂载到 #app 区域。Vue 对象的定义方式和之前通过 el 指定挂载元素的方式一致，在 ES6 中，如果属性名和属性值一致，冒号后的部分可省略，直接简写为 router。

接下来介绍入口文件中引入的 App.vue。在 Vue 项目中，以.vue 结尾的文件称为组件文件，每个组件由三部分组成：template、script、style。

template 是模板部分，用于生成 HTML 代码，可以定义原生 HTML 代码。

script 部分定义的是 JS 代码，主要控制模板的数据来源和行为。

style 部分用于控制 CSS 样式。

main.js中引入根组件：

到 vscode 查看 App.vue 根组件的组成部分，可看到有 template 模板部分和 style 部分，但没有 script，需要我们在里面定义一段 script 标签。定义之前先删掉默认根组件中的信息，template 部分一般需要有一对根标签，通常是 div，保留 div。删掉 style 中所有 CSS 样式。在 script 中编写代码，需选择倒数第二个 Javascript.vue，前面加上关键字 export，将定义的对象导出成模块，方便在其他地方通过 import 导入。

<template>
  <div>
    <h1>{{message}}</h1>
  </div>
</template>
<script>
export default {
  data(){
    return{
      message:"Hello vue"
    }
  },
  methods:{
    
  }
}
</script>
<style>

</style>

写好代码后打开浏览器，“hello vue”会展示出来，数据模型变化时页面展示也会跟着变化，这就是一个最简单的组件。 

 

---

在 Vue 项目中，index.html、main.js和根组件之间有着密切的关联，

• index.html 是项目的默认首页，也是整个应用的 HTML 模板。它通常包含一个用于挂载 Vue 应用的容器元素，例如 <div id="app"></div> 。
• main.js 是项目的入口文件，负责创建 Vue 实例、注册全局组件、引入路由（如果有）、引入其他必要的依赖等。在 main.js 中，会通过 new Vue() 创建 Vue 实例，并将根组件挂载到 index.html 中指定的容器元素上。
• 根组件（通常是 App.vue）是 Vue 应用的起始组件，它可以包含子组件、路由视图（如果使用了路由）、数据、方法等。根组件的结构和内容决定了整个应用的初始布局和功能。

注意：

在 Vue 项目开发中，main.js 和首页 index.html 很少操作，主要操作的是组件文件（.vue 文件）。

---

END 

---

学习自：黑马程序员——JavaWeb课程