第二篇初始化项目main.js 的挂载

最新推荐文章于 2025-07-11 17:44:07 发布

原创最新推荐文章于 2025-07-11 17:44:07 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

node+vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

node+vue 入门篇

2 篇文章

订阅专栏

本文介绍了Vue项目的标准文件结构，包括关键的组成部分如App.vue、main.js及其内部配置。详细解释了main.js中的核心代码，如Vue实例创建、挂载元素及渲染函数的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目结构

src 结构

├── App.vue                          APP入口文件            
├── main.js                         // 项目配置文件    
├── components                      // 组件文件夹                  
├── router                          // 路由配置文件夹
│   └── index.js                    // 路由配置文件

main.js 代码解析

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,       
  render: h => h(App)   
})

注解 

// 1, routes（缩写）相当于 routes: routes

// 2, render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来

   // 写法 1
   new Vue({
          router,
          //components: { App }  vue1.0的写法
          render: h => h(App)    vue2.0的写法
          }).$mount('#app')
    // 写法 2 
   new Vue({
      el: '#app',
      // store,
      // router,
      template: '<App/>',
      components: {App}
     })
PS : 还有   el: '#app', 或.$mount('#app')手动挂载写法