59 lines
2.1 KiB
Markdown
59 lines
2.1 KiB
Markdown
|
# `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的模式
|