├── .gitignore
├── README.md
├── app.js
├── cervejarias.json
├── index.html
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Vedcasts.com.br - Séries - Vue.js
 2 | 
 3 | O código fonte deste repositório foi desenvolvido durante a série de aulas sobre Vue.js encontrada em [http://www.vedcasts.com.br/series/vuejs](http://www.vedcasts.com.br/series/vuejs).
 4 | 
 5 | ### Instruções de Instalação
 6 | 
 7 | Usando o Terminal, clonar o projeto localmente com `git clone git@github.com:vedcasts/series-vuejs-project.git`. Acessar a pasta do projeto com `cd <nome da pasta>` (possivelmente cd series-vuejs-project/).
 8 | 
 9 | As bibliotecas/frameworks Javascript obrigatórias para o projeto estão listadas no arquivo `/package.json` encontrado na raiz do site. Trata-se do arquivo lido pelo NPM que fará o download do Javascript do projeto.
10 | 
11 | Assim, é obrigatório ter o Node.js/NPM instalados. Sua instalação é simples e está disponível para todos os principais sistemas operacionais. Mais info [http://www.nodejs.org](http://www.nodejs.org).
12 | 
13 | Após certificar-se de que seu ambiente atende aos pré-requisitos listados logo acima, basta usar o Terminal para navegar até a pasta do projeto e rodar o comando `npm install`. Isso criará a pasta /node_modules na raiz do projeto e ali armazenará os scripts necessários.
14 | 
15 | **Muito importante !!!**
16 | A série foi desenvolvida utilizando a versão 0.12.* fo Vue.js. Logo após a publicação dos videos a versão 1.0 foi lançada e uma aula tratando exclusivamente do processo de upgrade foi disponibilizada: aula 22. Para ter acesso ao código fonte das aulas 1 a 21 utilize o branch **vue0.12.x**. Para o código fonte atualizado com a versão 1.0.x utilize o branch **master**.
17 | 
18 | ### Scripts to projeto
19 | 
20 | Os arquivos principais são index.html e app.js.
21 | 
22 | ### Dúvidas e sugestões
23 | 
24 | Por gentileza assista às aulas e deixe suas dúvidas ou sugestões no sistema de comentários existente em cada página de videos.


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | 
  2 | /**
  3 | * Vue filter estará a disposição no HTML. Exemplo:
  4 | * <p>{{ cervejaria.last_mod | dateFormat }}</p>
  5 | * Documentação oficial sobre filters: http://vuejs.org/guide/filters.html
  6 | */
  7 | Vue.filter('dateFormat', function(value, formatString)
  8 | {
  9 |     if(formatString != undefined)
 10 |     {
 11 |         return moment(value).format(formatString);
 12 |     }
 13 |     return moment(value).format('DD/MM/YYYY');
 14 | });
 15 | 
 16 | new Vue({
 17 | 
 18 |     /**
 19 |     * Element HTML que será gerenciado
 20 |     */
 21 |     el: '#beerApp',
 22 | 
 23 |     /**
 24 |     * Todas as propriedades deste objeto estará disponíveis
 25 |     * no HTML de ID beerApp e seus filhos. Qualquer mudança
 26 |     * nos valores do objeto será refletida no HTML.
 27 |     */
 28 |     data: {
 29 |         cervejaria: {
 30 |             name: '',
 31 |             city: '',
 32 |             state: '',
 33 |             country: '',
 34 |             descript: ''
 35 |         },
 36 |         cervejarias: {
 37 |             all: [],
 38 |             list: [],
 39 |             paginated: []
 40 |         },
 41 |         pagination: {
 42 |             perPage: 8,
 43 |             currentPage: 1,
 44 |             totalPages: 0,
 45 |             totalItems: 0,
 46 |             pageNumbers: [],
 47 |             visibleNumbers: 3
 48 |         },
 49 |         interaction: {
 50 |             visibleColumns: ['name', 'last_mod'],
 51 |             columnsToFilter: [],
 52 |             filterTerm: '',
 53 |             openDetails: [],
 54 |             sortColumn: 'name',
 55 |             sortInverse: 0,
 56 |         },
 57 |         controls: {
 58 |             select2: null,
 59 |         }
 60 |     },
 61 | 
 62 |     /**
 63 |     * Os métodos abaixo estarão disponíveis no HTML
 64 |     * de ID beerApp e seus filhos
 65 |     */
 66 |     methods: {
 67 | 
 68 |         edit: function(ev, cervejaria)
 69 |         {
 70 |             ev.preventDefault();
 71 | 
 72 |             this.cervejaria.name = cervejaria.name;
 73 |             this.cervejaria.city = cervejaria.city;
 74 |             this.cervejaria.state = cervejaria.state;
 75 |             this.cervejaria.country = cervejaria.country;
 76 |             this.cervejaria.descript = cervejaria.descript;
 77 | 
 78 |             jQuery(this.$els.modal).modal('show');
 79 |         },
 80 | 
 81 |         save: function(ev)
 82 |         {
 83 |             ev.preventDefault();
 84 | 
 85 |             // this.$http.post('url do servico', cervejaria, function(response)
 86 |             // {
 87 | 
 88 |             // });
 89 | 
 90 |             jQuery(this.$els.modal).modal('hide');
 91 |             window.alert('Cervejaria salva, seu bebum!');
 92 |             window.console.log(JSON.stringify(this.cervejaria));
 93 |         },
 94 | 
 95 |         new: function()
 96 |         {
 97 |             this.cervejaria.name = '';
 98 |             this.cervejaria.city = '';
 99 |             this.cervejaria.state = '';
100 |             this.cervejaria.country = '';
101 |             this.cervejaria.descript = '';
102 | 
103 |             jQuery(this.$els.modal).modal('show');
104 |         },
105 | 
106 |         setPaginationData: function(list)
107 |         {
108 |             var self = this,
109 |             chunk    = _.chunk(list, self.pagination.perPage);
110 | 
111 |             Vue.set(self.cervejarias, 'paginated', chunk);
112 |             Vue.set(self.cervejarias, 'list', chunk[0]);
113 | 
114 |             Vue.set(self.pagination, 'currentPage', 1);
115 |             Vue.set(self.pagination, 'totalItems', list.length);
116 |             Vue.set(self.pagination, 'totalPages', Math.ceil(list.length / self.pagination.perPage));
117 |             Vue.set(self.pagination, 'pageNumbers', _.range(1, self.pagination.totalPages+1));
118 |         },
119 | 
120 |         page: function(ev, page)
121 |         {
122 |             ev.preventDefault();
123 | 
124 |             var self = this;
125 | 
126 |             Vue.set(self.pagination, 'currentPage', page);
127 | 
128 |             Vue.set(self.cervejarias, 'list', self.cervejarias.paginated[page-1]);
129 |         },
130 | 
131 |         next: function(ev)
132 |         {
133 |             ev.preventDefault();
134 | 
135 |             var self = this;
136 | 
137 |             if(self.pagination.currentPage == self.pagination.totalPages)
138 |             {
139 |                 return false;
140 |             }
141 | 
142 |             Vue.set(self.pagination, 'currentPage', self.pagination.currentPage+1);
143 | 
144 |             Vue.set(self.cervejarias, 'list', self.cervejarias.paginated[self.pagination.currentPage-1]);
145 |         },
146 | 
147 |         previous: function(ev)
148 |         {
149 |             ev.preventDefault();
150 | 
151 |             var self = this;
152 | 
153 |             if(self.pagination.currentPage == 1)
154 |             {
155 |                 return false;
156 |             }
157 | 
158 |             Vue.set(self.pagination, 'currentPage', self.pagination.currentPage-1);
159 | 
160 |             Vue.set(self.cervejarias, 'list', self.cervejarias.paginated[self.pagination.currentPage-1]);
161 |         },
162 | 
163 |         doResetAll: function()
164 |         {
165 |             var self = this;
166 | 
167 |             Vue.set(self.interaction, 'visibleColumns', ['name', 'last_mod']);
168 |             Vue.set(self.interaction, 'columnsToFilter', []);
169 |             Vue.set(self.interaction, 'filterTerm', '');
170 |             Vue.set(self.interaction, 'openDetails', []);
171 |             Vue.set(self.interaction, 'sortColumn', 'name');
172 |             Vue.set(self.interaction, 'sortInverse', 0);
173 | 
174 |             self.setPaginationData(self.cervejarias.all);
175 | 
176 |             self.controls.select2.val('').trigger('change');
177 |         },
178 | 
179 |         doFilter: function()
180 |         {
181 |             var self = this,
182 |             filtered = self.cervejarias.all;
183 | 
184 |             if(self.interaction.filterTerm != '' && self.interaction.columnsToFilter.length > 0)
185 |             {
186 |                 filtered = _.filter(self.cervejarias.all, function(cervejaria)
187 |                 {
188 |                     return self.interaction.columnsToFilter.some(function(column)
189 |                     {
190 |                         return cervejaria[column].toLowerCase().indexOf(self.interaction.filterTerm.toLowerCase()) > -1
191 |                     });
192 |                 });
193 |             }
194 | 
195 |             self.setPaginationData(filtered);
196 |         },
197 | 
198 |         doSort: function(ev, column)
199 |         {
200 |             ev.preventDefault();
201 | 
202 |             var self = this;
203 | 
204 |             self.interaction.sortColumn = column;
205 | 
206 |             if(self.interaction.sortInverse == 0)
207 |             {
208 |                 Vue.set(self.interaction, 'sortInverse', -1);
209 |             } else {
210 |                 Vue.set(self.interaction, 'sortInverse', 0);
211 |             }
212 |         },
213 | 
214 |         doOpenDetails: function(ev, id)
215 |         {
216 |             ev.preventDefault();
217 | 
218 |             var self = this,
219 | 
220 |                 index = self.interaction.openDetails.indexOf(id);
221 | 
222 |             if(index > -1)
223 |             {
224 |                 self.interaction.openDetails.$remove(id);
225 |             } else {
226 |                 self.interaction.openDetails.push(id);
227 |             }
228 |         },
229 | 
230 |         openAllDetails: function(ev)
231 |         {
232 |             ev.preventDefault();
233 | 
234 |             var self = this;
235 | 
236 |             if(self.interaction.openDetails.length > 0)
237 |             {
238 |                 Vue.set(self.interaction, 'openDetails', []);
239 |             } else {
240 |                 Vue.set(self.interaction, 'openDetails', _.pluck(self.cervejarias.list, 'id'));
241 |             }
242 |         }
243 |     },
244 | 
245 |     /**
246 |     * Este método será executado assim que tanto o Vue quanto
247 |     * o HTML de ID beerApp (e seus filhos) estiverem prontos.
248 |     */
249 |     ready: function()
250 |     {
251 |         var self = this;
252 | 
253 |         /**
254 |         * Para distribuição foi adicionado ao projeto o arquivo
255 |         * cervejarias.json, contendo todos os dados necessários
256 |         * para a aplicação funcionar corretamente. Não funciona
257 |         * se você abrir a página index.html no browser utilizando
258 |         * Ctrl (CMD) + o. É preciso um virtual host.
259 |         * Solução: coloque o arquivo em algum de seus domínios para poder
260 |         * usar abaixo: http://www.seudominio.com/cervejarias.json.
261 |         */
262 |         self.$http.get('/cervejarias.json', function(response)
263 |         // self.$http.get('http://api.beer.app/cervejarias', function(response)
264 |         {
265 |             Vue.set(self.cervejarias, 'all', response);
266 | 
267 |             self.setPaginationData(response);
268 |         });
269 | 
270 |         self.controls.select2 = jQuery(self.$els.columnsToFilterSelect).select2({
271 |             placeholder: 'Selecionar uma ou mais colunas para filtrar!'
272 |         }).on('change', function()
273 |         {
274 |             Vue.set(self.interaction, 'columnsToFilter', jQuery(this).val() || []);
275 |         });
276 |     }
277 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Vue.js</title>
  6 |     <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  7 |     <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.css">
  8 |     <link rel="stylesheet" href="/node_modules/select2/dist/css/select2.css">
  9 | </head>
 10 | <body>
 11 | 
 12 | 
 13 |     <div class="container" id="beerApp">
 14 | 
 15 |         <form v-on:submit="save">
 16 |             <div class="modal fade" v-el:modal>
 17 |                 <div class="modal-dialog">
 18 |                     <div class="modal-content">
 19 |                         <div class="modal-header">
 20 |                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 21 |                             <h4 class="modal-title">Gerenciamento Cervejaria</h4>
 22 |                         </div>
 23 |                         <div class="modal-body">
 24 |                             <!-- <pre>{{ $data.cervejaria | json }}</pre> -->
 25 |                             <div class="form-group">
 26 |                                 <label for="name">Nome Cervejaria</label>
 27 |                                 <input type="text" v-model="cervejaria.name" class="form-control" id="name">
 28 |                             </div>
 29 |                             <div class="form-group">
 30 |                                 <label for="city">Cidade</label>
 31 |                                 <input type="text" v-model="cervejaria.city" class="form-control" id="city">
 32 |                             </div>
 33 |                             <div class="form-group">
 34 |                                 <label for="state">Estado</label>
 35 |                                 <input type="text" v-model="cervejaria.state" class="form-control" id="state">
 36 |                             </div>
 37 |                             <div class="form-group">
 38 |                                 <label for="country">País</label>
 39 |                                 <input type="text" v-model="cervejaria.country" class="form-control" id="country">
 40 |                             </div>
 41 |                             <div class="form-group">
 42 |                                 <label for="descript">Descrição</label>
 43 |                                 <input type="text" v-model="cervejaria.descript" class="form-control" id="descript">
 44 |                             </div>
 45 |                         </div>
 46 |                         <div class="modal-footer">
 47 |                             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 48 |                             <button type="submit" class="btn btn-primary">Save changes</button>
 49 |                         </div>
 50 |                     </div><!-- /.modal-content -->
 51 |                 </div><!-- /.modal-dialog -->
 52 |             </div><!-- /.modal -->
 53 |         </form>
 54 | 
 55 |         <h1>Bem vindo à série Vue.js!</h1>
 56 | 
 57 |         <!-- <div class="well">
 58 |             <pre>{{ $data.columnsToFilter | json }}</pre>
 59 |         </div> -->
 60 | 
 61 |         <div class="row">
 62 |             <div class="col-md-2">
 63 |                 <div class="well">
 64 |                     <label>Colunas visíveis</label>
 65 |                     <select
 66 |                         v-model="interaction.visibleColumns"
 67 |                         multiple
 68 |                         class="form-control">
 69 |                         <option value="name">Nome</option>
 70 |                         <option value="city">Cidade</option>
 71 |                         <option value="state">Estado</option>
 72 |                         <option value="country">País</option>
 73 |                         <option value="last_mod">Atualizado</option>
 74 |                     </select>
 75 |                 </div>
 76 | 
 77 |                 <div class="well">
 78 |                     <button
 79 |                         v-on:click="doResetAll"
 80 |                         class="btn btn-default btn-block">
 81 |                         Reset Geral
 82 |                     </button>
 83 |                 </div>
 84 | 
 85 |                 <div class="well">
 86 |                     <button
 87 |                         v-on:click="new"
 88 |                         class="btn btn-primary btn-block">
 89 |                         Nova Cervejaria
 90 |                     </button>
 91 |                 </div>
 92 |             </div>
 93 |             <div class="col-md-10">
 94 |                 <div class="well">
 95 |                     <div class="row">
 96 |                         <div class="col-md-6">
 97 |                             <input
 98 |                                 v-model="interaction.filterTerm"
 99 |                                 v-on:keyup="doFilter"
100 |                                 type="text"
101 |                                 placeholder="Digite o termo para filtrar a lista"
102 |                                 class="form-control">
103 |                         </div>
104 |                         <div class="col-md-6">
105 |                             <select
106 |                                 v-model="columnsToFilter"
107 |                                 v-el:columns-to-filter-select
108 |                                 multiple
109 |                                 class="form-control">
110 |                                 <option value="name">Nome</option>
111 |                                 <option value="city">Cidade</option>
112 |                                 <option value="state">Estado</option>
113 |                                 <option value="country">País</option>
114 |                             </select>
115 |                         </div>
116 |                     </div>
117 |                 </div>
118 | 
119 |                 <table class="table table-bordered table-hover table-striped">
120 |                     <thead>
121 |                         <tr>
122 |                             <th v-show="interaction.visibleColumns.indexOf('name') > -1">
123 |                                 <i class="fa fa-fw fa-sort"
124 |                                     v-bind:class="
125 |                                         { 'fa-sort-amount-asc':interaction.sortColumn == 'name' && interaction.sortInverse == 0,
126 |                                         'fa-sort-amount-desc':interaction.sortColumn == 'name' && interaction.sortInverse == -1 }
127 |                                     "></i>
128 |                                 <a href="#" v-on:click="doSort($event, 'name')">Nome</a>
129 |                             </th>
130 |                             <th v-show="interaction.visibleColumns.indexOf('city') > -1">
131 |                                 <i class="fa fa-fw fa-sort"
132 |                                     v-bind:class="
133 |                                         { 'fa-sort-amount-asc':interaction.sortColumn == 'city' && interaction.sortInverse == 0,
134 |                                         'fa-sort-amount-desc':interaction.sortColumn == 'city' && interaction.sortInverse == -1 }
135 |                                     "></i>
136 |                                 <a href="#" v-on:click="doSort($event, 'city')">Cidade</a>
137 |                             </th>
138 |                             <th v-show="interaction.visibleColumns.indexOf('state') > -1">
139 |                                 <i class="fa fa-fw fa-sort"
140 |                                     v-bind:class="
141 |                                         { 'fa-sort-amount-asc':interaction.sortColumn == 'state' && interaction.sortInverse == 0,
142 |                                         'fa-sort-amount-desc':interaction.sortColumn == 'state' && interaction.sortInverse == -1 }
143 |                                     "></i>
144 |                                 <a href="#" v-on:click="doSort($event, 'state')">Estado</a>
145 |                             </th>
146 |                             <th v-show="interaction.visibleColumns.indexOf('country') > -1">
147 |                                 <i class="fa fa-fw fa-sort"
148 |                                     v-bind:class="
149 |                                         { 'fa-sort-amount-asc':interaction.sortColumn == 'country' && interaction.sortInverse == 0,
150 |                                         'fa-sort-amount-desc':interaction.sortColumn == 'country' && interaction.sortInverse == -1 }
151 |                                     "></i>
152 |                                 <a href="#" v-on:click="doSort($event, 'country')">País</a>
153 |                             </th>
154 |                             <th v-show="interaction.visibleColumns.indexOf('last_mod') > -1">
155 |                                 <i class="fa fa-fw fa-sort"
156 |                                     v-bind:class="
157 |                                         { 'fa-sort-amount-asc':interaction.sortColumn == 'last_mod' && interaction.sortInverse == 0,
158 |                                         'fa-sort-amount-desc':interaction.sortColumn == 'last_mod' && interaction.sortInverse == -1 }
159 |                                     "></i>
160 |                                 <a href="#" v-on:click="doSort($event, 'last_mod')">Atualizado em</a>
161 |                             </th>
162 |                             <th width="1%" nowrap>
163 |                                 <a href="#" v-on:click="openAllDetails">
164 |                                     <i class="fa"
165 |                                         v-bind:class="
166 |                                             { 'fa-plus-square':interaction.openDetails.length == 0,
167 |                                             'fa-minus-square':interaction.openDetails.length > 0 }
168 |                                         "></i>
169 |                                 </a>
170 |                             </th>
171 |                             <th width="1%" nowrap>
172 |                                 <i class="fa fa-fw fa-edit"></i>
173 |                             </th>
174 |                         </tr>
175 |                     </thead>
176 |                     <tbody v-for="cervejaria in cervejarias.list | orderBy interaction.sortColumn interaction.sortInverse">
177 |                         <tr>
178 |                             <td v-show="interaction.visibleColumns.indexOf('name') > -1">{{ cervejaria.name }}</td>
179 |                             <td v-show="interaction.visibleColumns.indexOf('city') > -1">{{ cervejaria.city }}</td>
180 |                             <td v-show="interaction.visibleColumns.indexOf('state') > -1">{{ cervejaria.state }}</td>
181 |                             <td v-show="interaction.visibleColumns.indexOf('country') > -1">{{ cervejaria.country }}</td>
182 |                             <td v-show="interaction.visibleColumns.indexOf('last_mod') > -1">{{ cervejaria.last_mod | dateFormat 'DD/MM/YYYY HH:mm:ss' }}</td>
183 |                             <td>
184 |                                 <a href="#"
185 |                                     v-show="cervejaria.descript != ''"
186 |                                     v-on:click="doOpenDetails($event, cervejaria.id)">
187 |                                     <i class="fa"
188 |                                         v-bind:class="
189 |                                             { 'fa-plus-square':interaction.openDetails.indexOf(cervejaria.id) == -1,
190 |                                             'fa-minus-square':interaction.openDetails.indexOf(cervejaria.id) > -1 }"></i>
191 |                                 </a>
192 |                                 <i class="fa fa-plus-square"
193 |                                     v-show="cervejaria.descript == ''"
194 |                                     style="opacity:0.3"></i>
195 |                             </td>
196 |                             <td width="1%" nowrap>
197 |                                 <a href="#" v-on:click="edit($event, cervejaria)"><i class="fa fa-fw fa-edit"></i></a>
198 |                             </td>
199 |                         </tr>
200 |                         <tr v-show="interaction.openDetails.indexOf(cervejaria.id) > -1 && cervejaria.descript != ''">
201 |                             <td colspan="6">{{ cervejaria.descript }}</td>
202 |                         </tr>
203 |                     </tbody>
204 |                 </table>
205 | 
206 |                 <nav class="text-center">
207 |                     <ul class="pagination">
208 |                         <li v-bind:class="{ disabled:pagination.currentPage == 1 }">
209 |                             <a href="#" v-on:click="previous" aria-label="Previous">
210 |                                 <span aria-hidden="true">&laquo;</span>
211 |                             </a>
212 |                         </li>
213 |                         <li
214 |                             v-for="pageNumber in pagination.pageNumbers"
215 |                             v-bind:class="{ active:pageNumber == pagination.currentPage }"
216 |                             v-if="Math.abs(pageNumber - pagination.currentPage) <= pagination.visibleNumbers">
217 |                             <a href="#" v-on:click="page($event, pageNumber)">{{ pageNumber }}</a>
218 |                         </li>
219 |                         <li v-bind:class="{ disabled:pagination.currentPage == pagination.totalPages }">
220 |                             <a href="#" v-on:click="next" aria-label="Next">
221 |                                 <span aria-hidden="true">&raquo;</span>
222 |                             </a>
223 |                         </li>
224 |                     </ul>
225 |                 </nav>
226 | 
227 |                 <!-- <div class="well">
228 |                     <pre>{{ $data.pagination | json }}</pre>
229 |                 </div> -->
230 |             </div>
231 |         </div>
232 |     </div>
233 | 
234 |     <div>
235 |         <script src="/node_modules/jquery/dist/jquery.js"></script>
236 |         <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
237 |         <script src="/node_modules/vue/dist/vue.js"></script>
238 |         <script src="/node_modules/vue-resource/dist/vue-resource.js"></script>
239 |         <script src="/node_modules/moment/moment.js"></script>
240 |         <script src="/node_modules/select2/dist/js/select2.js"></script>
241 |         <script src="/node_modules/lodash/index.js"></script>
242 |         <script src="app.js"></script>
243 |     </div>
244 | </body>
245 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "VueSeries",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "bootstrap": "^3.3.5",
13 |     "font-awesome": "^4.4.0",
14 |     "jquery": "^2.1.4",
15 |     "lodash": "^3.10.1",
16 |     "moment": "^2.10.6",
17 |     "select2": "^4.0.0",
18 |     "vue": "^1.0.0",
19 |     "vue-resource": "^0.1.15"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------