vue 入口文件 - daniel-qa/Vue GitHub Wiki

vue 入口文件

  • ../src/main.js
import './css/site.css'
import './css/less-variable.less'
import { app } from './boot-app'

app.$mount('#app')

import { app } from './boot-app':

这行代码从 boot-app 模块导入了一个名为 app 的对象或组件。通常情况下,这会是一个 Vue 实例或 Vue 根组件。boot-app 可能是包含 Vue 应用程序配置和初始化逻辑的文件。

app.$mount('#app'):

这行代码将 Vue 实例或根组件挂载到 DOM 元素上。#app 是一个 DOM 选择器,表示 Vue 应用将挂载到具有 id="app" 的元素上。通常,这个元素是在 index.html 文件中定义的,


1. 找到入口文件

在 Vue.js 项目中,通常会有一个主入口文件(例如 main.js 或 index.js),它是 Vue 应用的启动点。这个文件通常位于项目的 src 目录中

示例目录结构

my-vue-app/
├── public/
│   └── index.html
└── src/
    ├── assets/
    ├── components/
    ├── views/
    ├── App.vue
    ├── main.js        // 这是入口文件
    └── router.js

2. 查看 main.js 文件

在 src/main.js 文件中,你通常会看到 Vue 实例的创建和应用挂载的代码。这是 Vue 应用程序的启动点

示例 main.js 文件

javascript

import Vue from 'vue';
import App from './App.vue';  // 引入根组件
import router from './router';  // 引入路由配置
import store from './store';    // 引入 Vuex 状态管理

Vue.config.productionTip = false;  // 禁用生产环境提示

new Vue({
  router,  // 注册路由
  store,   // 注册 Vuex
  render: h => h(App)  // 渲染根组件
}).$mount('#app');  // 挂载 Vue 实例到 id 为 app 的 DOM 元素上

3. 调试 Vue.js 应用

确定入口点

在 Vue.js 应用中,真正的入口点通常在 main.js 文件中,该文件会初始化 Vue 实例并挂载到 DOM 上

由于你的 HTML 动态加载了 Vue.js 文件(vue.js),你可以在浏览器的开发者工具中查看 vue.js 脚本文件。