Skip to content

[docs][zh-cn] synced recent updates #1150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 26, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions docs/zh-cn/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
- [生产环境构建](workflow/production.md)
- [代码检验](workflow/linting.md)
- [测试](workflow/testing.md)
- [使用 Mock 测试](workflow/testing-with-mocks.md)
- [选项参考](options.md)
- [loaders](options.md#loaders)
- [preLoaders](options.md#preloaders)
Expand All @@ -33,4 +32,4 @@
- [transformToRequire](options.md#transformtorequire)
- [buble](options.md#buble)
- [extractCSS](options.md#extractcss)
- [optimizeSSR](options.md#optimizessr)
- [optimizeSSR](options.md#optimizessr)
25 changes: 0 additions & 25 deletions docs/zh-cn/configurations/advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@

> 注意 `preLoaders` 和 `postLoaders` 只在 10.3.0+ 版本支持

### webpack 2.x

``` js
module.exports = {
// other options...
Expand Down Expand Up @@ -54,27 +52,4 @@ module.exports = {
}
```

### webpack 1.x

``` js
// webpack.config.js
module.exports = {
// other options...
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
}
]
},
// `vue-loader` configurations
vue: {
loaders: {
// same configuration rules as above
}
}
}
```

进阶配置更实际的用法是[提取组件中的 CSS 到单个文件](./extract-css.md)。
1 change: 0 additions & 1 deletion docs/zh-cn/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ comp-a h2 {
#### webpack.config.js

``` js
// webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
Expand Down
36 changes: 0 additions & 36 deletions docs/zh-cn/configurations/extract-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,6 @@ module.exports = {

将所有 Vue 组件中的所有已处理的 CSS 提取为单个 CSS 文件配置示例:

### webpack 2.x


``` js
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")
Expand Down Expand Up @@ -69,36 +66,3 @@ module.exports = {
]
}
```

### webpack 1.x

``` bash
npm install extract-text-webpack-plugin --save-dev
```

``` js
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
// other options...
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
]
},
vue: {
loaders: {
css: ExtractTextPlugin.extract("css"),
// 你还可以引入 <style lang="less"> 或其它语言
less: ExtractTextPlugin.extract("css!less")
}
},
plugins: [
new ExtractTextPlugin("style.css")
]
}
```
11 changes: 0 additions & 11 deletions docs/zh-cn/features/css-modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,6 @@ CSS Modules 处理是通过 [css-loader](https://github.com/webpack/css-loader)
你可以使用 `vue-loader` 的 `cssModules` 选项去为 `css-loader` 添加 query 配置:

``` js
// webpack 1
vue: {
cssModules: {
// overwrite local ident name
localIdentName: '[path][name]---[local]---[hash:base64:5]',
// enable camelCase
camelCase: true
}
}

// webpack 2
module: {
rules: [
{
Expand Down
15 changes: 1 addition & 14 deletions docs/zh-cn/features/postcss.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,7 @@

或者,你可以使用 `vue-loader` 的 `postcss` 选项来为 `.vue` 文件指定配置。

webpack 1.x 例子:

``` js
// webpack.config.js
module.exports = {
// 其它配置……
vue: {
// 使用自定义 PostCSS 插件
postcss: [require('postcss-cssnext')()]
}
}
```

webpack 2.x 例子:
示例:

``` js
// webpack.config.js
Expand Down
59 changes: 24 additions & 35 deletions docs/zh-cn/options.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# 选项参考

## webpack 1 和 2 之间的使用差异

webpack 2:配置直接放到 loader rule 中。
## 选项放在哪里

``` js
module.exports = {
Expand All @@ -21,20 +19,9 @@ module.exports = {
}
```

webpack 1.x:在 webpack 配置中添加根节点 `vue` 块。

``` js
module.exports = {
// ...
vue: {
// `vue-loader` options
}
}
```

### loaders

- 类型:`{ [lang: string]: string }`
- 类型:`{ [lang: string]: string | Object | Array }`

指定 webpack loader 对象覆盖用于 `*.vue` 文件内的语言块的默认 loader。如果指定,该键对应于语言块的 `lang` 属性。每种类型的默认 `lang` 是:

Expand All @@ -45,7 +32,6 @@ module.exports = {
例如,使用 `babel-loader` 和 `eslint-loader` 处理所有的 `<script>` 块:

``` js
// webpack 2.x config
module: {
rules: [
{
Expand All @@ -61,17 +47,36 @@ module.exports = {
}
```

你也可以使用对象或数组的语法 (注意这些选项必须是可序列化的):

``` js
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: [
{ loader: 'cache-loader' },
{ loader: 'babel-loader', options: { presets: ['env'] } }
]
}
}
}
]
}
```

### preLoaders

- 类型:`{ [lang: string]: string }`
- 仅在 10.3.0+ 版本中支持

配置格式和 `loaders` 相同,但是 `preLoaders` 会在默认 loaders 之前处理。你可以用来预处理语言块 - 一个常见用例是用来处理构建时的 i18n。

### postLoaders

- 类型:`{ [lang: string]: string }`
- 仅在 10.3.0+ 版本中支持

配置格式和 `loaders` 相同,但是 `postLoaders` 会在默认 loaders 之后处理。你可以用来后处理语言块。注意这会有些复杂:

Expand All @@ -81,11 +86,10 @@ module.exports = {

### postcss

> 注意:在 11.0.0+ 版本中,推荐使用 PostCSS 配置文件代替。[用法和 `postcss-loader` 相同](https://github.com/postcss/postcss-loader#usage)。
> 注意:这里推荐使用 PostCSS 配置文件代替,这样你的 `.vue` 文件中的样式和普通的 CSS 样式可以共享相同的配置。[用法和 `postcss-loader` 相同](https://github.com/postcss/postcss-loader#usage)。

- 类型:`Array` or `Function` or `Object`


指定要应用于 `.vue` 文件中 CSS 的自定义 PostCSS 插件。如果使用函数,函数将使用相同的 loader 上下文调用,并返回一个插件数组。

``` js
Expand Down Expand Up @@ -207,21 +211,6 @@ module.exports = {
配置例子:

``` js
// webpack 1
vue: {
buble: {
// 启用对象扩展运算符
// 注意:你需要自己提供 Object.assign polyfill!
objectAssign: 'Object.assign',

// turn off the `with` removal
transforms: {
stripWith: false
}
}
}

// webpack 2
module: {
rules: [
{
Expand Down
11 changes: 5 additions & 6 deletions docs/zh-cn/start/setup.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
# 创建项目

### 使用 `vue-cli`
### 使用 `@vue/cli`

推荐用脚手架工具 `vue-cli` 来创建一个使用 `vue-loader` 的项目:
推荐用脚手架工具 `@vue/cli` 来创建一个使用 `vue-loader` 的项目:

``` bash
npm install -g vue-cli
vue init webpack-simple hello-vue
npm install -g @vue/cli
vue create hello-vue
cd hello-vue
npm install
npm run dev # ready to go!
npm run serve # ready to go!
```
66 changes: 10 additions & 56 deletions docs/zh-cn/workflow/linting.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@

你可能有疑问,在 `.vue` 文件中你怎么检验你的代码,因为它不是 JavaScript。我们假设你使用 [ESLint](https://eslint.org/) (如果你没有使用话,你应该去使用!)。

你还需要 [eslint-plugin-html](https://github.com/BenoitZugmeyer/eslint-plugin-html) 来支持提取并检验你的 `.vue` 文件中的 JavaScript。
你还需要官方的 [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue),它支持同时检查你 `.vue` 文件中的模板和脚本。

请确保在你的 ESLint 配置中使用了该插件自身的配置:

确保把下面的配置加入到你的 ESLint 配置中:
``` json
"plugins": [
"html"
]
{
"extends": [
"plugin:vue/essential"
]
}
```

在命令行这样使用:
Expand All @@ -23,68 +26,19 @@ eslint --ext js,vue MyComponent.vue
npm install eslint eslint-loader --save-dev
```

``` js
// webpack.config.js
module.exports = {
// ... other options
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue!eslint'
}
]
}
}
```

注意 webpack loader 处理顺序是 **从右到左**。确保在 `vue` 之前应用 `eslint`,这样才能检验编译前的代码。

我们需要考虑使用的 NPM 包中的第三方 `.vue` 组件,实际使用中我们希望使用 `vue-loader` 去处理第三方组件,但是不想检验它们。我们需要把 lint 配置到 webpack 的 [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order) 中:

``` js
// webpack.config.js
module.exports = {
// ... other options
module: {
// only lint local *.vue files
preLoaders: [
{
test: /\.vue$/,
loader: 'eslint',
exclude: /node_modules/
}
],
// but use vue-loader for all *.vue files
loaders: [
{
test: /\.vue$/,
loader: 'vue'
}
]
}
}
```

For webpack 2.x:
请确保它应用在了 pre-loader 上:

``` js
// webpack.config.js
module.exports = {
// ... other options
module: {
rules: [
// only lint local *.vue files
{
enforce: 'pre',
test: /\.vue$/,
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/
},
// but use vue-loader for all *.vue files
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
Expand Down
11 changes: 2 additions & 9 deletions docs/zh-cn/workflow/production.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,12 @@ module.exports = {
NODE_ENV: '"production"'
}
}),
// minify with dead-code elimination
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// optimize module ids by occurrence count
new webpack.optimize.OccurrenceOrderPlugin()
new webpack.optimize.UglifyJsPlugin()
]
}
```

显然,我们不想在开发过程中使用这些配置,所以有几种方法可以解决这个问题:
我们不想在开发过程中使用这些配置,所以有几种方法可以解决这个问题:

1. 使用环境变量动态构建;

Expand Down
Loading