1. 主要文件
project目录下index.html文件
project/src目录下的main.js
project/src目录下的app.vue
2. 关系
index.html文件下
<body> <div id="{字段1}" class="test">{index文件中div块中的内容.msg}</div> <!-- {<script>} --> </body>
main.js文件下
new Vue({ el: '#字段2', router, components: { App }, template: '<App/>' })
1. 程序发布时,无论字段1和字段2是否匹配,都将在index.html中添加一条script引入app.js的代码(这应该是由配置文件控制的)
2. 当字段1和字段2相匹配时,引入的js才会起作用,否则无效果。 (即:生成js文件,并通过el字段绑定到index.html中的相应dom)
3. 当js文件起效果时,将会用app.vue中的模板内容替换掉div="app"中的内容(其实应该说:1.渲染<div id="app">元素,2.移除该dom元素并渲染出app.vue中的模板,样式什么的,也是用app.vue里面的)
PS:浏览器速度够慢的话,是可以看到<div id="app">里面的内容一闪而过的。
<body> <div id="app" class="这个class样式也是一闪而过">一闪而过</div>如果这里还有内容,它是会显示的,而且不会被替换掉。 <script type="text/javascript" src="/app.js"></script> </body>
以上:经过确切测试,大致表象是这样,只学了几天vue的我,并不懂其内涵。
以下:猜测,指不定是错的,看官看看就好~欢迎批评留言
import App from './App' 相当于 const App = { template:?,data(){return{}}}
其实就是引入组件对象(非实例,组件对象是给Vue实例调用的),并命名为App
components:{App}, Vue实例使用components字段声明其具有的子组件App,在绑定了Vue实例的dom元素上,可通过<App/><App>调用该子组件
template: '<App/>'
#Vue实例使用template字段声明了一个模板,其模板即为<App/><App>(我猜:该字段是用于生成的js文件的,js文件实质上是用该模板替换了index.html下的<div id="App">)