├── README.md
├── meta.json
└── template
├── .babelrc
├── .gitignore
├── README.md
├── build
├── base.js
├── dev.js
└── prod.js
├── dev
├── font
│ ├── OpenSans-Regular.eot
│ ├── OpenSans-Regular.svg
│ ├── OpenSans-Regular.ttf
│ └── OpenSans-Regular.woff
├── index.js
└── style.css
├── index.html
├── package.json
├── src
└── index.vue
└── test
├── index.js
└── karma.conf.js
/README.md:
--------------------------------------------------------------------------------
1 | # vue-component-boilerplate
2 |
3 | > A simple Component setup for quick prototyping.
4 |
5 | ### Usage
6 |
7 | This is a project template for [vue-cli](https://github.com/vuejs/vue-cli).
8 |
9 | ``` bash
10 | $ npm install -g vue-cli
11 | $ vue init coffcer/component my-component
12 | $ cd my-component
13 | $ npm install
14 | $ npm run dev
15 | ```
16 |
17 | ### What's Included
18 |
19 | - `npm run dev`: Live the component in your local server.
20 |
21 | - `npm run build`: Build the component to UMD js
22 |
23 | - `npm run test`: Run test.
24 |
25 | - `npm run build:demo`: Build the dev page, and then you can live it in github.
26 |
27 |
28 | ### Fork It And Make Your Own
29 |
30 | You can fork this repo to create your own boilerplate, and use it with `vue-cli`:
31 |
32 | ``` bash
33 | vue init username/repo my-project
34 | ```
35 |
--------------------------------------------------------------------------------
/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "schema": {
3 | "name": {
4 | "type": "string",
5 | "required": true,
6 | "label": "Component name"
7 | },
8 | "description": {
9 | "type": "string",
10 | "required": true,
11 | "label": "Project description",
12 | "default": "A Vue.js component"
13 | },
14 | "author": {
15 | "type": "string",
16 | "label": "Author"
17 | },
18 | "port": {
19 | "type": "number",
20 | "label": "Dev port",
21 | "default": 8080
22 | },
23 | "private": {
24 | "type": "boolean",
25 | "default": true
26 | },
27 | "test": {
28 | "type": "confirm",
29 | "message": "Setup unit tests with Karma + Mocha?"
30 | }
31 | },
32 | "filters": {
33 | "test/**/*": "test"
34 | },
35 | "completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev\n\nDocumentation can be found at https://github.com/Coffcer/component"
36 | }
37 |
--------------------------------------------------------------------------------
/template/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-2"],
3 | "plugins": ["transform-runtime"],
4 | "comments": false
5 | }
6 |
--------------------------------------------------------------------------------
/template/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 |
--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
1 | # {{ name }}
2 |
3 | > {{ description }}
4 |
5 | ## Build Setup
6 |
7 | ``` bash
8 | # install dependencies
9 | npm install
10 |
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 |
14 | # build the component to UMD js
15 | npm run build
16 |
17 | # build the dev page
18 | npm run build:demo
19 |
20 | # test
21 | npm run test
22 | ```
23 |
--------------------------------------------------------------------------------
/template/build/base.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | resolveLoader: {
6 | root: path.join(__dirname, '../node_modules'),
7 | },
8 | resolve: {
9 | extensions: ['', '.js', '.vue']
10 | },
11 | module: {
12 | loaders: [
13 | {
14 | test: /\.vue$/,
15 | loader: 'vue'
16 | },
17 | {
18 | test: /\.js$/,
19 | loader: 'babel',
20 | exclude: /node_modules/
21 | },
22 | {
23 | test: /\.css$/,
24 | loader: 'style!css!autoprefixer'
25 | },
26 | {
27 | test: /\.json$/,
28 | loader: 'json'
29 | },
30 | {
31 | test: /\.(png|jpg|gif|svg)$/,
32 | loader: 'url',
33 | query: {
34 | limit: 10000,
35 | name: '[name].[ext]?[hash]'
36 | }
37 | }
38 | ]
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/template/build/dev.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var config = require('./base');
4 |
5 | module.exports = Object.assign({}, config, {
6 | entry: './dev/index.js',
7 | output: {
8 | path: path.resolve(__dirname, '../dev'),
9 | publicPath: '/dev/',
10 | filename: 'bundle.js'
11 | },
12 | devServer: {
13 | historyApiFallback: true,
14 | noInfo: true
15 | },
16 | devtool: '#eval-source-map'
17 | });
18 |
19 | if (process.env.NODE_ENV === 'production') {
20 | module.exports.devtool = '#source-map'
21 | // http://vuejs.github.io/vue-loader/workflow/production.html
22 | module.exports.plugins = (module.exports.plugins || []).concat([
23 | new webpack.DefinePlugin({
24 | 'process.env': {
25 | NODE_ENV: '"production"'
26 | }
27 | }),
28 | new webpack.optimize.UglifyJsPlugin({
29 | compress: {
30 | warnings: false
31 | }
32 | }),
33 | new webpack.optimize.OccurenceOrderPlugin()
34 | ])
35 | }
--------------------------------------------------------------------------------
/template/build/prod.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var config = require('./base');
3 | var webpack = require('webpack')
4 |
5 | module.exports = Object.assign({}, config, {
6 | entry: './src/index.vue',
7 | output: {
8 | path: path.resolve(__dirname, '../dist'),
9 | filename: '{{ name }}.js',
10 | library: ['{{ name }}'],
11 | libraryTarget: 'umd'
12 | },
13 | devtool: false,
14 | plugins: [
15 | new webpack.DefinePlugin({
16 | 'process.env': {
17 | NODE_ENV: '"production"'
18 | }
19 | }),
20 | new webpack.optimize.UglifyJsPlugin({
21 | compress: {
22 | warnings: false
23 | }
24 | }),
25 | new webpack.optimize.OccurenceOrderPlugin()
26 | ]
27 | });
--------------------------------------------------------------------------------
/template/dev/font/OpenSans-Regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coffcer/component/ba89f7c17128e05f7b78c2bf09352eb06f37bd38/template/dev/font/OpenSans-Regular.eot
--------------------------------------------------------------------------------
/template/dev/font/OpenSans-Regular.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
593 |
--------------------------------------------------------------------------------
/template/dev/font/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coffcer/component/ba89f7c17128e05f7b78c2bf09352eb06f37bd38/template/dev/font/OpenSans-Regular.ttf
--------------------------------------------------------------------------------
/template/dev/font/OpenSans-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Coffcer/component/ba89f7c17128e05f7b78c2bf09352eb06f37bd38/template/dev/font/OpenSans-Regular.woff
--------------------------------------------------------------------------------
/template/dev/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Component from '../src/index.vue'
3 |
4 | new Vue({
5 | el: '#app',
6 | components: { app: Component },
7 | })
8 |
--------------------------------------------------------------------------------
/template/dev/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Open Sans";
3 | src: url("./font/OpenSans-Regular.eot?") format("eot"), url("./font/OpenSans-Regular.woff") format("woff"), url("./font/OpenSans-Regular.ttf") format("truetype"), url("./font/OpenSans-Regular.svg#OpenSans") format("svg");
4 | }
5 |
6 | * {
7 | box-sizing: border-box;
8 | }
9 |
10 | *:before,
11 | *:after {
12 | box-sizing: inherit;
13 | }
14 |
15 | body {
16 | margin: 0;
17 | font-family: 'Open Sans', 'Source Sans Pro', 'Helvetica Neue', 'Microsoft Yahei', Arial, sans-serif;
18 | color: #2c3e50;
19 | }
20 |
21 | a {
22 | color: #4F92C0;
23 | text-decoration: none;
24 | }
25 |
26 | h1, h2, h3, h4, h5, h6 {
27 | font-weight: 300;
28 | }
29 |
30 | a:hover {
31 | text-decoration: underline;
32 | }
33 |
34 | #app {
35 | width: 600px;
36 | padding: 0 20px;
37 | margin: 0 auto;
38 | max-width: 600px;
39 | text-align: center;
40 | }
41 |
42 | #main {
43 | margin-top: 70px;
44 | }
45 |
46 | .title {
47 | font-size: 4em;
48 | color: #4F92C0;
49 | }
50 |
51 | .desc {
52 | font-size: 15px;
53 | color: #7f8c8d;
54 | }
55 |
56 | .github-link {
57 | font-size: 22px;
58 | }
59 |
60 | .button {
61 | box-sizing: content-box;
62 | display: inline-block;
63 | width: 180px;
64 | margin: 0.5em;
65 | padding: 12px 14px;
66 | font-weight: 700;
67 | color: #fff;
68 | border-bottom: 2px solid;
69 | border-radius: 4px;
70 | -webkit-transition: all 0.15s ease;
71 | transition: all 0.15s ease;
72 | }
73 |
74 | .button.green {
75 | background-color: #4fc08d;
76 | border-bottom-color: #3aa373;
77 | }
78 |
79 | .button.blue {
80 | background-color: #4F92C0;
81 | border-bottom-color: #4881A9;
82 | }
83 |
84 | .button:hover {
85 | text-decoration: none;
86 | -webkit-transform: translate(0, -2px);
87 | -ms-transform: translate(0, -2px);
88 | transform: translate(0, -2px);
89 | }
--------------------------------------------------------------------------------
/template/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | {{ name }}
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "{{ name }}",
3 | "description": "{{ description }}",
4 | "author": "{{ author }}",
5 | "version": "0.1.0",
6 | {{#private}}
7 | "private": true,
8 | {{/private}}
9 | "main": "./dist/{{ name }}.js",
10 | "scripts": {
11 | {{#test}}
12 | "test": "karma start ./test/karma.conf.js",
13 | {{/test}}
14 | "dev": "webpack-dev-server --inline --hot --config ./build/dev.js --port {{ port }}",
15 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/prod.js && npm run build:demo",
16 | "build:demo": "cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/dev.js"
17 | },
18 | "dependencies": {
19 | "vue": "^1.0.0"
20 | },
21 | "devDependencies": {
22 | {{#test}}
23 | "karma": "^1.3.0",
24 | "karma-mocha": "^1.1.1",
25 | "karma-phantomjs-launcher": "^1.0.2",
26 | "karma-spec-reporter": "0.0.26",
27 | "karma-webpack": "^1.8.0",
28 | "mocha": "^3.0.2",
29 | "phantomjs": "^2.1.7",
30 | {{/test}}
31 | "autoprefixer-loader": "^3.2.0",
32 | "babel-core": "^6.0.0",
33 | "babel-loader": "^6.0.0",
34 | "babel-plugin-transform-runtime": "^6.0.0",
35 | "babel-preset-es2015": "^6.0.0",
36 | "babel-preset-stage-2": "^6.0.0",
37 | "cross-env": "^1.0.6",
38 | "css-loader": "^0.23.0",
39 | "style-loader": "^0.13.1",
40 | "file-loader": "^0.8.4",
41 | "json-loader": "^0.5.4",
42 | "url-loader": "^0.5.7",
43 | "vue-hot-reload-api": "^1.2.0",
44 | "vue-html-loader": "^1.0.0",
45 | "vue-loader": "^8.2.1",
46 | "vue-style-loader": "^1.0.0",
47 | "webpack": "^1.12.2",
48 | "webpack-dev-server": "^1.12.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/template/src/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 |
17 |
22 |
--------------------------------------------------------------------------------
/template/test/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import Vue from 'vue';
3 | import chai from 'chai';
4 |
5 | var expect = chai.expect;
6 |
7 | describe('test', () => {
8 | it('normal', () => {})
9 | });
--------------------------------------------------------------------------------
/template/test/karma.conf.js:
--------------------------------------------------------------------------------
1 | var webpackConf = require('../build/base');
2 |
3 | module.exports = function(config) {
4 | config.set({
5 | browsers: ['PhantomJS'],
6 | frameworks: ['mocha'],
7 | reporters: ['spec'],
8 | files: ['./index.js'],
9 | plugins: [
10 | 'karma-mocha',
11 | 'karma-phantomjs-launcher',
12 | 'karma-spec-reporter',
13 | 'karma-webpack'
14 | ],
15 | preprocessors: {
16 | './index.js': ['webpack']
17 | },
18 | webpack: webpackConf,
19 | webpackMiddleware: {
20 | noInfo: true
21 | },
22 | singleRun: true
23 | })
24 | };
25 |
--------------------------------------------------------------------------------