Skip to content

Commit 7f8a6b5

Browse files
yyx990803yyx990803
committed
docs
1 parent 7ad0f8a commit 7f8a6b5

File tree

5 files changed

+81
-65
lines changed

5 files changed

+81
-65
lines changed

‎docs/en/SUMMARY.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
- [Asset URL Handling](configurations/asset-url.md)
1313
- [Advanced Loader Configuration](configurations/advanced.md)
1414
- [Extracting CSS File](configurations/extract-css.md)
15+
- [Custom Blocks](configurations/custom-blocks.md)
1516
- Workflow
1617
- [Production Build](workflow/production.md)
1718
- [Linting](workflow/linting.md)

‎docs/en/configurations/advanced.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@ module.exports = {
2121
// ... other vue options
2222
loaders: {
2323
// load all <script> without "lang" attribute with coffee-loader
24-
js: 'coffee',
25-
// load <template> directly as HTML string, without piping it
26-
// through vue-html-loader first
27-
html: 'raw'
24+
js: 'coffee-loader',
25+
// allows you to write markdown inside <template> tags...
26+
// (note this only works for 10.2.0+)
27+
html: 'marked'
2828
}
2929
}
3030
}
3131
```
3232

33-
### Webpack 2.x (^2.1.0-beta.25)
33+
### Webpack 2.x
3434

3535
``` js
3636
module.exports = {
@@ -44,10 +44,10 @@ module.exports = {
4444
options: {
4545
loaders: {
4646
// load all <script> without "lang" attribute with coffee-loader
47-
js: 'coffee',
48-
// load <template> directly as HTML string, without piping it
49-
// through vue-html-loader first
50-
html: 'raw'
47+
js: 'coffee-loader',
48+
// allows you to write markdown inside <template> tags...
49+
// (note this only works for 10.2.0+)
50+
html: 'marked'
5151
}
5252
}
5353
}

‎docs/en/configurations/custom-blocks.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Custom Blocks
2+
3+
> Requires 10.2.0+
4+
5+
You can define custom language blocks inside `*.vue` files. The content of a custom block will be processed by the loaders specified in the `loaders` object of `vue-loader` options and then required by the component module. The configuration is similar to what is described in [Advanced Loader Configuration](../configurations/advanced.md), except the matching uses the tag name instead of the `lang` attribute.
6+
7+
## Example
8+
9+
Here's an example of extracting all `<docs>` custom blocks into a single docs file:
10+
11+
#### component.vue
12+
13+
``` html
14+
<docs>
15+
## This is an Example component.
16+
</docs>
17+
18+
<template>
19+
<h2 class="red">{{msg}}</h2>
20+
</template>
21+
22+
<script>
23+
export default {
24+
data () {
25+
return {
26+
msg: 'Hello from Component A!'
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style>
33+
comp-a h2 {
34+
color: #f00;
35+
}
36+
</style>
37+
```
38+
39+
#### webpack.config.js
40+
41+
``` js
42+
// Webpack 2.x
43+
var ExtractTextPlugin = require("extract-text-webpack-plugin")
44+
45+
module.exports = {
46+
module: {
47+
rules: [
48+
{
49+
test: /\.vue$/,
50+
loader: 'vue',
51+
options: {
52+
loaders: {
53+
// extract all <docs> content as raw text
54+
'docs': ExtractTextPlugin.extract('raw-loader'),
55+
}
56+
}
57+
}
58+
],
59+
plugins: [
60+
// output all docs into a single file
61+
new ExtractTextPlugin('docs.md')
62+
]
63+
}
64+
}
65+
```
66+
67+
Note that custom blocks would require specific configuration to work properly, so you probably want to avoid distributing reusable components with custom blocks in source form.

‎docs/en/configurations/extract-css.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
}
3636
```
3737

38-
### Webpack 2.x (^2.1.0-beta.25)
38+
### Webpack 2.x
3939

4040
``` bash
4141
npm install extract-text-webpack-plugin@2.x --save-dev

‎docs/en/start/spec.md

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -72,63 +72,11 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces
7272

7373
### Custom Blocks
7474

75-
Additional custom blocks can be included in a `*.vue` file for any project specific needs. `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section. The webpack loaders should be specified in the `loaders` hash of the `vue` section of the webpack configuration in the same way that languages are specified for the standard sections of the file. See [Advanced Loader Configuration](../configurations/advanced.md).
75+
> Only supported in vue-loader 10.2.0+
7676
77-
Example:
78-
79-
#### component.vue
80-
``` html
81-
<unit-test>
82-
describe('example', function () {
83-
it('basic', function (done) {
84-
done();
85-
})
86-
})
87-
</unit-test>
88-
89-
<template>
90-
<h2 class="red">{{msg}}</h2>
91-
</template>
92-
93-
<script>
94-
export default {
95-
data () {
96-
return {
97-
msg: 'Hello from Component A!'
98-
}
99-
}
100-
}
101-
</script>
102-
103-
<style>
104-
comp-a h2 {
105-
color: #f00;
106-
}
107-
</style>
108-
```
109-
110-
#### webpack.config.js
111-
112-
``` js
113-
// Webpack 2.x (^2.1.0-beta.25)
114-
module.exports = {
115-
module: {
116-
rules: [
117-
{
118-
test: /\.vue$/,
119-
loader: 'vue',
120-
// vue-loader options go here
121-
options: {
122-
loaders: {
123-
unit-test: 'buble-loader',
124-
}
125-
}
126-
}
127-
]
128-
}
129-
}
130-
```
77+
Additional custom blocks can be included in a `*.vue` file for any project specific needs, for example a `<docs>` block. `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section. The webpack loaders should be specified in the `loaders` section of `vue-loader` options.
13178

79+
For mode details, see [Custom Blocks](../configurations/custom-blocks.md).
13280

13381
### Src Imports
13482

0 commit comments

Comments
 (0)