Skip to content
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit 1fdce20

Browse files
coderdiazcoderdiaz
committedJan 11, 2017
Initial commit
·
v2.0.51.0.9
0 parents  commit 1fdce20

22 files changed

+11450
-0
lines changed
 

‎.babelrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
5+
}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2016 Javier Diaz Chamorro
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Vue Datasource
2+
### A Vue.js component to create tables from Server Side
3+
#### Compatible with Vue 2.x
4+
5+
Coming soon..

‎dist/example.js

+9,698
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/example.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-datasource.js

+986
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-datasource.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-datasource.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue-datasource.min.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-datasource</title>
6+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
7+
</head>
8+
<body>
9+
<div id="app">
10+
<div class="container">
11+
<h3>Vue Datasource</h3>
12+
<datasource
13+
:table-data="groups.data"
14+
:columns="columns"
15+
language="en"
16+
:pagination="groups.pagination"
17+
:actions="actions"
18+
v-on:change="changePage"
19+
v-on:searching="onSearch"></datasource>
20+
</div>
21+
</div>
22+
<script src="./dist/example.js"></script>
23+
</body>
24+
</html>

‎package.json

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "vue-datasource",
3+
"description": "A vue.js component to create tables from server side",
4+
"version": "1.0.0",
5+
"author": "Javier Diaz <coderdiaz@gmail.com>",
6+
"scripts": {
7+
"dev": "webpack-dev-server --inline --hot",
8+
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.config.build.min.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.config.build.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config webpack.config.js"
9+
},
10+
"main": "dist/vue-datasource.js",
11+
"repository": {
12+
"type": "git",
13+
"url": "git+https://github.com/coderdiaz/vue-datasource.git"
14+
},
15+
"keywords": [
16+
"vue.js",
17+
"component",
18+
"vue-component",
19+
"vue-datasource"
20+
],
21+
"license": "MIT",
22+
"bugs": {
23+
"url": "https://github.com/coderdiaz/vue-datasource/issues"
24+
},
25+
"homepage": "https://github.com/coderdiaz/vue-datasource#readme",
26+
"dependencies": {},
27+
"devDependencies": {
28+
"babel-core": "^6.0.0",
29+
"babel-helper-vue-jsx-merge-props": "^2.0.1",
30+
"babel-loader": "^6.0.0",
31+
"babel-plugin-syntax-jsx": "^6.13.0",
32+
"babel-plugin-transform-runtime": "^6.0.0",
33+
"babel-plugin-transform-vue-jsx": "^3.1.0",
34+
"babel-preset-es2015": "^6.0.0",
35+
"babel-preset-stage-0": "^6.5.0",
36+
"babel-preset-stage-2": "^6.0.0",
37+
"babel-runtime": "^6.0.0",
38+
"cross-env": "^1.0.6",
39+
"css-loader": "^0.23.0",
40+
"expose-loader": "^0.7.1",
41+
"file-loader": "^0.8.4",
42+
"json-loader": "^0.5.4",
43+
"node-sass": "^4.2.0",
44+
"sass-loader": "^4.1.1",
45+
"url-loader": "^0.5.7",
46+
"vue": "^2.1.3",
47+
"vue-hot-reload-api": "^1.2.0",
48+
"vue-html-loader": "^1.0.0",
49+
"vue-loader": "^9.5.0",
50+
"vue-style-loader": "^1.0.0",
51+
"vue-template-compiler": "^2.1.3",
52+
"webpack": "^1.12.2",
53+
"webpack-dev-server": "^1.12.0"
54+
}
55+
}

‎screens/frame-chrome-mac.png

139 KB
Loading

