您的位置：首页 >> Vue >> 《和小米一起学Vue.js》— vue单文件组件

《和小米一起学Vue.js》— vue单文件组件

[

孤狼 |

2022-07-30 03:03:25 |

Vue |

1886°C |

0条评论 ]

在vue项目开发中，一般index.html文件是不会进行修改的，所以，一般组件的内容也不会放到index.html文件里，vue通过单文件组件方式来加载需要的模板。

原理

在一个vue实例中，当 el 和 template 属性同时存在时，vue会用 template 内容替换 el 绑定的元素。所以只需要template内容为组件内容即可直接替换内容，同时，组件可以写成单独文件的格式，方便管理。

单文件组件

新建一个目录vue，并在内部新建一个文件app.vue

<template>
  <div>
    <h1>{{ss}}</h1>
  </div>
</template>

<script>
  export default{
    name:"app",
    data(){
      return {
        ss:'单组件内容'
      }
    }
  }
</script>

<style scoped>
  h1{color:blueviolet;font-size:20px;}
</style>

修改main.js文件

将要显示的模板内容，放到main.js文件内

import Vue from "vue";
import App from './vue/app.vue'

new Vue({
  el:"#app",
  template:'<App><App/>',
  components:{
    App
  }
});

修改index.html文件

index.html文件，只需要保留主入口即可

<body>
  <div id="app"></div>
  <script src="./dist/bundle.js"></script>
</body>

安装vueloader

webpack默认是不支持vue文件的，所以也要单独安装vue的loader（vue2最高支持到vue-loader15）

npm install vue-loader@15 --save-dev
npm install vue-template-compiler --save-dev

编辑webpack.config.js文件

增加vue识别

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}