浅谈vue项目的main.js

浅谈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>标签中的内容完全替换。
    

分享时间：