Installation de Vue3

1. Version autonome

Nous pouvons télécharger directement la dernière version depuis le site officiel de Vue.js et l'utiliser avec la balise<script>pour l'importer.

Télécharger Vue.js

2. Utilisation de la méthode CDN

Ce qui suit recommande deux CDN relativement stables depuis l'étranger. Nous n'avons pas encore trouvé de bon CDN en Chine, il est donc toujours recommandé de les télécharger localement.

Staticfile CDN (Chine)

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

Essayez-le »

ByteDance CDN (Chine)

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

Essayez-le »

unpkg (instable en Chine)

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

Essayez-le »

cdnjs

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

Essayez-le »

Nous pouvons utiliser la version de build du module ES pour créer un environnement de développement plus moderne et modulaire :

Exemple

<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 EXAMPLE!'
      }
    }
  }).mount('#app')
</script>

Essayez-le »

3. Méthode NPM

Comme l'installation via npm est lente, ce tutoriel utilise le miroir de Taobao et sa commande cnpm. Pour les instructions d'installation et d'utilisation, reportez-vous à :Utilisation du miroir NPM de Taobao。

La version de npm doit être supérieure à 3.0. Si elle est inférieure à cette version, vous devez la mettre à niveau :

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


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

Lorsque vous construisez de grandes applications avec Vue.js, il est recommandé d'installer avec cnpm. cnpm fonctionne bien avec les bundlers de modules Webpack ou Browserify. Ensuite, exécutez la commande suivante dans la ligne de commande :

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

Cette commande installera et exécutera create-vue, qui est l'outil officiel d'échafaudage de projet de Vue.

<hr> <h2>Outil en ligne de commande</h2> <p>Vue.js fournit un outil officiel en ligne de commande qui peut être utilisé pour construire rapidement de grandes applications monopages.</p> <p>Pour Vue 3, vous devez utiliser Vue CLI v4.5 disponible sur npm sous le nom @vue/cli. Pour mettre à jour, vous devez réinstaller globalement la dernière version de @vue/cli :</p> <pre># Installer vue-cli globalement yarn global add @vue/cli # ou cnpm install -g @vue/cli</pre> <p>Après l'installation, vérifiez la version :</p> <pre> $ vue --version @vue/cli 4.5.11 </pre><p>Ensuite, exécutez dans un projet Vue :</p><pre>vue upgrade --next</pre> <p><strong>Remarque :</strong> vue-cli 3.x et vue-cli 2.x utilisent la même commande vue. Si vous avez précédemment installé vue-cli 2.x, il sera remplacé par Vue-cli 3.x.</p> <p>Si vous avez encore besoin d'utiliser l'ancienne version de la fonctionnalité vue init, vous pouvez installer globalement un outil de pont :</p> <pre>npm install -g @vue/cli-init # L'effet de l'exécution de vue init sera le même que [email protected] vue init webpack my-project</pre> <h3>Créer un projet</h3> <p>Dans l'exemple suivant, nous utilisons la commande vue init pour créer un projet. Vous verrez des invites de fonctionnalités optionnelles telles que TypeScript et la prise en charge des tests :</p> 
$ npm init vue@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework
# 这里需要进行一些配置，项目名输入 example-vue3-test，其他默认回车即可
-> Project name: … example-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/example/example-test/example-vue3/example-vue3-test...

Done. Now run:

  cd example-vue3-test
  npm install
  npm run dev

Si vous n'êtes pas sûr de vouloir activer une fonctionnalité, vous pouvez simplement appuyer sur Entrée pour sélectionner Non.

Une fois le projet créé, installez les dépendances et démarrez le serveur de développement en suivant les étapes ci-dessous :

$ cd example-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

Après avoir exécuté avec succès les commandes ci-dessus, visitezhttp://localhost:5173/, le résultat de sortie est comme indiqué ci-dessous :

Remarque :Vue.js ne prend pas en charge IE8 et les versions d'IE antérieures.

Utilisation de l'interface graphique

Nous pouvons utiliser la commandevue uipour ouvrir l'interface graphique afin de créer et gérer des projets :

vue ui

L'exécution de la commande ci-dessus ouvrira une interface graphique dans le navigateur pour guider la création du projet :

Vite

Vite est un outil de build pour le développement web. Grâce à son approche native d'import de modules ES, il peut atteindre un démarrage à froid du serveur ultra-rapide.

En exécutant la commande suivante dans le terminal, vous pouvez utiliser Vite pour créer rapidement un projet Vue. Le format de syntaxe est le suivant :

npm init vite-app <project-name>

Créer le projet example-vue3-test2 :

$  npm init vite-app example-vue3-test2

Lancer le projet :

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

[vite] Optimizable dependencies detected:
vue

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

Ouvrezhttp://localhost:3000/, l'affichage est le suivant :

Autres extensions