Vuejs--13创建Vue时template和el的关系、VUE文件来封装组件

1、创建Vue时template和el的关系

当template和el并存。编译执行时template会取代挂载el

<div id="app">
</div>

new Vue({
  el:"#app",
  template:`
  <div>
    <div>{{msg}}</div>
    <div>测试替换</div>
  </div>
  `,
  data:{
    msg:"webpack安装"
  }

})

进化版

在Vue中注册组件，然后template中设置标签使用

const newTemplate={
  template:`
  <div>
    <div></div>
    <div>测试替换</div>
  </div>
  `
}

new Vue({
  el:"#app",
  template:`<newTemplate/>`,
  data:{
    msg:"webpack安装"
  },
  components:{
    newTemplate,
    
  }
})

进化版----使用 VUE文件

创建后缀名.vue文件

<template>
  <div>
    <div></div>
    <div class='title'>测试替换</div>
  </div>
</template>
<script>
export default {
  name:"newTemplate"  
}
</script>
<style scoped>
  .title{
    color: red;
  }
</style>

npm run build
报错：You may need an appropriate loader to handle this file type.
安装 vue-loader、vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
配置 webpack.config.js
配置loader

 {
            test: /\.vue$/,
            use: {
              loader: 'vue-loader',
              
          }

报错：vue-loader was used without the corresponding plugin.
原因：貌似13版本以上的的还需查安装插件
修改： package.json 降低版本

   "vue-loader": "^13.0.0",   

npm install 加载依赖

附：文件后缀名问题
解决 import文件路径需要完成路径名
修改webpack.config.js

resolve:{
      extensions:['.js','.vue','.css'],
      alias:{
        'vue$':'vue/dist/vue.esm.js'
      }
    }