Instalación de Vue.js

1. Versión independiente

Podemos descargar directamente vue.min.js desde el sitio web oficial de Vue.js y usar<script>Introducción mediante la etiqueta.

Descargar Vue.js

2. Usar el método CDN

A continuación se recomiendan dos CDN extranjeros bastante estables. En China todavía no se ha encontrado ninguno que sea muy bueno, por ahora se recomienda descargarlo localmente.

CDN de ByteDance (China)

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

Pruébalo »

unpkg (recomendado)

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

Pruébalo »

cdnjs

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

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 la introducción sobre 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 instalar:

# 最新稳定版
$ cnpm install vue

Herramienta de línea de comandos

Vue.js proporciona una herramienta de línea de comandos oficial que se puede utilizar para crear rápidamente aplicaciones grandes de una sola página.

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author ejemplo <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

Entra en el proyecto, instala y ejecuta: 

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

Después de ejecutar correctamente los comandos anteriores, visita http://localhost:8080/ y el resultado se mostrará de la siguiente manera:

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

Empaquetado del proyecto Vue

Para empaquetar el proyecto Vue, usa el siguiente comando:

npm run build

Una vez completada la ejecución, se generará undistdirectorio, que generalmente contiene el archivo index.html y el directorio static. El directorio static contiene los archivos estáticos js, css y el directorio de imágenes images.

Si haces doble clic directamente en index.html para abrir el navegador, la página puede estar en blanco. Para que se muestre correctamente, puedes modificar las rutas de los archivos js y css en el archivo index.html.

Por ejemplo, si abrimos el archivo dist/index.html, veremos que las rutas son rutas absolutas:

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

Cambiamos las rutas de js y css a rutas relativas:

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

De esta manera, al hacer doble clic directamente en el archivo dist/index.html, podrás ver el efecto en el navegador.

Editor

VS Code

VS Code (nombre completo Visual Studio Code) es un editor de código gratuito, de código abierto y multiplataforma desarrollado por Microsoft.

VS Code es compatible con Windows, macOS y Linux, y cuenta con potentes funciones y una flexible capacidad de extensión.

Tutorial de VS Code:https://www.example.com/vscode/vscode-tutorial.html

Además, en China, Alibaba y ByteDance también tienen IDEs de IA desarrollados basados en VS Code:

  • Alibaba Qoder:https://qoder.com/

    • Otras extensiones