-p, --preset <presetName> omitir indicaciones
-d, --default usar el default en la creación
-m, --packageManager <command> Usar npm o yarn
-n, --no-git Sin utilizar git
-b, --bare Sin isntrucciones para principiantesvue create ejemplo1 -dnm yarnvue init simple nombre_proyecto
vue init webpack-simple nombre_proyecto
npm install -g npm-check-updates
ncu
ncu -u"production":"vue-cli-service build --modern"npx http-server ./dist/- Instalacion de json-server
npm install -g json-server
- Levanando el servidor local. Crear archivo json con el nombre db
json-server db.json
npm i accounting
o
yarn add accounting- Uso:
import accounting from 'accounting'; accounting.formatMoney(valor)
Libreria para Fechas: moment.js
- Repositorio.
- CDN.
- Web.
npm i moment
o
yarn add momentnpm i bootstrap jquery popper.js
o
yarn add bootstrap jquery popper.js @popperjs/core- utilizacion en el main.js o index.js
import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; window.$ = window.jQuery = require('jquery');
Esta dependencia permitirá trabajar e implementar desde VueJS las Lazy Loading Routes en conjunto con Vue-Router.
Documentación Oficial para Vue-Router Documentación oficial para babel:.
Instalacion de la dependencia:
npm install --save-dev @babel/plugin-syntax-dynamic-import
o
yarn add --dev @babel/plugin-syntax-dynamic-import-
Sitio oficial: Vue-Router
-
Usando el CDN o descarga del archivo: CDN/descarga
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
-
Instalacion con NPM:
npm i --save vue-router- Instalacion con Yarn:
yarn add vue-router-
Sitio oficial: Vuex,
-
Usando el CDN o descarga del archivo: CDN/descarga
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
-
Instalacion con NPM:
npm -i vuex --save- Instalacion con Yarn:
yarn add vuex- Utilizar mapState, mapGetters
import {mapState, mapGetters} from 'vuex'Para trabajar con bootstrap-vue es necesario primero instalar bootstrap.
-
Sitio oficial: Bootstrap-Vue,
-
Usando el CDN o descarga del archivo:
<head> <!-- Load required Bootstrap and BootstrapVue CSS --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <!-- Load polyfills to support older browsers --> <script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script> <!-- Load Vue followed by BootstrapVue, and BootstrapVueIcons --> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> </head>
-
Instalacion con NPM:
npm i bootstrap-vue- Instalacion con Yarn:
yarn add bootstrap-vue- utilizacion en el main.js o index.js
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap-vue/dist/bootstrap-vue.css'; import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin Vue.use(IconsPlugin)
node ./node_modules/webpack/bin/webpack --config ./build/webpack.config.js Para trabajar con firebase debes tener una cuenta de Google, ir al sitio web oficial y crear un nuevo proyecto, haciendo clic en comenzar, luego en añadir proyecto, escribir el nombre del proyecto y seguir los pasos.
npm i firebase --save- Instalacion con Yarn:
yarn add firebase -D- Para llevar una aplicacion al Hosting de firebase, se debe:
- Crear el proyecto en firebase
- Entrar en la seccion del hosting
- Hacer un clic en iniciar o get started
- Instalar mediante la terminal firebase tool con:
Con NPM
Con Yarn
npm i firebase-tools -g
yarn global add firebase-tools
- Luego clic en continuar dentro de firebase hosting
- Ahora en el editor, dentro del proyecto, se debe iniciar sesion de firebase con el comando:
firebase login, seleccionando o iniciando la sesion con la cuenta de gmail donde se encuentra ejecutando firebase hosting en la web - Ahora en la terminal, se debe iniciar el proyecto con
firebase init - Luego si en proceder
- Despues seleccionar el hosting
- Posteriormente selecciona el proyecto en el cual tienes activo el hosting.
- Ahora se debe escribir el nombre del directorio donde se encontraran los archivos de produccion. En este caso se debe ingresar "dist" porque este sera el nombre de la carpeta que crea vue-cli para al produccion.
- Indicar que si para compilar en una SFC
- Finalizado el proceso de configuracion de firebase, se debe iniciar el proceso de produccion con vue-cli mediante el comando "build", ya sea:
Con NPM
Con Yarn
npm run build
yarn build
- Terminado el procesod e produccion de vue-cli, se debe enviar los archivos de la carpeta dist al hosting de firebase, mediante la instruccion:
firebase deploy --only hosting
Para utilizar la libreria de FontAwesome de manera local sin el CDN, se deben instalar las dependencias:
- Instalacion con NPM:
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome- Instalacion con Yarn:
yarn add @fortawesome/vue-fontawesome -D
yarn add @fortawesome/free-solid-svg-icons -D
yarn add @fortawesome/fontawesome-svg-core -D
yarn add @fortawesome/fontawesome-free -D- Sitio Oficial: Vue-Fontawesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheck, faTimes } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
library.add(faCheck);
library.add(faTimes);
Vue.component('font-awesome-icon', FontAwesomeIcon);-
Sitio oficial: Axios,
-
Usando el CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ``` o ```javascript <script src="https://unpkg.com/axios/dist/axios.min.js"></script> ```
-
Instalacion con NPM:
npm install axios --save-dev- Instalacion con Yarn:
yarn add axios -DPara usar a Axios, se debe importar en cada componente donde se desea implementar dentro del script:
import axios from 'axios';-
Sitio Oficial: VueFire
-
Instalacion con NPM:
npm install vuefire firebase- Instalacion con Yarn:
yarn add vuefire firebaseEs el proceso de someter una aplicación a diferentes pruebas para comprobar que ésta funcionacorrectamente.
Para mayor información: Vue Test Utils
Un test unitario o “prueba unitaria” es un tipo de test automatizado, es decir, se debe poder ejecutarsin necesidad de intervención manual. Este test, se utiliza para comprobar que un método concretodel código de producción funciona correctamente.
Es una metodología que se utiliza para probar si el flujo de una aplicación se está ejecutando segúnlo diseñado de principio a fin.
La diferencia que tiene con los tests unitarios, es que end-to-end se enfoca en el sistema de maneraintegral, es decir probarlo como un todo.
Ambas técnicas, están orientadas a crear aplicaciones más robustas y centradas en los requisitosmás que en el contenido propio del código
Desarrollo guiado por pruebas de software, o Test-driven development (TDD), es una técnica quese basa en un desarrollo de pruebas a través de las cuales debe pasar el código, si está bienimplementado, se continúa creando código enfocado hacia la siguiente prueba, sinó, se configurahasta que pase la prueba y podamos ir a la siguiente fase.
Desarrollo dirigido por comportamiento o Behavior Driven Development (BDD), como bien lo indicasu nombre, no se trata de una técnica de testing, sino que es una estrategia de desarrollo (así comoTDD).
Mientras TDD se enfoca en la prueba unitaria, BDD en cambio, se enfoca en la prueba de más altonivel, la prueba funcional, la de aceptación, el foco está en cumplir con el negocio y no solo con elcódigo.
Una aseveración es una expresión booleana en un punto específico de un programa que seráverdadera a menos que haya un error en el programa.
O "Mock object" son sustitutos de objetos o componentes del sistema, utilizados en reemplazodurante las pruebas. Su principal función es validar que ciertos métodos sean llamados en los objetos que están imitando
Una función, Método o fragmento de código sustituto, que simula un comportamiento específicodentro de un objeto para facilitar las pruebas