VUE项目是如何启动的

news2024/11/13 3:36:57

当我们执行npm run serve,vue就会启动到这个界面，这个流程是怎么的

下典型的 Vue CLI 项目结构：

`public/index.html`

这是项目的主 HTML 文件，Vue 应用会被挂载到这个文件中的 <div id="app"></div> 元素上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
    <title>My Vue App</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

`src/main.js`

这是项目的入口文件，负责初始化 Vue 实例并将其挂载到 index.html 中的 <div id="app"></div> 元素上。

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

`src/App.vue`

这是根组件，所有的其他组件都会在这个组件中组合和渲染。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

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

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

<style>
/* 样式代码 */
</style>

`src/components/HelloWorld.vue`

这是 HelloWorld 组件，它会在 App.vue 中被引用和渲染。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      This is a simple example of a Vue component.
    </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
};
</script>

<style scoped>
/* 组件内部的样式代码 */
</style>

3. 绑定和显示流程

HTML 文件中的挂载点：
- index.html 文件中有一个 <div id="app"></div> 元素，这是 Vue 应用的挂载点。
初始化 Vue 实例：
- 在 main.js 文件中，我们导入了 Vue 和 App 组件，并创建了一个新的 Vue 实例。
- 使用 render 函数将 App 组件渲染到 Vue 实例中。
- 最后，使用 $mount 方法将 Vue 实例挂载到 index.html 中的 <div id="app"></div> 元素上。
根组件中的组件引用：
- 在 App.vue 文件中，我们导入了 HelloWorld 组件，并在 components 选项中注册了它。
- 在模板中，我们使用 <HelloWorld msg="Welcome to Your Vue.js App"/> 标签来引用 HelloWorld 组件，并传递一个 msg 属性。
组件的渲染：
- 当 Vue 实例挂载完成后，App.vue 的模板会被解析并渲染到 <div id="app"></div> 元素中。
- App.vue 中的 <HelloWorld> 标签会被替换为 HelloWorld.vue 组件的内容。

new Vue({ render: h => h(App), }).$mount('#app'); 是如何负责初始化 Vue 实例并将其挂载到 index.html 中的 <div id="app"></div> 元素上的，没有看到和 index.html关联

这是因为 main.js 的加载是由构建工具（如 Webpack）在构建过程中自动处理的。

当你运行 npm run serve 或 npm run build 命令时，Vue CLI 会执行以下步骤：

开发服务器（npm run serve）：
- 启动一个开发服务器，通常是使用 webpack-dev-server。
- 开发服务器会动态生成一个 HTML 文件，并在内存中注入必要的 <script> 标签来加载 main.js 和其他资源。
- 这个动态生成的 HTML 文件会被发送到浏览器。
生产构建（npm run build）：
- 使用 Webpack 将源代码打包成一个或多个优化后的文件，通常放在 dist 目录中。
- 生成一个静态的 index.html 文件，并在其中插入必要的 <script> 标签来加载打包后的文件。
- 这个静态的 index.html 文件会被部署到服务器上。

5. 动态生成的 HTML 文件

在开发模式下，webpack-dev-server 会动态生成一个类似于以下内容的 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>My Vue App</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="/js/chunk-vendors.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </body>
</html>

生产构建过程

当你运行 npm run build 命令时，Vue CLI 使用 Webpack 进行生产构建。Webpack 会执行以下步骤：

代码分割：
- chunk-vendors.js：包含项目依赖的第三方库（如 Vue、Vue Router 等）。这些库通常不会经常更改，因此可以单独打包以提高缓存效率。
- app.js：包含项目的入口文件 main.js 和其他应用代码。
生成静态文件：
- Webpack 会生成一个静态的 index.html 文件，并在其中插入必要的 <script> 标签来加载这些生成的 JavaScript 文件。

生成的 `index.html` 文件

在生产构建后，生成的 index.html 文件看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>My Vue App</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script type="text/javascript" src="/js/chunk-vendors.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </body>
</html>

文件解释

chunk-vendors.js：
- 这个文件包含了项目依赖的第三方库。由于这些库通常比较大且不经常更改，单独打包可以提高缓存效率，减少用户的加载时间。
- 例如，这个文件可能包含 Vue、Vue Router、Axios 等库。
app.js：
- 这个文件包含了项目的入口文件 main.js 和其他应用代码。
- main.js 文件中的代码会被打包到 app.js 中，包括创建 Vue 实例并挂载到 <div id="app"></div> 的代码