2.1 KiB
2.1 KiB
Vue工作原理分析
一、vue是如何嵌入网页
在每一个vue的工程里面，都存在一个index.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运行后，我们通过网页查看源代码可以看到：
<!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选项，可以指定挂载的元素，将根组件渲染到页面上。