Desarrollar Vue con VSCode
Visual Studio Code (abreviado VS Code) es un editor de código gratuito y de código abierto desarrollado por Microsoft, compatible con múltiples lenguajes de programación, y ofrece funciones como resaltado de código, autocompletado inteligente, refactorización de código y depuración.
Visual Studio Code tiene soporte integrado para los bloques fundamentales de Vue.js: HTML, CSS y JavaScript.
VS Code incluye una terminal integrada que permite ejecutar herramientas de línea de comandos directamente en el editor, como npm, yarn, etc., facilitando la construcción y gestión de proyectos.
Si deseas contar con un entorno de desarrollo Vue.js más completo, puedes instalar las extensiones Volar y Volar for TypeScript, que proporcionan sugerencias inteligentes (IntelliSense) para Vue.js.
Si aún no conoces VS Code o no lo has instalado, puedes consultar:Tutorial de VSCode。
Crear un proyecto Vue
Abre la terminal o el símbolo del sistema e ingresa el siguiente comando:
npm create vue@latest
El sistema te pedirá que ingreses el nombre del proyecto; en este caso escriboejemplo-vue3-app：
Vue.js - The Progressive JavaScript Framework ? 请输入项目名称： › ejemplo-vue3-app
Después aparecerán algunas opciones; puedes elegir según tus necesidades o simplemente presionar Enter hasta el final:
Vue.js - The Progressive JavaScript Framework > 请输入项目名称： … ejemplo-vue3-app > 是否使用 TypeScript 语法？ … 否 / 是 > 是否启用 JSX 支持？ … 否 / 是 > 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是 > 是否引入 Pinia 用于状态管理？ … 否 / 是 > 是否引入 Vitest 用于单元测试？ … 否 / 是 > 是否要引入一款端到端（End to End）测试工具？ › 不需要 > 是否引入 ESLint 用于代码质量检测？ › 否 正在初始化项目 /Users/tianqixin/ejemplo-vue3-app... 项目初始化完成，可执行以下命令： cd ejemplo-vue3-app npm install npm run dev
Una vez creado el proyecto, entra en la carpeta del proyecto e instala las dependencias:
cd ejemplo-vue3-app npm install
La instalación de dependencias también puede tardar unos minutos.
Ejecuta el siguiente comando para iniciar rápidamente tu aplicación Vue:
npm run dev
Abre http://localhost:5173 en el navegador y se mostrará lo siguiente:
Presiona Ctrl+C para detener el servidor vue-cli-service.
Abrir un proyecto Vue en VS Code
Desde la terminal o el símbolo del sistema, entra en la carpeta del proyecto Vue que creamos, ejemplo-vue3-app, y luego usacodeel comando para abrir el proyecto en VS Code:
cd ejemplo-vue3-app code .
VS Code se iniciará y mostrará tu proyecto Vue en el explorador de archivos, como se ve a continuación:
Simplemente elige instalarla.
Una vez instalada, los archivos .vue se reconocen como tipo de archivo Vue.js y se admiten las siguientes características de lenguaje:
- Resaltado de sintaxis
- Coincidencia de corchetes
- Descripción al pasar el cursor
Sugerencias inteligentes (IntelliSense)
Al escribir código en App.vue, verás sugerencias inteligentes para HTML, CSS y la sintaxis específica de Vue.js (como v-bind, v-for).
En la sección de script, también puedes ver sugerencias de características de JavaScript relacionadas con Vue.js, como la propiedad computed.
Ir a la definición, ver definición
Gracias a la extensión Volar instalada, VS Code es compatible con el servicio de lenguaje Vue.js.
Coloca el cursor sobre App, haz clic derecho y selecciona Peek Definition para ver la información de definición, o presiona el atajo de teclado⌥F12。
Verás una ventana emergente que muestra la información de definición de App.
PresionaEscla tecla para cerrar la ventana de vista.
Modificar y ejecutar "Hello World"
En App.vue, reemplaza el texto del atributo personalizado msg del componente HelloWorld por "Hello World!":
Ejemplo
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="Hello World!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
Guarda el archivo App.vue (atajo de teclado⌘SoCtrl+S), y luego reinicia el servidor con el siguiente comando:
npm run dev
En el navegador verás que la página muestra "Hello World!".
