diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index 0adf9c77b..6afd0ba2f 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -6,7 +6,21 @@ 如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南。 -## 手动配置 +## 手动设置 + +### 安装 + +你应该将 `vue-loader` 和 `vue-template-compiler` 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户: + +``` bash +npm install -D vue-loader vue-template-compiler +``` + +`vue-template-compiler` 需要独立安装的原因是你可以单独指定其版本。 + +每个 `vue` 包的新版本发布时,一个相应版本的 `vue-template-compiler` 也会随之发布。编译器的版本必须和基本的 `vue` 包保持同步,这样 `vue-loader` 就会生成兼容运行时的代码。这意味着**你每次升级项目中的 `vue` 包时,也应该匹配升级 `vue-template-compiler`。** + +### webpack 配置 Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 `vue-loader` 应用到所有扩展名为 `.vue` 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件: @@ -72,3 +86,7 @@ module.exports = { ``` 你也可以在[选项参考](../options.md)查阅所有可用的 loader 选项。 + +::: warning 警告 +如果你在开发一个库或多项目仓库 (monorepo),请注意导入 CSS **是具有副作用的**。请确保在 `package.json` 中**移除** `"sideEffects": false`,否则 CSS 代码块会在生产环境构建时被 webpack 丢掉。 +::: diff --git a/docs/zh/options.md b/docs/zh/options.md index d1fddcc2a..6f2e793b9 100644 --- a/docs/zh/options.md +++ b/docs/zh/options.md @@ -92,3 +92,12 @@ sidebar: auto - 默认值:`true` 在开发环境下,我们默认使用 [prettier](https://prettier.io/) 格式化编译后的模板渲染代码,以方便调试。然而,如果你开发时碰到了 prettier 的某些罕见 bug,比如[格式化多层嵌套的函数时运行时间过长](https://github.com/prettier/prettier/issues/4672),你可以通过禁用这个选项来绕开。 + +## exposeFilename + +- 类型:`boolean` +- 默认值:`false` + +在非生产环境下,`vue-loader` 会为组件注入一个 `__file` 属性以提升调试体验。如果一个组件没有 `name` 属性,Vue 会通过 `__file` 字段进行推断,并用于控制台警告中的展示。 + +这个属性在生产环境构建时会被去掉。但如果你在开发一个组件库并且烦于为每个组件设置 `name`,你可能还会想使用它。这时可以把这个选项打开。