# 入门
# 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 丢弃。