prefacio
El contenido de este capítulo es la construcción del entorno front-end de VUE y la discusión de las tecnologías front-end relacionadas.
Dirección del artículo siguiente:
Vue 3: Juega con la tecnología front-end web (2) - Lion King's Blog - CSDN Blog
1. Construcción del entorno
1. Instalar Node.js
Vue se basa en Node.js, por lo que primero se debe instalar Node.js. Dirección del sitio web oficial: Node.js
2. Instale la CLI de Vue
Vue CLI es una herramienta de andamiaje para construir rápidamente proyectos de Vue. Puede ingresar el siguiente comando para instalar Vue CLI globalmente:
npm install -g @vue/cli3. Crea un proyecto Vue
En la herramienta de línea de comandos, cree un nuevo proyecto Vue 3 con el siguiente comando:
vue create my-project4. Configurar el proyecto Vue
Después de crear el proyecto, Vue CLI le preguntará acerca de algunas opciones de configuración, simplemente presione Entrar para usar la configuración predeterminada.
5. Inicie el servidor de desarrollo
Después de crear el proyecto, vaya a la carpeta del proyecto:
cd my-projectLuego inicie el servidor de desarrollo con el siguiente comando:
npm run serve6. Accede al servidor de desarrollo
De acuerdo con el mensaje, ingrese la URL en el navegador:
7. Entorno de desarrollo
Utilice VScode para el desarrollo. Dirección del sitio web oficial: https://code.visualstudio.com/
2. Discusión sobre tecnologías relacionadas con front-end
1. ¿Tengo que usar vue-cli?
No puede instalarlo, pero es más problemático configurar el proyecto. Existen ventajas y desventajas en el uso de esta herramienta integrada. Lo bueno es que puedes entender los elementos de configuración y aumentar tu base técnica, lo malo es que la eficiencia no es alta y es incómodo de usar. Y esta serie de artículos serán artículos geniales. Si quieres ser genial, puedes usar varias herramientas directamente, y no es demasiado tarde para estudiar cuando sea necesario.
De hecho, Vue 3 ya no recomienda el uso de scaffolding. Primero, la velocidad de inicio del servicio es lenta, lo que conduce a una baja eficiencia de depuración (cuanto más grande es el proyecto, más obvio es); el segundo es que hay mejores alternativas. Para obtener más información, consulte los documentos relacionados con Vue: Introducción: Vue.js. _
2. npm y cnpm
npm es una herramienta oficial de administración de paquetes proporcionada por Node.js para instalar, actualizar y desinstalar módulos de Node.js.
cnpm es una herramienta de duplicación de npm desarrollada por el equipo de Taobao, cuyo objetivo es resolver el problema de la baja velocidad de descarga de npm en China.
La forma de usar cnpm y npm es básicamente la misma, ambos pueden instalar, actualizar y desinstalar módulos a través de herramientas de línea de comandos.
Si usa npm para descargar lentamente en China, puede considerar usar cnpm en lugar de npm. Sin embargo, en algunos casos especiales, es posible que aún necesite usar npm, como servicios que cnpm no puede ejecutar, pero npm sí puede ejecutar.
3. ¿Por qué elegir Vue?
De hecho, está bien. Un verdadero desarrollador front-end no solo necesita conocer Vue, sino también algunos marcos front-end convencionales. Solo quiero jugar y creer que la programación en diferentes lenguajes de programación puede ser resuelto, por lo que habrá una serie de artículos.
4. ¿Por qué elegir VScode?
De hecho, está bien, el código abierto es gratuito, muchas personas lo usan, la ecología es buena, hay ideas, solo elija un entorno de desarrollo que sea conveniente, sin necesidad de enredarse.
5. ¿Qué son las tecnologías front-end?
Esto es demasiado, en la tecnología cada vez más actualizada, es simplemente imposible de aprender. HTML, css, js y otros conceptos básicos siempre necesitan saber un poco, de todos modos, no puedo escapar, generalmente no memorizo estos, solo verifico la documentación cuando la necesito, incluso si la memorizo pronto, lo haré olvídalo, porque no es ese tipo de técnicos profesionales de front-end.
6. ¿Cómo debemos aprender VUE?
VUE recomienda oficialmente dominar la tecnología front-end básica antes de aprender, por lo que puede seguir los pasos a continuación:
(1) Familiarizado con HTML, CSS y JavaScript: Vue.js es un marco basado en JavaScript. Para aprender Vue.js, primero debe tener una cierta comprensión de estas tecnologías básicas de front-end.
(2) Comprender los conceptos básicos de Vue.js: Vue.js tiene algunos conceptos básicos, incluidos componentes, plantillas y ciclos de vida. Descubrir estos conceptos es muy importante para comprender y usar Vue.js.
(3) Instale Vue.js: puede importar Vue.js descargando el código fuente de Vue.js o directamente usando CDN. Además, también puede usar Vue CLI para crear rápidamente proyectos Vue.js.
(4) Cree una instancia de Vue: el núcleo de Vue.js es una instancia de Vue, puede crear su aplicación creando una instancia de Vue. Al crear una instancia, debe especificar algunas opciones, como el punto de montaje, los datos, etc.
(5) Aprenda las instrucciones de Vue y la sintaxis de la plantilla: Vue.js proporciona algunas instrucciones para manipular DOM y vincular datos. Al aprender Vue.js, es muy importante dominar estas instrucciones y comprender la sintaxis de la plantilla.
(6) Comprender el desarrollo basado en componentes de Vue: Vue.js es un marco orientado a componentes, y el código se puede hacer más modular y reutilizable a través del desarrollo basado en componentes. Aprender a crear y usar componentes es un paso importante para dominar Vue.js.
(7) Domine el ciclo de vida de Vue: cada componente de Vue.js tiene un ciclo de vida, y estas funciones de enlace del ciclo de vida pueden realizar algunas operaciones en diferentes etapas del componente. Comprender y utilizar las funciones del ciclo de vida es muy útil para trabajar con el comportamiento y los datos de los componentes.
(8) Aprenda la gestión del estado de Vue: cuando la aplicación se vuelve compleja, puede resultar difícil gestionar el estado entre los componentes. Vue.js proporciona Vuex como una herramienta de administración de estado; aprenda a usar Vuex para administrar y compartir mejor el estado.
(9) Ejercicios y práctica de proyectos: a través de ejercicios y prácticas de proyectos reales, puede profundizar su comprensión y aplicación de Vue.js. Intente crear algunos proyectos pequeños con Vue.js para reforzar lo que ha aprendido.
Sin embargo, esta serie de artículos no involucrará HTML, CSS y JavaScript directamente, sino indirectamente, y hablaremos de ello cuando lo usemos.