webpack配置vue之进阶

之前的项目还是在main.js文件中创建一个vue实例，并定义数据，然后在index.html文件中挂载这个实例

现在我们不在index.html文件中写
{{message}}
直接就定义一个div就可以了

 然后在main.js中，直接定义一个template  执行npm run build 可以看到执行没有错误

点击浏览器，

所以，以后我们的index.html文件就再也不用修改了，一次写好，一直可以用
相关的代码直接在 main.js 文件中写就可以了

el和template区别（一）
正常运行之后，我们来考虑另外一个问题：
如果我们希望将data中的数据显示在界面中，就必须是修改index.html
如果我们后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？
定义template属性：
在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
这里，我们可以将div元素中的{{message}}内容删掉，只保留一个基本的id为div的元素
但是如果我依然希望在其中显示{{message}}的内容，应该怎么处理呢？
我们可以再定义一个template属性，代码如下：

重新打包，运行程序，显示一样的结果和HTML代码结构
那么，el和template模板的关系是什么呢？
在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。
这样做有什么好处呢？
这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可