VUE项目是如何启动的

当我们执行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. 绑定和显示流程

  1. HTML 文件中的挂载点

    • index.html 文件中有一个 <div id="app"></div> 元素,这是 Vue 应用的挂载点。
  2. 初始化 Vue 实例

    • main.js 文件中,我们导入了 VueApp 组件,并创建了一个新的 Vue 实例。
    • 使用 render 函数将 App 组件渲染到 Vue 实例中。
    • 最后,使用 $mount 方法将 Vue 实例挂载到 index.html 中的 <div id="app"></div> 元素上。
  3. 根组件中的组件引用

    • App.vue 文件中,我们导入了 HelloWorld 组件,并在 components 选项中注册了它。
    • 在模板中,我们使用 <HelloWorld msg="Welcome to Your Vue.js App"/> 标签来引用 HelloWorld 组件,并传递一个 msg 属性。
  4. 组件的渲染

    • 当 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 servenpm run build 命令时,Vue CLI 会执行以下步骤:

  1. 开发服务器(npm run serve

    • 启动一个开发服务器,通常是使用 webpack-dev-server
    • 开发服务器会动态生成一个 HTML 文件,并在内存中注入必要的 <script> 标签来加载 main.js 和其他资源。
    • 这个动态生成的 HTML 文件会被发送到浏览器。
  2. 生产构建(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 会执行以下步骤:

  1. 代码分割

    • chunk-vendors.js:包含项目依赖的第三方库(如 Vue、Vue Router 等)。这些库通常不会经常更改,因此可以单独打包以提高缓存效率。
    • app.js :包含项目的入口文件 main.js 和其他应用代码。
  2. 生成静态文件

    • 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>

文件解释

  1. chunk-vendors.js

    • 这个文件包含了项目依赖的第三方库。由于这些库通常比较大且不经常更改,单独打包可以提高缓存效率,减少用户的加载时间。
    • 例如,这个文件可能包含 Vue、Vue Router、Axios 等库。
  2. app.js

    • 这个文件包含了项目的入口文件 main.js 和其他应用代码。
    • main.js 文件中的代码会被打包到 app.js 中,包括创建 Vue 实例并挂载到 <div id="app"></div> 的代码
相关推荐
会发光的猪。18 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒19 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun35 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山36 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
程序媛小果1 小时前
基于java+SpringBoot+Vue的桂林旅游景点导游平台设计与实现
java·vue.js·spring boot
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解2 小时前
【深度解析】CSS工程化全攻略(1)
前端·css