‎src/Datasource.vue

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
<template>
2+
<div class="vue-datasource">
3+
<div class="panel panel-default">
4+
<div class="panel-heading">
5+
<div class="form-inline">
6+
<!--limits-->
7+
<div class="form-group pull-left">
8+
<label class="control-label pr2">{{ translation.table.label_limits }}</label>
9+
<select class="form-control" v-model="perpage" number>
10+
<option v-for="limit in limits" :value="limit">{{ limit }}</option>
11+
</select>
12+
</div><!--/limits-->
13+
<!--search-input-->
14+
<div class="form-group pull-right">
15+
<input class="form-control" type="text"
16+
v-model="search"
17+
:placeholder="translation.table.placeholder_search">
18+
<button type="button" class="btn btn-primary"
19+
@click.prevent="searching">{{ translation.table.label_search }}</button>
20+
</div><!--/search-input-->
21+
<div class="clearfix"></div>
22+
</div>
23+
</div>
24+
<div class="panel-body Vue__panel-body">
25+
<table class="table table-striped Vue__table">
26+
<thead>
27+
<tr>
28+
<th v-for="column in columns">{{ column.name }}</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr v-if="pagination.total == 0">
33+
<td :colspan="columns.length">{{ translation.table.records_not_found }}</td>
34+
</tr>
35+
<tr v-else
36+
:class="{ 'success': (index == indexSelected) }"
37+
v-for="(row, index) in tableData"
38+
@click.prevent="selectRow(row, index)">
39+
<td v-for="k in columns">
40+
{{ fetchFromObject(row, k.key, k.render) }}
41+
</td>
42+
</tr>
43+
<tr>
44+
<td class="text-center" :colspan="columns.length">
45+
{{ tableInfo }}
46+
</td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
<div class="panel-footer Vue__panel-footer">
52+
<div class="pull-left">
53+
<div class="btn-group Vue__datasource_actions">
54+
<button class="btn btn-default" type="button"
55+
:class="btn.class"
56+
v-for="btn in actions"
57+
@click="btn.event($event, selected)">
58+
<i class="pr1" v-if="btn.icon" :class="btn.icon"></i>
59+
{{ btn.text }}
60+
</button>
61+
</div>
62+
</div>
63+
<div class="pull-right">
64+
<pagination
65+
:pages="pagination"
66+
@change="changePage"
67+
:translation="translation.pagination"></pagination>
68+
</div>
69+
<div class="clearfix"></div>
70+
</div>
71+
</div>
72+
</div>
73+
</template>
74+
<script type="text/babel">
75+
import Utils from './utils/DatasourceUtils';
76+
import Language from './utils/DatasourceLanguage';
77+
import Pagination from './components/Pagination.vue';
78+
79+
export default {
80+
components: {
81+
Pagination
82+
},
83+
props: {
84+
tableData: {
85+
type: Array,
86+
required: true
87+
},
88+
language: {
89+
type: String,
90+
default: 'es'
91+
},
92+
columns: {
93+
type: Array,
94+
required: true
95+
},
96+
pagination: {
97+
type: Object,
98+
default() {
99+
return {
100+
total: 0,
101+
to: 0,
102+
from: 0,
103+
per_page: 15
104+
}
105+
}
106+
},
107+
actions: {
108+
type: Array,
109+
default() {
110+
return []
111+
}
112+
}
113+
},
114+
data() {
115+
return {
116+
limits: [1, 5, 10, 15, 20],
117+
perpage: 15,
118+
selected: null,
119+
indexSelected: -1,
120+
search: ''
121+
}
122+
},
123+
computed: {
124+
translation() {
125+
return Language.translations[this.language];
126+
},
127+
tableInfo: Utils.tableInfo
128+
},
129+
methods: {
130+
fetchFromObject: Utils.fetchFromObject,
131+
changePage: Utils.changePage,
132+
selectRow: Utils.selectRow,
133+
searching() {
134+
this.selected = null;
135+
this.$emit('searching', this.search);
136+
}
137+
},
138+
watch: {
139+
perpage() {
140+
this.selected = null;
141+
this.$emit('change', { perpage: this.perpage, page: 1 });
142+
}
143+
}
144+
}
145+
</script>
146+
<style lang="sass" scoped>
147+
.vue-datasource {
148+
149+
.Vue__panel-body {
150+
padding: 0;
151+
.Vue__table {
152+
margin-bottom: 0;
153+
}
154+
}
155+
156+
.Vue__panel-footer {
157+
.Vue__datasource_actions {
158+
margin: 10px 0;
159+
}
160+
}
161+
162+
}
163+
</style>

