Instalación de Vue3

1. Versión independiente

Podemos descargar la última versión directamente desde el sitio web oficial de Vue.js y usar la<script>etiqueta <script> para incluirla.

Descargar Vue.js

2. Usar el método CDN

A continuación se recomiendan dos CDN extranjeros relativamente estables; aún no se ha encontrado uno bueno en China, por lo que por ahora se sugiere descargarlo localmente.

Staticfile CDN (China)

<div id="app"> <p>{{ message }}</p> </div>

Pruébalo »

ByteDance CDN (China)

<div id="app"> <p>{{ message }}</p> </div>

Pruébalo »

unpkg (inestable en China)

<div id="app"> <p>{{ message }}</p> </div>

Pruébalo »

cdnjs

<div id="app"> <p>{{ message }}</p> </div>

Pruébalo »

Podemos usar la versión de compilación de módulos ES para crear un entorno de desarrollo más moderno y modular:

Ejemplo

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
 
  createApp({
    data() {
      return {
        message: 'Hello EJEMPLO!'
      }
    }
  }).mount('#app')
</script>

Pruébalo »

3. Método NPM

Debido a que la instalación con npm es lenta, este tutorial utiliza el espejo de Taobao y su comando cnpm. Para las instrucciones de instalación y uso, consulta:Usar el espejo NPM de Taobao。

La versión de npm debe ser mayor que 3.0; si es inferior a esta versión, debes actualizarla:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

Al construir aplicaciones grandes con Vue.js, se recomienda usar cnpm para la instalación. cnpm funciona bien con los empaquetadores de módulos Webpack o Browserify. Luego ejecuta el siguiente comando en la línea de comandos:

# 最新稳定版
$ npm init vue@latest

Este comando instalará y ejecutará create-vue, que es la herramienta oficial de andamiaje de proyectos de Vue.

<hr> <h2>Herramienta de línea de comandos</h2> <p>Vue.js proporciona una herramienta oficial de línea de comandos que se puede utilizar para crear rápidamente grandes aplicaciones de una sola página.</p> <p>Para Vue 3, debes usar Vue CLI v4.5 disponible en npm como @vue/cli. Para actualizar, debes reinstalar globalmente la última versión de @vue/cli:</p> <pre># Instalar vue-cli globalmente yarn global add @vue/cli # o cnpm install -g @vue/cli</pre> <p>Después de la instalación, verifica la versión:</p> <pre> $ vue --version @vue/cli 4.5.11 </pre><p>Luego ejecuta en el proyecto Vue:</p><pre>vue upgrade --next</pre> <p><strong>Nota:</strong> vue-cli 3.x y vue-cli 2.x usan el mismo comando vue. Si previamente instalaste vue-cli 2.x, será reemplazado por Vue-cli 3.x.</p> <p>Si aún necesitas usar la función vue init de la versión anterior, puedes instalar globalmente una herramienta puente:</p> <pre>npm install -g @vue/cli-init # El efecto de ejecución de vue init será el mismo que [email protected] vue init webpack my-project</pre> <h3>Crear un proyecto</h3> <p>En el siguiente ejemplo usamos el comando vue init para crear un proyecto. Verás indicaciones de funciones opcionales como TypeScript y soporte de pruebas:</p> 
$ npm init vue@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 ejemplo-vue3-test，其他默认回车即可
-> Project name: … ejemplo-vue3-test
-> Add TypeScript? … No / Yes
-> Add JSX Support? … No / Yes
-> Add Vue Router for Single Page Application development? … No / Yes
-> Add Pinia for state management? … No / Yes
-> Add Vitest for Unit Testing? … No / Yes
-> Add an End-to-End Testing Solution? › No
-> Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/ejemplo/ejemplo-test/ejemplo-vue3/ejemplo-vue3-test...

Done. Now run:

  cd ejemplo-vue3-test
  npm install
  npm run dev

Si no estás seguro de si debes habilitar una función, simplemente presiona Enter para seleccionar No.

Después de que se cree el proyecto, instala las dependencias e inicia el servidor de desarrollo siguiendo los siguientes pasos:

$ cd ejemplo-vue3-test
$ npm install
$ npm run dev
  VITE v4.3.4  ready in 543 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Después de ejecutar correctamente los comandos anteriores, accede ahttp://localhost:5173/, el resultado se muestra a continuación:

Nota:Vue.js no es compatible con IE8 ni versiones inferiores de IE.

Usar la interfaz gráfica

Podemos, mediante elvue uicomando, abrir la interfaz gráfica para crear y administrar proyectos:

vue ui

Ejecutar el comando anterior abrirá una interfaz gráfica en el navegador para guiar la creación del proyecto:

Vite

Vite es una herramienta de compilación para desarrollo web. Gracias a su método nativo de importación de módulos ES, consigue un arranque del servidor en frío extremadamente rápido.

Ejecutando el siguiente comando en la terminal, puedes usar Vite para construir rápidamente un proyecto Vue. El formato de sintaxis es el siguiente:

npm init vite-app <project-name>

Crear el proyecto ejemplo-vue3-test2:

$  npm init vite-app ejemplo-vue3-test2

Ejecutar el proyecto:

$ cd ejemplo-vue3-test2
$ cnpm install
$ cnpm run dev
> [email protected] dev /Users/ejemplo/ejemplo-test/vue3/ejemplo-vue3-test2
> vite

[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/

Abrehttp://localhost:3000/, se muestra a continuación:

Otras extensiones