简单认识Vue项目是怎么样运行

在Vue项目中

index.html作为项目的入口,这是为什么呢?

1、index.html中,只有一个div标签,标签中id为app

2、我们查看src文件夹下的main.js(这个是App.vue连接index.heml的关键)

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
main.j中创建了vue实例,其中el(绑定标签)绑定了index.html中的id=app
components组件绑定了./App组件名字为App(这个可以自定义命名)

需要先引入组件,然后再使用template模板

template: '<App/>'表示在html的<div id="app"></div>为将被<App></App>给替代
替代的内容是App.vue组件的全部内容
上一篇:CSS的简介


下一篇:html 头部