Ahora se instala vue-cli de la siguiente forma !!!
npm install -g @vue/cli
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
Create an account or log in
Keep learning for free! Join and start boosting your career
Resources
What are the essential tools to develop with BioJS?
BioJS development requires certain tools that facilitate the process and maximize the programmer's efficiency. Getting into the technological ecosystem of BioJS is much easier if you understand the usefulness of each component and the correct ways of installation. Next, we will explore the tools needed to work effectively in this environment and how to install them.
Why is it essential to install Node.js and NPM?
Node.js is a runtime environment for JavaScript that allows you to run JavaScript code outside of a browser. Although BioJS does not run directly on top of Node.js, many important tools in the ecosystem, such as Webpack and Babel, depend on it. That makes installing Node.js a cornerstone.
Steps to install Node.js and NPM:
- Head to the official Node.js website.
- Download the appropriate installer for your operating system. Although you can also do this via package managers on Linux or Mac, the installer is simple and efficient.
- Complete the installation, which will automatically include NPM, the package manager for Node.js.
To verify a successful installation:
node -vnpm -vIf these commands return the installed versions, you're done! You now have Node.js and NPM on your system.
What is Vue DevTools and why should you consider it?
Vue DevTools is a Chrome browser extension that enables real-time debugging and inspection of Vue.js applications. Through Vue DevTools, you can get a clear perspective of the state of your components, view their properties and methods, and better understand their behavior within the application.
Steps to install Vue DevTools:
- Visit the Vue DevTools repository on GitHub.
- Follow the link to install it from the Chrome Web Store with a single click.
For Firefox users, there is an alternative in the repository that can be installed, although the experience is not the same as Chrome. By using this extension, you will improve efficiency and effectiveness when developing and identifying issues in your Vue.js applications.
How to use Vue CLI to create applications?
Vue CLI is a powerful command-line tool for Vue.js, which simplifies the initial setup of an application. It provides templates and handles complex configurations, allowing you to focus on development instead of configuration.
Steps to install Vue CLI:
- Open a terminal and install Vue CLI globally using NPM:
npm install -g @vue/cliThe -g flag ensures that Vue CLI is installed globally, allowing it to be used anywhere on the operating system.
What are .vue files?
The .vue files play a central role in Vue.js, encapsulating logic, style and HTML structure in a single file.
- Template: Contains the HTML for the component.
- Script: Exports an ES6 module, implementing the component's logic.
- Style: Defines the CSS styles for the component.
Thanks to Vue CLI, these components can be compiled so that the browser understands them. The Single File Components structure streamlines the workflow, allowing all the necessary functionality of a component to be accessible and editable in one place. 이 is an example of a basic .vue file:
<template> <div> <h1>HelloWorld</h1> </div></div></template></template>
<script>
export default { name: 'MyComponent'}</script>
<style scoped>
h1 { color: blue;}</style>These tools and methodologies are just the beginning. By deepening your knowledge and mastery of them, you will maximize the potential of your BioJS and Vue.js projects. Keep learning, experiment with these technologies and expand your development toolbox; the world of web development is full of exciting opportunities.
Contributions 33
Questions 5
Sort by:
No me gusta que el curso sea tan antiguo ahora es 2020 la version de node ya es 12 y de npm ya es 6.
Deberian actualizar ya este curso, tiene la de anios. 😦
Mediante el CLI se pueden generar aplicaciones de vue sin necesidad de hacer todo el setup inicial y herramientas necesarias para empezar , y funciona con los principales empaquetadores como webpack o browserify.
Al trabajar así se crean los VUE files o Sinfle File components que son archivos con UN SOLO COMPONENTE.
VUE-CLI, generados de aplicaciones para vue. para instalar vue-cli 3,
npm install -g @vue/cli
A mi por alguna razón nunca me funcionó el Vue DevTools en Chrome en el curso básico de Vue, solo me funcionaba con Vue como script tag, pero nunca me funcionó para el CLI:(
los archivos .vue es lo más divertido de vue.js
Instalar vue-cli
Consulta. Se puede mezclar blade de laravel con vuejs? Vi en el video anterior que tienen una nomenclatura sumilar para escapar variables al front
en 06/2021
CLI:
https://cli.vuejs.org/
Para instalar la última versión en Ubuntu o en Debian pueden seguir este tutorial
https://blog.pleets.org/article/instalar-%C3%BAltima-version-de-nodejs-y-npm-en-ubuntu
https://blog.pleets.org/article/instalar-%C3%BAltima-version-de-nodejs-y-npm-en-debian
¿Qué paquetes de Atom me recomiendan instalar para trabajar cómodamente con Vue.js?
Les dejo este pequeño tutorial para trabajar en entornos windows de una manera más tranquila entorno de trabajo en windows
- Es necesario instalar node y npm.
- Se sugiere instalar el vue devtools del chrome,
- Se sugiere instalar el CLI (command Line Interface) de Vue mediante npm
Hola Este curso es más viejito que el introductorio ?
Para quien instalo CL3 también necesitaras
npm install -g @vue/cli-init
Yo no he tenido problemas con la vue-devtools de Mozilla, Todo lo contrario con chrome. 😦
Para este momento ya estamos en la versión 3 de Vue-Cli para instalarla cambia un poco ya que npm install -g vue-cli debe cambiar por
npm install -g @vue/cli
Si aún tienes la versión 2 te recomiendo cambiarla por la 3 utiliza npm uninstall -g vue-cli para desinstalar la versión 2 para posteriormente instalar la nueva versión.
para instalar el cli de vue en linux
sudo npm install -g vue/cli
para Opera se pueden instalar esta extension que te permite isntalar extensiones de chrome en opera sin ningun problema clickMe, yo la llevo usando mucho tiempo y no me ha dado fallo o error… Pueden instalar el Vue devtools sin problemas (Y)
Ahora me queda claro para que sirven las herramientas generadoras de estructuras de proyectos como VUE-CLI.
Alguno de ustedes conoce un IDE no un editor ligero para trabajar con todo esto de FrontEnd.
Trabajo en linux.
alguien me puede recomendar en que curso o tutorial enseñan que sigue cuando ya tienes tu aplicacion bien gustoza en local?? es decir, como la saco ya a produccion, como se configura un servidor para esto? que caracteristicas debe tener, sirve un apache un IIS? como funcionan estas cosas cuando estamos hablando de puro JS??
yo no pude pero un amigo me ayudó y fue con este comando:
sudo su npm install -g @vue/cli
Me pidió mi contraseña y luego ya comenzó con las instalación
Para los que quieran instalar vue dev tools en opera, deben instalar la extension de chrome en opera y listo!!
https://vuetiful.wordpress.com/2017/02/27/how-to-add-vue-devtools-to-opera/
Excellent!!
En la documentacion de CLI, la forma de crear el proyecto: indican
vue create my-project
y no
vue init webpack-simple platzi-music
a qué se debe?
Componentes tienen todo para trabajar
Markado
Script
Stylo
El CLI es un generador de aplicaciones que ya viene con todo lo necesario para trabajar
Requerimientos:
Se requiere tener NodeJS instalado para el desarrollo de una aplicación, si bien Vue no corre en Node, herramientas necesarias como Webpack y NPM sí.
Otra herramienta necesaria es Vue DevTools, esta nos permite debuggear, inspeccionar y ver en tiempo real el contenido de la aplicación.
Por último se necesita instalar Vue CLI, que es una herramienta que nos permite interactuar con Vue a través de comandos en la terminal.
Want to see more contributions, questions and answers from the community?