vue2.x笔记7-webpack详解(2)

webpack中配置vue

项目中使用Vuejs，那么必然需要依赖，所以需要先安装，因为后续在实际项目中也会使用vue，所以不是开发时依赖，直接安装

npm install vue@2.5.21 --save

按之前学习的方式使用vue

打包运行，打包过程中没有错误，但是运行程序，没有出现效果，而且浏览器中报错

这个错误是说我们使用的是runtime-only版本的Vue，需要修改webpack的配置

resolve: {
  // alias: 别名
  // runtime-only ->代码中，不可以有任何的template
  // runtime-compiler ->代码中，可以有template，因为有compiler可以用于编译template
  alias: {
    vue$: "vue/dist/vue.esm.js",
  },
},

重新打包，运行显示正常 

正常运行后，考虑另外一个问题

        如果希望将data中的数据显示在界面中，就必须修改index.html

        如果后面自定义了组件，就必须修改index.html

        但是实际项目中，并不希望手动的频繁修改，怎么解决呢

定义template属性

        在上面的Vue实例中，定义了el属性，用于和index.html中的#app绑定，让Vue实例后可以管理其中的内容

        这里，可以将div元素中的{ {msg}}删掉，只保留一个id为app的元素

        然后在Vue实例中定义一个template属性

new Vue({
    el: '#app',
    template: `<div id="app">{
  {msg}}</div>`,
    data: {
        msg: 'hello vue'
    }
})

 重新打包运行，显示结果和之前一样

el和template模板的关系

        el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等

        如果Vue实例中同时指定了template，那么template模板的内容将会替换掉挂载的对应el模板

这样，在以后的开发中就不需要再操作index.html了，只需要修改template中对应的标签即可

但是，template模板写起来有很麻烦，这时可以对template模板中的内容进行抽离，分成三部分：template、script、style书写，结构就会非常清晰

.vue文件封装处理