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 脚本文件。