vue-loader是什么？使用它的用途有哪些？怎么使用？

vue-loader是一个webpack的加载器（loader），用于将Vue组件的单文件（.vue文件）转换为JavaScript模块。

使用vue-loader可以实现以下功能：

1. 将.vue文件中的模板、脚本和样式分离，并分别进行处理。
2. 支持使用ES2015的模块语法来导入和导出组件。
3. 支持使用其他预处理器（如Less、Sass）来处理样式。
4. 支持使用Vue的各种特性，如Vue路由、VueX状态管理等。

要使用vue-loader，首先需要安装Vue CLI。安装完Vue CLI后，可以通过以下步骤来使用vue-loader：

1. 在项目根目录下创建一个.vue文件，该文件将包含组件的模板、脚本和样式。
2. 在vue文件中按照规定的格式编写模板、脚本和样式。
3. 在项目的入口文件（如main.js）中使用import语句导入.vue文件。
4. 在webpack配置文件中，配置vue-loader来处理.vue文件，包括使用其他加载器来处理模板、脚本和样式。

示例：

在项目根目录下创建一个名为HelloWorld.vue的文件，其中包含以下内容：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

<style scoped>
div {
  color: red;
}
</style>

在入口文件（如main.js）中导入HelloWorld.vue：

import Vue from 'vue'
import HelloWorld from './HelloWorld.vue'

Vue.component('hello-world', HelloWorld)

new Vue({
  el: '#app'
})

在webpack配置文件中配置vue-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  }
}

以上是使用vue-loader的基本用法。通过配置vue-loader，可以实现更多高级的功能，如使用预处理器、配置路由、引入VueX等。具体使用方法可以参考Vue Loader的官方文档。