module 2 - vue cli

Author: rnovec

.gitignore

@@ -10,3 +10,5 @@ dist
 .basement
 config.local.js
 basement_dist
+mod2
+mod3

docs/.vuepress/config.js

@@ -43,6 +43,10 @@ module.exports = {
         text: 'Vuex',
         link: '/vuex/',
       },
+      {
+        text: 'Advanced',
+        link: '/advanced/',
+      },
       {
         text: 'AscoMusic',
         link: '/project/',
@@ -74,7 +78,6 @@ module.exports = {
           collapsable: false,
           children: [
             '',
-            'custom',
             'router'
           ]
         }
@@ -88,12 +91,24 @@ module.exports = {
           ]
         }
       ],
+      '/advanced/': [
+        {
+          title: 'Conceptos Avanzados',
+          collapsable: false,
+          children: [
+            '',
+            'production',
+          ]
+        }
+      ],
       '/project/': [
         {
           title: 'AscoMusic',
           collapsable: false,
           children: [
             '',
+            'views',
+            'api',
           ]
         }
       ],

docs/advanced/README.md

@@ -0,0 +1,111 @@
+# Plugins & Servicios
+```js
+MyPlugin.install = function (Vue, options) {
+  // 1. agregar método global o propiedad
+  Vue.myGlobalMethod = function () {
+    // algo de lógica...
+  }
+
+  // 2. agregar un recurso global
+  Vue.directive('my-directive', {
+    bind (el, binding, vnode, oldVnode) {
+      // algo de lógica...
+    }
+    ...
+  })
+
+  // 3. inyectar algunas opciones de componentes
+  Vue.mixin({
+    created: function () {
+      // algo de lógica...
+    }
+    ...
+  })
+
+  // 4. agregar un método de instancia
+  Vue.prototype.$myMethod = function (methodOptions) {
+    // algo de lógica...
+  }
+}
+```
+
+# Filtros
+```js
+const msToMm = {}
+
+function convertMsToMm (ms) {
+  const min = Math.floor(ms / 60000)
+  const sec = ((ms % 60000) / 1000).toFixed(0)
+
+  return `${min}:${sec < 10 ? `00` : sec} min`
+}
+
+msToMm.install = function (Vue) {
+  Vue.filter('msToMm', val => {
+    return convertMsToMm(val)
+  })
+}
+
+export default msToMm
+
+```
+
+# Mixins
+```js
+const myOwnMixin = {
+  data() {
+    return {} 
+  },
+  methods: {},
+  computed: {}
+  }
+}
+
+export default myOwnMixin
+```
+
+
+# Directivas
+```js
+const blur = {}
+
+function setBlur (el, binding) {
+  el.style.filter = !binding.value ? 'blur(3px)' : '(none)'
+  el.style.filter = !binding.value ? 'not-allowed' : 'inherit'
+
+  el.querySelectorAll('a').forEach(element => {
+    if (!binding.value) {
+      element.setAttribute('disabled', true)
+    } else {
+      element.removeAttribute('disabled')
+    }
+  })
+}
+
+blur.install = function (Vue) {
+  Vue.directive('blur', {
+    bind (el, binding) {
+      setBlur(el, binding)
+    }
+  })
+}
+
+export default blur
+```
+
+
+# Watchers
+```js
+export default {
+    data() {
+      return {
+        value: 0
+      }
+    },
+    watch: {
+        value(val) {
+            console.log('algo ha cambiado!!!')
+        }
+    }
+}
+```

docs/advanced/production.md

@@ -0,0 +1,37 @@
+# Puesta en producción
+
+    $ npm run build
+
+## Github Pages
+
+    $ npm i gh-pages
+
+> publish.js
+```js
+const ghpages = require('gh-pages')
+const BRANCH = 'gh-pages'
+const FOLDER_DIST = 'dist'
+
+const TODAY = new Date().toLocaleString()
+
+console.log(`start publishing folder ${FOLDER_DIST} to ${BRANCH}`)
+
+ghpages.publish(FOLDER_DIST, {
+  branch: BRANCH,
+  message: `Publishing folder ${FOLDER_DIST} to ${BRANCH} in ${TODAY}`
+}, () => {
+  console.log(`done publishing folder ${FOLDER_DIST} to ${BRANCH}`)
+})
+
+```
+
+    $ node publish.js
+
+
+## vue.config.js
+
+```js
+module.exports = {
+  publicPath: '/adc-music'
+}
+```

docs/cli/custom.md

@@ -1,9 +1,33 @@
 # Enrutamiento
+```js
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "@/views/HelloWorld";
 
+Vue.use(VueRouter);
 
-# Peticiones HTTP
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home // importacion desde una variable
+  },
+  {
+    path: "/todo-list",
+    name: "TodoList",
+    component: () => import('@/views/TodoList') // importación directa
+  }
+];
+
+const router = new VueRouter({
+  mode: 'history', // por defecto es hash
+  routes
+});
 
+export default router;
 
-# Poniendo en producción
+```
+
+# Peticiones HTTP
 
-# Vue config.js
+    $ npm i axios

docs/cli/router.md

@@ -2,4 +2,14 @@
 
 [Demo](https://adc-music.herokuapp.com/)
 
-## API Backend
+## Instalación
+    $ vue create adc-music
+    $ cd adc-music
+    $ npm run serve
+
+## Features
+- Babel
+- Vue Router
+- Vuex
+- Buefy
+- Axios

docs/project/README.md

@@ -0,0 +1,52 @@
+# API Backend
+
+> **API Root** https://adc-spotify-api.herokuapp.com
+
+## User Login
+
+> **GET** /callback?code=AQAgj5zSW8HfWdU0e8gI....
+
+### Query params
+| Name | Type  | Description
+|---|---|---|
+| **code**  | *string*  | Código de autorización devuelto por OAuth de Spotify |
+
+
+### Response
+```json
+HTTP/1.0 200 OK
+
+{
+    "access_token":"BQDcJpa-mzM12bDO85YV3_vkm6u...q2X29d5KtYikezw-QY43ldjQ",
+    "token_type":"Bearer",
+    "expires_in":3600,
+    "refresh_token":"AQCD1uBOMwE5E0tf1rYA5...ygeE8BwgDEin4s",
+    "scope":"user-read-email user-read-private"
+}
+```
+## Search Track
+
+> **GET** /search?q=rock&type=track&offset=0
+### Query params
+| Name | Type  | Description
+|---|---|---|
+| **q**  | *string*  | Artista, género, canción a buscar |
+| **type**  | *string*  | **track** / **album** / **artist** |
+| **offset**  | *number*  | desplazamiento por paginación |
+
+
+### Response
+```json
+HTTP/1.0 200 OK
+
+{
+    "tracks": {
+        "href":"https://api.spotify.com/v1/search?query=f&type=track&offset=0&limit=20",
+        "items":[...],
+        "limit":20,
+        "next":"https://api.spotify.com/v1/search?query=f&type=track&offset=0&limit=20","offset":0,
+        "previous":null,
+        "total":98
+    }
+}
+```