‎src/components/Pagination.vue

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div class="Vue__pagination">
3+
<nav aria-label="Page navigation">
4+
<ul class="pagination">
5+
<li :class="(pages.current_page == 1) ? 'disabled' : ''">
6+
<a href="#" @click.prevent="firstPage">{{ translation.btn_first }}</a>
7+
</li>
8+
<li :class="(pages.current_page == 1) ? 'disabled' : ''">
9+
<a href="#" @click.prevent="previous" aria-label="Previous">
10+
<span aria-hidden="true">&laquo;</span>
11+
</a>
12+
</li>
13+
<li v-for="n in items" :class="(pages.current_page == n) ? 'active': ''">
14+
<a href="#" @click.prevent="change(n)">{{ n }}</a>
15+
</li>
16+
<li :class="(pages.current_page == pages.last_page) ? 'disabled' : ''">
17+
<a href="#" @click.prevent="next" aria-label="Next">
18+
<span aria-hidden="true">&raquo;</span>
19+
</a>
20+
</li>
21+
<li :class="(pages.current_page == pages.last_page) ? 'disabled' : ''">
22+
<a href="#" @click.prevent="lastPage(pages.last_page)">{{ translation.btn_last }}</a>
23+
</li>
24+
</ul>
25+
</nav>
26+
</div>
27+
</template>
28+
<script type="text/babel">
29+
export default {
30+
props: ['pages', 'translation'],
31+
computed: {
32+
items() {
33+
let temp = [],
34+
bottomLimit = this.pages.current_page - 2,
35+
topLimit = this.pages.current_page + 2,
36+
showing = 5;
37+
38+
if(bottomLimit <= 0) {
39+
bottomLimit = 1;
40+
topLimit = 5;
41+
}
42+
43+
if(topLimit >= this.pages.last_page) {
44+
bottomLimit = this.pages.last_page-4;
45+
topLimit = this.pages.last_page;
46+
}
47+
48+
if(this.pages.last_page < 5) {
49+
showing = this.pages.last_page;
50+
}
51+
52+
if(bottomLimit <= 0) {
53+
bottomLimit = 1;
54+
}
55+
56+
if(this.pages.last_page == 0 || this.pages.last_page == 1) {
57+
showing = 1;
58+
}
59+
60+
for(let i=0; i<showing; i++) {
61+
temp[i] = i + bottomLimit;
62+
}
63+
64+
return temp;
65+
}
66+
},
67+
methods: {
68+
firstPage() {
69+
if(this.pages.current_page != 1) {
70+
this.change(1);
71+
}
72+
},
73+
previous() {
74+
if(this.pages.current_page != 1) {
75+
this.change(--this.pages.current_page);
76+
}
77+
},
78+
change(page) {
79+
this.$emit('change', page);
80+
},
81+
next() {
82+
if(this.pages.current_page != this.pages.last_page) {
83+
this.change(++this.pages.current_page);
84+
}
85+
},
86+
lastPage(page){
87+
if(this.pages.current_page != this.pages.last_page) {
88+
this.change(page);
89+
}
90+
}
91+
}
92+
}
93+
</script>
94+
<style lang="sass" scoped>
95+
.Vue__pagination {
96+
nav {
97+
.pagination {
98+
margin: 10px 0 !important;
99+
}
100+
}
101+
}
102+
</style>

