Développer Vue avec VSCode
Visual Studio Code (VS Code) est un éditeur de code gratuit et open source développé par Microsoft qui prend en charge plusieurs langages de programmation et fournit des fonctionnalités telles que la coloration syntaxique, la complétion intelligente de code, la refactorisation de code et le débogage.
Visual Studio Code prend en charge nativement les briques de base de Vue.js : HTML, CSS et JavaScript.
VS Code dispose d'un terminal intégré qui vous permet d'exécuter des outils en ligne de commande tels que npm et yarn directement dans l'éditeur, ce qui facilite la construction et la gestion de projet.
Si vous souhaitez un environnement de développement Vue.js plus riche, vous pouvez installer les extensions Volar et Volar for TypeScript, qui fournissent IntelliSense pour Vue.js.
Si vous ne connaissez pas encore VS Code ou si vous ne l'avez pas installé, vous pouvez vous référer à :Tutoriel VSCode。
Créer un projet Vue
Ouvrez un terminal ou une invite de commandes et saisissez la commande suivante :
npm create vue@latest
Le système vous demandera de saisir un nom de projet. Ici, je saisisexample-vue3-app：
Vue.js - The Progressive JavaScript Framework ? 请输入项目名称： › example-vue3-app
Ensuite, il y aura quelques options. Vous pouvez choisir selon vos besoins, ou simplement appuyer sur Entrée jusqu'au bout :
Vue.js - The Progressive JavaScript Framework > 请输入项目名称： … example-vue3-app > 是否使用 TypeScript 语法？ … 否 / 是 > 是否启用 JSX 支持？ … 否 / 是 > 是否引入 Vue Router 进行单页面应用开发？ … 否 / 是 > 是否引入 Pinia 用于状态管理？ … 否 / 是 > 是否引入 Vitest 用于单元测试？ … 否 / 是 > 是否要引入一款端到端（End to End）测试工具？ › 不需要 > 是否引入 ESLint 用于代码质量检测？ › 否 正在初始化项目 /Users/tianqixin/example-vue3-app... 项目初始化完成，可执行以下命令： cd example-vue3-app npm install npm run dev
Une fois le projet créé, entrez dans le dossier du projet et installez les dépendances :
cd example-vue3-app npm install
L'installation des dépendances peut également prendre quelques minutes.
Saisissez la commande suivante pour démarrer rapidement votre application Vue :
npm run dev
Ouvrez http://localhost:5173 dans le navigateur, et il s'affiche comme suit :
Appuyez sur Ctrl+C pour arrêter le serveur vue-cli-service.
Ouvrir le projet Vue dans VS Code
Depuis le terminal ou l'invite de commande, accédez au dossier de projet Vue que nous avons créé, example-vue3-app, puis utilisez la commandecodepour ouvrir le projet dans VS Code :
cd example-vue3-app code .
VS Code démarrera et affichera votre projet Vue dans l'explorateur de fichiers, comme montré ci-dessous :
Choisissez simplement de l'installer.
Après l'installation, les fichiers .vue sont reconnus comme des types de fichiers Vue.js et prennent en charge les fonctionnalités de langage suivantes :
- Coloration syntaxique
- Appariement des parenthèses
- Description au survol
IntelliSense
Lorsque vous saisissez du code dans App.vue, vous verrez IntelliSense pour HTML, CSS et la syntaxe spécifique à Vue.js (comme v-bind, v-for).
Dans la section script, vous pouvez également voir des indications sur les fonctionnalités JavaScript liées à Vue.js, telles que la propriété computed.
Aller à la définition, Aperçu de la définition
Grâce à l'extension Volar installée, VS Code prend en charge le service de langage Vue.js.
Placez le curseur sur App, faites un clic droit et sélectionnez Aperçu de la définition pour afficher les informations de définition, ou appuyez sur le raccourci⌥F12。
Vous verrez une fenêtre contextuelle affichant les informations de définition de App.
Appuyez sur la toucheEscpour fermer la fenêtre Peek.
Modifier et exécuter "Hello World"
Dans App.vue, remplacez le texte de l'attribut personnalisé msg du composant HelloWorld par "Hello World!" :
Exemple
<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>
Enregistrez le fichier App.vue (raccourci clavier⌘SouCtrl+S), puis redémarrez le serveur avec la commande suivante :
npm run dev
Dans le navigateur, vous verrez la page afficher "Hello World!".
