vue-cli中的main.js中 new Vue 中的template属性啥意思

Posted 2023-05-05

new Vue就是index.html中id(el:'#app')div替换成</App>组件渲染出来的东西，router这些都是解构赋值，就是一些选填参数 参考技术A App 作为组件引入了，在components里注册过
然后再template里写<App />
不是和你在app.vue引入header.vue，然后再app.vue的template里写<header />一样意思吗
同新手 我是这样理解的不知道对不对
就是给这个Vue实例初始一个App组件作为template 相当于默认组件吧！本回答被提问者采纳

将变量从main.js暴露给vue-cli项目中的其他脚本

我需要从webpack生成的.js文件外部访问我的vue-cli项目的main.js中声明的Vue实例。在main.js，我有：

var vm = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

但是，因为webpack将此代码包装在函数中并将其缩小，所以永远无法从脚本外部访问vm变量。我该如何解决这个问题并确保可以从其他脚本访问vm变量？

所有webpack设置都是vue-cli提供的默认设置。

答案

您可以导出Vue实例并将其导入其他脚本中。

export const vm = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

要在其他脚本中访问它，只需使用

import { vm } from 'path/main.js'

另一答案

你可以把它放在window上

window.myComponent = new Vue({
  store,
  render: h => h(App)
}).$mount('#app');