entry: {
app: './src/main.js'
},
// ...
}
说明我们的入口文件就是
src 目录下的
main.js 文件。看看代码：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
看看这里面做了什么事情：
引入
vue 并起名叫作
Vue引入根目录下的
App.vue 文件(后缀名可不要)引入
router 文件下的
index.js 文件(文件夹后没有具体的文件，默认引入的就是
index.js 文件)通过
new 实例化
Vue 实例 ，实例化的时候声明了几个属性：
el：'#app'：意思是将所有视图放在
id 值为
app 这个
dom 元素中，也就是项目根目录下的
index.html 中的那个
div :
<div id="app"></div>；
components: { App }：意思是将上面引入的
App.vue 文件的内容将以
<App/> 这样的标签写进
<div id="app"></div> 中；在开始的时候，我们并没有介绍说
Vue 使用的是虚拟
DOM ，那么，从这里我们看出，
Vue 使用的也是虚拟
DOM (和
React是一样的)。这里对虚拟
作下简单介绍：当我们修改应用程序时，不会对DOM进行更改，而是创建以DOM数据结构形式存在的JavaScript
