Vue如何加载main.js

原文源自:https://blog.youkuaiyun.com/grape875499765/article/details/75279343

在工程文件中使用main.js来加载App.vue文件的,但没有代码写出来加载main.js的,而index.html中只有一个自定义标签app,那么工程是如何加载到main.js文件的呢?

如果你是用vue.js官网提供的脚手架工具并沿用默认配置的话, 你执行npm run dev的时候会出来页面, 是因为你根目录下的package.json文件里script配置了:

"dev": "node build/dev-server.js",

也就是其实执行的是dev-server.js这个文件,里面有定义。

var webpackConfig = require('./webpack.dev.conf');

因为我们这个脚手架工具里是用webpack来打包项目文件的,依赖的webpack.dev.conf文件里又定义了。

var baseWebpackConfig = require('./webpack.base.conf');

在这个依赖webpack.base.conf文件里面entry入口文件就配置了。

app: './src/main.js'

所以当你运行npm run dev的时候就从main.js这个入口文件开始执行了。

### Vue 3 中 `main.js` 和 `main.ts` 的区别及用法 在 Vue 3 项目初始化过程中,开发者可以选择使用 JavaScript 或 TypeScript 来编写入口文件。当选择 JavaScript 时,默认创建的是 `main.js`; 若选择了 TypeScript,则会生成 `main.ts` 文件。 #### 使用 JavaScript (`main.js`) 初始化应用实例 对于基于 JavaScript 构建的应用程序而言,在 `main.js` 文件里主要完成的工作包括引入核心库、配置全局组件以及挂载根实例到 DOM 节点上[^1]: ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 此段代码展示了如何通过调用 `createApp()` 方法来构建一个新的应用程序实例,并将其关联至 HTML 页面中的特定元素之上。 #### 使用 TypeScript (`main.ts`) 增强类型安全性和开发体验 而采用 TypeScript 编写的 `main.ts` 不仅可以实现上述功能,还能够利用静态类型检查机制提升编码质量并减少运行时错误的发生概率。下面是一个简单的例子说明了怎样定义带有类型的选项对象[^2]: ```typescript // main.ts import { createApp, defineComponent } from 'vue'; import App from './App.vue'; const app = createApp(defineComponent({ name: "Main", })); app.mount("#app"); ``` 值得注意的是,在实际项目中通常还会涉及到更多复杂的设置项,比如路由管理 (Router) 和状态管理模式 (Vuex),这些都可以按照官方文档指导无缝集成进来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值