# 入门

# Vue CLI

如果您不想手动设置 webpack，建议使用 Vue CLI 脚手架构建项目。Vue CLI 创建的项目预先配置了大多数常见的开发需求，开箱即用。

如果 Vue CLI 的内置配置不符合您的需求，或者您想从头开始创建自己的 webpack 配置，请遵循本指南。

# 手动设置

# 安装

除非您是使用自己 fork 的 Vue 模板编译器版本的高级用户，否则您应该一起安装 vue-loader 和 vue-template-compiler

npm install -D vue-loader vue-template-compiler

vue-template-compiler 需要单独安装的原因是，您可以单独指定其版本。

每次发布新的 vue 版本时，都会同时发布相应的 vue-template-compiler 版本。编译器的版本必须与基础 vue 包同步，以便 vue-loader 生成与运行时兼容的代码。这意味着 **每次在项目中升级 vue 时，您也应该将 vue-template-compiler 升级到匹配的版本。**

# webpack 配置

Vue 加载器的配置与其他加载器略有不同。除了将 vue-loader 应用于扩展名为 .vue 的任何文件的规则之外，请确保将 Vue 加载器的插件添加到您的 webpack 配置中

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

插件是必需的！ 它负责克隆您定义的任何其他规则，并将它们应用于 .vue 文件中的相应语言块。例如，如果您有一个匹配 /\.js$/ 的规则，它将被应用于 <script> 块中的 .vue 文件。

一个更完整的示例 webpack 配置如下所示

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}

另请参阅选项参考，了解所有可用的加载器选项。

警告

如果您正在开发库或在 monorepo 中，请注意 CSS 导入 **是副作用**。确保 **删除** package.json 中的 "sideEffects": false，否则 CSS 块将在生产构建中被 webpack 丢弃。