# `Vue`工作原理分析

### 一、`vue`是如何嵌入网页

​		在每一个`vue`的工程里面，都存在一个`index.html`文件，其内容如下：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-helloworld</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

```

​		可以看到默认的`index.html`什么都没有，但是在通过命令`npm run dev`运行后，我们通过网页查看源代码可以看到：

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-helloworld</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

```

​		通过上面我们可以看到实际上**`vue`的工程在编译后是会注入`app.js`。所以`vue`实际渲染的任何内容实际上还是通过`javascript`实现的。**

### 二、`app.js`是什么

​		在上一节中，我们看到了`app.js`但是实际上，我们在工程中却找不到`app.js`。

#### 2.1 `main.js`功能和作用

​		 `main.js` 是程序入口文件，初始化`vue`实例，并引入使用需要的插件和各种公共组件。其功能作用如下：

> - 创建Vue实例：在main.js中，需要创建一个Vue实例，这个实例将作为整个应用的入口。通过传入一个配置对象，可以配置Vue实例的各种选项，如el、data、methods等。
>
> - 引入其他模块：在main.js中，可以引入其他的模块，如路由、状态管理等。通过引入这些模块，可以让应用具备更多的功能和扩展性。
>
> - 注册全局组件：在main.js中，可以注册全局组件，这些组件将在整个应用中都可以使用，无需再次导入。
>
> - 挂载根组件：在main.js中，需要将根组件挂载到HTML页面上的某个元素上。通过设置el选项，可以指定挂载的元素，将根组件渲染到页面上。

#### 2.2 Vue Router的模式