# `Vue`工作原理分析
### 一、`vue`是如何嵌入网页
在每一个`vue`的工程里面，都存在一个`index.html`文件，其内容如下：
```html
vue-helloworld
```
可以看到默认的`index.html`什么都没有，但是在通过命令`npm run dev`运行后，我们通过网页查看源代码可以看到：
```html
vue-helloworld
```
通过上面我们可以看到实际上**`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的模式