This repository was archived by the owner on Apr 1, 2019. It is now read-only.
File tree Expand file tree Collapse file tree 4 files changed +58
-14
lines changed Expand file tree Collapse file tree 4 files changed +58
-14
lines changed Original file line number Diff line number Diff line change @@ -44,9 +44,31 @@ $ npm run test:watch
44
44
$ npm run test:cov
45
45
```
46
46
47
- ### Building to ./dist
47
+ ### Building
48
+
49
+ #### ES6 Modules / CommonJS
50
+
51
+ ``` bash
52
+ $ npm run build
53
+ ```
54
+
55
+ ``` js
56
+ import myCmp from ' dist/my-cmp' ;
57
+
58
+ Vue .component (' my-cmp' , myCmp);
59
+ ```
60
+
61
+ #### UMD
48
62
49
63
``` bash
50
64
$ npm run build
51
- $ npm run build:doc
65
+ ```
66
+
67
+ ``` html
68
+ <script src =" https://unpkg.com/vue" charset =" utf-8" ></script >
69
+ <script src =" ./dist/my-cmp.min.js" charset =" utf-8" ></script >
70
+
71
+ <script type =" text/javascript" >
72
+ Vue .component (' my-cmp' , window .MyCmp );
73
+ </script >
52
74
```
Original file line number Diff line number Diff line change @@ -20,6 +20,12 @@ module.exports = {
20
20
"label" : "Author"
21
21
}
22
22
} ,
23
+ "helpers" : {
24
+ camelcase : function ( str ) {
25
+ return str . replace ( / ( [ \- _ \s ] + [ a - z ] ) | ( ^ [ a - z ] ) / g, $1 => $1 . toUpperCase ( ) )
26
+ . replace ( / [ \- _ \s ] + / g, '' )
27
+ }
28
+ } ,
23
29
"complete" : function ( data , { logger} ) {
24
30
// Rename to be compatible with styleguide configuration
25
31
const cmpDir = data . inPlace ?'src/Component' :path . resolve ( data . destDirName , 'src/Component' ) ;
Original file line number Diff line number Diff line change 4
4
5
5
# Usage
6
6
7
+ ## ES6 Modules / CommonJS
8
+
9
+ ``` bash
10
+ $ npm run build
11
+ ```
12
+
7
13
``` js
8
- import Component from ' {{name}}'
14
+ import {{ camelcase name }} from ' dist/{{ name }}' ;
15
+
16
+ Vue .component (' {{ name }}' , {{ camelcase name }});
17
+ ```
9
18
10
- Vue .component (' {{name}}' , Component);
19
+ ``` html
20
+ <{{name}} text="Hello World!"></{{name}}>
11
21
```
12
22
13
- <{{name}} text="Hello World!"></{{name}}>
23
+ ## UMD
14
24
15
- PS: You can also build to UMD with ` npm run build:umd ` , the component will be
16
- available in the window[ '{{name}}'] variable.
25
+ ``` bash
26
+ $ npm run build
27
+ ```
28
+
29
+ ``` html
30
+ <{{name}} text="Hello World!"></{{name}}>
31
+
32
+ <script src =" https://unpkg.com/vue" charset =" utf-8" ></script >
33
+ <script src =" ./dist/{{ name }}.min.js" charset =" utf-8" ></script >
34
+
35
+ <script type =" text/javascript" >
36
+ Vue .component (' {{ name }}' , window .{{ camelcase name }});
37
+ </script >
38
+ ```
17
39
18
40
## Installation
19
41
Original file line number Diff line number Diff line change @@ -3,12 +3,6 @@ const webpack = require('webpack');
3
3
const glob = require ( 'glob' ) . sync ;
4
4
const { name} = require ( './package.json' ) ;
5
5
6
- // converts my-component to MyComponent
7
- function camelCase ( s ) {
8
- return s . replace ( / ( [ \- _ \s ] + [ a - z ] ) | ( ^ [ a - z ] ) / g, $1 => $1 . toUpperCase ( ) )
9
- . replace ( / [ \- _ \s ] + / g, '' )
10
- }
11
-
12
6
module . exports = {
13
7
entry : glob ( './src/**/*.vue' ) ,
14
8
filename : {
@@ -23,5 +17,5 @@ module.exports = {
23
17
frameworks : [ 'mocha' , 'chai' , 'phantomjs-shim' ] ,
24
18
} )
25
19
] ,
26
- moduleName : camelCase ( { { name } } )
20
+ moduleName : { { camelcase name } }
27
21
} ;
You can’t perform that action at this time.
0 commit comments