‎src/example.js

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import Vue from 'vue/dist/vue.js';
2+
import Datasource from './Datasource.vue';
3+
4+
var data = {
5+
"pagination": {
6+
"total": 4,
7+
"per_page": 15,
8+
"current_page": 1,
9+
"last_page": 1,
10+
"next_page_url": null,
11+
"prev_page_url": null,
12+
"from": 1,
13+
"to": 4
14+
},
15+
"data": [
16+
{
17+
"id_grupo": 1,
18+
"tipo_grupo": "1",
19+
"nombre_grupo": "All",
20+
"estado_grupo": "1",
21+
"created_at": "2016-12-06 14:18:54",
22+
"updated_at": "2016-12-06 14:18:54",
23+
"deleted_at": null,
24+
"detalle_grupos_count": "4"
25+
},
26+
{
27+
"id_grupo": 2,
28+
"tipo_grupo": "1",
29+
"nombre_grupo": "Ladies",
30+
"estado_grupo": "1",
31+
"created_at": "2016-12-06 14:18:54",
32+
"updated_at": "2016-12-06 14:18:54",
33+
"deleted_at": null,
34+
"detalle_grupos_count": "1"
35+
},
36+
{
37+
"id_grupo": 3,
38+
"tipo_grupo": "2",
39+
"nombre_grupo": "Mens",
40+
"estado_grupo": "2",
41+
"created_at": "2016-12-06 14:18:54",
42+
"updated_at": "2016-12-06 14:18:54",
43+
"deleted_at": null,
44+
"detalle_grupos_count": "3"
45+
},
46+
{
47+
"id_grupo": 4,
48+
"tipo_grupo": "1",
49+
"nombre_grupo": "Chiefs",
50+
"estado_grupo": "1",
51+
"created_at": "2016-12-06 14:18:54",
52+
"updated_at": "2016-12-06 14:18:54",
53+
"deleted_at": null,
54+
"detalle_grupos_count": "1"
55+
},
56+
{
57+
"id_grupo": 5,
58+
"tipo_grupo": "2",
59+
"nombre_grupo": "Operators",
60+
"estado_grupo": "1",
61+
"created_at": "2016-12-06 14:18:54",
62+
"updated_at": "2016-12-06 14:18:54",
63+
"deleted_at": null,
64+
"detalle_grupos_count": "1"
65+
}
66+
]
67+
};
68+
69+
new Vue({
70+
el: '#app',
71+
components: {
72+
Datasource
73+
},
74+
data() {
75+
return {
76+
groups: {
77+
pagination: {},
78+
data: []
79+
},
80+
columns: [
81+
{
82+
name: 'Id',
83+
key: 'id_grupo',
84+
filter: false,
85+
render(value) {
86+
return `# ${value}`;
87+
}
88+
},
89+
{
90+
name: 'Name',
91+
key: 'nombre_grupo',
92+
filter: false
93+
},
94+
{
95+
name: 'Type',
96+
key: 'tipo_grupo',
97+
filter: false,
98+
render(value) {
99+
switch (value) {
100+
case '1':
101+
return 'Global';
102+
break;
103+
case '2':
104+
return 'General';
105+
break;
106+
case '3':
107+
return 'Personal';
108+
break;
109+
}
110+
}
111+
},
112+
{
113+
name: 'Total',
114+
key: 'detalle_grupos_count',
115+
filter: false,
116+
},
117+
{
118+
name: 'Date',
119+
key: 'created_at',
120+
filter: false
121+
},
122+
],
123+
actions: [
124+
{
125+
text: 'Edit',
126+
icon: 'glyphicon glyphicon-pencil',
127+
class: 'btn-primary',
128+
event(e, row) {
129+
console.warn('Are you clicked me?', e);
130+
if(row == null) {
131+
console.info('Ups.. data not found :(')
132+
} else {
133+
console.info('Yeeei, I found this :)', JSON.stringify(row));
134+
}
135+
}
136+
},
137+
{
138+
text: 'Delete',
139+
icon: 'glyphicon glyphicon-trash',
140+
class: 'btn-danger',
141+
event(e, row) {
142+
console.warn('Are you clicked me?', e);
143+
if(row == null) {
144+
console.info('Ups.. data not found :(')
145+
} else {
146+
console.info('Yeeei, I found this :)', JSON.stringify(row));
147+
}
148+
}
149+
},
150+
{
151+
text: 'Show',
152+
icon: 'glyphicon glyphicon-eye-open',
153+
class: 'btn-info',
154+
event(e, row) {
155+
console.warn('Are you clicked me?', e);
156+
if(row == null) {
157+
console.info('Ups.. data not found :(')
158+
} else {
159+
console.info('Yeeei, I found this :)', JSON.stringify(row));
160+
}
161+
}
162+
}
163+
]
164+
}
165+
},
166+
mounted() {
167+
this.groups = data;
168+
},
169+
methods: {
170+
changePage(values) {
171+
alert(`Show limit is changed, the new limit is ${values.perpage} and the current page is ${values.page}`);
172+
},
173+
onSearch(searchQuery) {
174+
alert(`Are you find this? ${searchQuery}`);
175+
}
176+
}
177+
});

‎src/main.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./Datasource.vue');

‎src/utils/DatasourceLanguage.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export default {
2+
translations: {
3+
'en': {
4+
'table': {
5+
'label_limits': 'Show',
6+
'label_search': 'Search',
7+
'placeholder_search': 'Type to search..',
8+
'records_not_found': 'No records found'
9+
},
10+
'pagination': {
11+
'label_show': 'Showing',
12+
'label_to': 'to',
13+
'label_of': 'of',
14+
'label_entries': 'entries',
15+
'btn_first': 'First',
16+
'btn_last': 'Latest'
17+
}
18+
},
19+
'es': {
20+
'table': {
21+
'label_limits': 'Mostrar',
22+
'label_search': 'Buscar',
23+
'placeholder_search': 'Buscar ..',
24+
'records_not_found': 'No se encontraron registros.'
25+
},
26+
'pagination': {
27+
'label_show': 'Mostrando',
28+
'label_to': 'a',
29+
'label_of': 'de',
30+
'label_entries': 'registros',
31+
'btn_first': 'Primero',
32+
'btn_last': 'Último'
33+
}
34+
}
35+
}
36+
}

