webpack配置Vue组件

1. 为了实现模块化开发，减少代码的耦合性，不能在一个文件中设置template，应该使用组件来实现模板的功能
2. 在src根目录中新增vue文件夹，创建Vue Component文件，代表Vue组件文件。在文件中分三个标签，template、script、style scoped三个标签。其中,template存放模板内容，script存放js代码，style存放样式代码

<template>
  <div>
    <h2 class="title">{
     {
     title}}</h2>
    <p>{
     {
     message}}</p>
  </div>
</template>

<script>
  export default {
     
    name: "App",
    data() {
     
      return {
     
        message: '你好，webpack配置Vue成功！！',
        title: '配置Vue'
      }
    }
  }
</script>

<style scoped>
  .title {
     
    color: red;
  }
</style>

3. webpack在使用vue文件之前，需要安装vue-loader，输入命令：npm install --save-dev [email protected] vue-template-compiler。在webpack.config.js文件的rules中添加信息

      // 导入Vue组件
      {
     
        test: /\.vue$/,
        use: ['vue-loader']
      }

4. 安装完毕之后，在main.js中导入该组件，并且在Vue实例中添加组件以及模板信息

import App from './vue/App.vue';

new Vue({
     
  el: '#app',
  template: '',
  components: {
     
    App
  }
})

5.打包项目，页面可以正常显示