浅谈vue项目的main.js
main.js 中的内容解释
本人主要是后端开发,最近学习微服务架构开发,前后端分离。 接触到了vue的项目。所以分享一下自己最近对main.js的见解。本人不是前端开发人员,所以大佬们看到了不对之处 请指出。大家共同学习。
项目启动,首先是main.js文件。main.js的内容如下:
// 导入vue
import Vue from 'vue'
// 导入 位置:src/App.vue
import App from './App'
// 导入路由 位置:src/router/index.js
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app', //接管 index.html 中的 <div id="app"></div>
router, // 等同于router:router(上方已经导入)
components: {
App }, // 加载的组件(上方已经导入)
template: '<App/>' //将 index.html中的 <div id="app"></div> 替换为 App.vue中的内容。
})
1. el: ‘#app’
el: '#app'的作用是 接管 index.html 中的 <div id="app"></div>。
那么如何证实呢?
1.1 我们启动项目,观察界面
- 可以看到正常
1.2 更改index.html 中的div 的id属性
- 看到页面不能得到渲染
2. router
等同于 router: router
不解释,因为是ES6 语法规则。
3. components: { App }
加载上方导入到组件。
等同于 :
components: {
App: App
}
4. template: ‘<App/>’
这个的意思,根据我的理解是,选择哪一个组件去替换index.html 中的<div id="app"></div>。
上方只加载了一个App组件。
- 那么如何证明我的猜想是正确的呢?
- 首先我们创建一个组件。并导入。
- 将template: ‘<App/>’ 改为 template: '<HelloVue/>'
- HelloVue.vue代码如下:
- 我们再次查看页面结果如下,可以看到我们的猜想是正确的。
- 同时我们也能发现 index.html中的<div id=“app”> 被HelloVue.vue <template>标签中的内容完全替换。