‎src/utils/DatasourceUtils.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
export default {
2+
/**
3+
* Find the element value using Recursive Method and return the value rendered if it's defined
4+
*
5+
* @author Javier Diaz <coderdiaz@gmail.com>
6+
* @param obj
7+
* @param column
8+
* @param render
9+
* @returns {*}
10+
*/
11+
fetchFromObject(obj, column, render) {
12+
if(typeof obj === 'undefined') return false;
13+
let _index = column.indexOf('.');
14+
if(_index > -1) {
15+
return this.fetchFromObject(obj[column.substring(0, _index)], column.substr(_index + 1));
16+
}
17+
if(typeof render != 'undefined') {
18+
return render(obj[column]);
19+
}
20+
return obj[column];
21+
},
22+
23+
/**
24+
* Emit event to change page from pagination
25+
*
26+
* @author Javier Diaz <coderdiaz@gmail.com>
27+
* @param page
28+
*/
29+
changePage(page) {
30+
this.selected = null;
31+
this.$emit('change', { perpage: this.perpage, page: page });
32+
},
33+
34+
/**
35+
* Effect toggle to selected row
36+
*
37+
* @author Javier Diaz <coderdiaz@gmail.com>
38+
* @param row
39+
* @param index
40+
*/
41+
selectRow(row, index) {
42+
if(this.indexSelected == index) {
43+
this.indexSelected = -1;
44+
this.selected = null;
45+
} else {
46+
this.indexSelected = index;
47+
this.selected = {
48+
'row': row,
49+
'index': index
50+
};
51+
}
52+
},
53+
54+
/**
55+
* Computed property: Building custom string information with translation
56+
*
57+
* @author Javier Diaz <coderdiaz@gmail.com>
58+
* @returns {string}
59+
*/
60+
tableInfo() {
61+
let label_show = this.translation.pagination.label_show;
62+
let from = (this.pagination.from == null) ? 0 : this.pagination.from;
63+
let label_to = this.translation.pagination.label_to;
64+
let to = (this.pagination.to == null) ? 0 : this.pagination.to;
65+
let label_of = this.translation.pagination.label_of;
66+
let total = this.pagination.total;
67+
let label_entries = this.translation.pagination.label_entries;
68+
69+
return `${label_show} ${from} ${label_to} ${to} ${label_of} ${total} ${label_entries}`;
70+
}
71+
}

‎webpack.config.build.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var webpack = require('webpack');
2+
3+
module.exports = require('./webpack.config.js');
4+
5+
module.exports.entry = {
6+
'vue-datasource': './src/main.js',
7+
}
8+
9+
module.exports.output.library = 'VueDatasourceComponent';
10+
module.exports.output.libraryTarget = 'umd';

‎webpack.config.build.min.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var webpack = require('webpack');
2+
3+
module.exports = require('./webpack.config.build.js');
4+
5+
module.exports.output.filename = "[name].min.js";
6+
7+
module.exports.plugins.push(new webpack.optimize.UglifyJsPlugin({
8+
compress: {
9+
warnings: false,
10+
}
11+
}));

‎webpack.config.js

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
module.exports = {
5+
entry: {
6+
example: ['./src/example.js'],
7+
},
8+
9+
output: {
10+
path: './dist',
11+
publicPath: '/dist/',
12+
filename: "[name].js",
13+
},
14+
15+
16+
resolve: {
17+
root: path.join(__dirname, 'node_modules'),
18+
alias: {
19+
},
20+
extensions: ['', '.js', '.vue', '.json'],
21+
},
22+
23+
module: {
24+
loaders: [
25+
{
26+
test: /\.vue$/,
27+
loader: 'vue'
28+
},
29+
{
30+
test: /\.js$/,
31+
loader: 'babel',
32+
exclude: /node_modules/
33+
},
34+
{
35+
test: /\.json$/,
36+
loader: 'json'
37+
},
38+
{
39+
test: /\.html$/,
40+
loader: 'vue-html'
41+
},
42+
{
43+
test: /\.(png|jpg|gif|svg)$/,
44+
loader: 'url',
45+
query: {
46+
limit: 10000,
47+
name: '[name].[ext]?[hash]'
48+
}
49+
}
50+
]
51+
},
52+
53+
babel: {
54+
presets: ['es2015', 'stage-0'],
55+
plugins: ['transform-runtime', 'transform-vue-jsx'],
56+
},
57+
58+
devServer: {
59+
historyApiFallback: true,
60+
noInfo: true
61+
},
62+
devtool: '#eval-source-map'
63+
}
64+
65+
if (process.env.NODE_ENV === 'production') {
66+
module.exports.devtool = '#source-map'
67+
// http://vuejs.github.io/vue-loader/workflow/production.html
68+
module.exports.plugins = (module.exports.plugins || []).concat([
69+
new webpack.DefinePlugin({
70+
'process.env': {
71+
NODE_ENV: '"production"'
72+
}
73+
}),
74+
75+
new webpack.optimize.OccurenceOrderPlugin()
76+
])
77+
}

0 commit comments

Comments
 (0)
This repository has been archived.