如何在没有 vue-cli 的情况下使用 vue-loader

Vue-loader 是一个用于将 Vue 单文件组件转换为 JavaScript 模块的 webpack 加载器。它通常与 Vue CLI 一起使用，但如果你不使用 Vue CLI，你仍然可以手动配置 webpack 来使用 vue-loader。本文将介绍如何在没有 vue-cli 的情况下使用 vue-loader，让你能够使用 Vue 单文件组件来开发 Vue.js 应用程序。

安装必要的依赖首先，你需要确保已经安装了以下依赖：
- webpack：用于打包应用程序的模块化构建工具。
- vue-loader：用于将 Vue 单文件组件转换为 JavaScript 模块。
- vue-template-compiler：用于编译 Vue 单文件组件的模板部分。
可以通过 npm 或者 yarn 来安装这些依赖。
```
npm install webpack vue-loader vue-template-compiler --save-dev
```

配置 webpack 在项目根目录下创建一个 webpack 配置文件，比如 webpack.config.js。在配置文件中，添加必要的配置来使用 vue-loader。

const path = require('path');

module.exports = {
  entry: './src/main.js', // 入口文件路径
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出文件路径
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // 匹配以 .vue 结尾的文件
        loader: 'vue-loader' // 使用 vue-loader 加载器
      },
      {
        test: /\.js$/, // 匹配以 .js 结尾的文件
        exclude: /node_modules/, // 排除 node_modules 文件夹
        loader: 'babel-loader' // 使用 babel-loader 加载器
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'], // 自动解析的文件扩展名
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 配置 Vue 的别名
    }
  }
};

上述配置中，我们使用了 vue-loader 来处理以 .vue 结尾的文件，并且使用了 babel-loader 来处理以 .js 结尾的文件。注意，我们还配置了 Vue 的别名，确保我们引用的是完整版的 Vue。

创建 Vue 单文件组件现在你可以在 src 目录下创建 Vue 单文件组件了。一个简单的示例组件如下：

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

编写入口文件在 src 目录下创建一个入口文件，比如 main.js，用于初始化 Vue 应用程序。

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

new Vue({
  render: (h) => h(App)
}).$mount('#app');

构建和运行现在你可以使用 webpack 构建和运行你的应用程序了。在命令行中执行以下命令来进行构建：
```
webpack --config webpack.config.js
```
构建完成后，会在 dist 目录下生成一个 bundle.js 文件。你可以在一个 HTML 文件中引入这个文件，并创建一个容器来挂载你的 Vue 应用程序。
```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>
```
打开这个 HTML 文件，你将看到 Vue 应用程序成功地运行起来了。

总结虽然 Vue CLI 提供了一个简单的方式来使用 vue-loader，但在没有 Vue CLI 的情况下，你仍然可以手动配置 webpack 来使用 vue-loader，并享受 Vue 单文件组件的好处。通过安装必要的依赖，配置 webpack，编写 Vue 单文件组件，并进行构建和运行，你可以在没有 vue-cli 的情况下使用 vue-loader 开发 Vue.js 应用程序。

如何在没有 vue-cli 的情况下使用 vue-loader

微信扫一扫：分享