Tutoriel détaillé étape par étape pour développer des projets Vue basés sur vscode

1. Tutoriel détaillé des étapes de téléchargement et d'installation de Vue (pro-test efficace) 1_Water w's Blog-CSDN Blog

2. Tutoriel détaillé des étapes de téléchargement et d'installation de Vue (pro-test efficace) 2. Installation et création de projets par défaut_水w的博客-CSDN博客

Table des matières

Cinq, projet de vue de développement npm intégré à vscode

1. Plug-ins requis pour l'installation de vscode :

2. Construire une petite page vue (débuter avec vue)

3. Une compréhension générale des idées de conception de Vue

4. Facile à utiliser

【1】Si le composant est nouvellement créé, comment utiliser le composant ?

Résoudre l'erreur : le nom du composant "Hello" doit toujours être composé de plusieurs mots

[2] Comment réutiliser les composants ? Et comment les composants transmettent-ils des valeurs ?

5. element-ui : fournir des composants communs

【1】Télécharger element-ui

Résoudre l'erreur : impossible de résoudre la dépendance : npm ERR ! peer vue@"^2.5.17" de element-ui@2.15.13

conseils : Comment exécuter le code du projet téléchargé sur Internet ?

【2】Introduire elementUI

Résoudre le rapport d'erreur : Vue présente le rapport d'erreur Element-ui

【3】Facile à utiliser : formulaire de base

---

Cinq, projet de vue de développement npm intégré à vscode

1. Plug-ins requis pour l'installation de vscode :

• Outil de développement Vue Vetur : un must pour développer avec vue, fonction officiellement recommandée : mettre en surbrillance .vueles fichiers, avec fonction de formatage, et coopérer avec le plug-in Eslint pour formater et vérifier le code.
• Surveillance de la spécification de code ESLint :
  •  Fonction : vérifiez vos codes js, html, css pour vous assurer qu'ils sont conformes aux spécifications et que le style de code est cohérent, règles obligatoires, vous serez strictement signalé si vous écrivez un espace de moins ou appuyez sur un retour chariot de plus, obsessionnel- trouble compulsif Gospel, les étudiants qui l'utilisent pour la première fois peuvent être fous, mais vous le remercierez après vous être familiarisé avec lui.
  • Utilisation : Pour que le plug-in prenne effet, votre projet doit faire une configuration compliquée. Heureusement, le projet généré par vue-cli peut nous aider à générer toutes les configurations. Vous n'avez pas besoin de modifier les règles, juste Lors de l'utilisation de vue - Lorsque le cli génère le projet webpack, il vous demandera si vous souhaitez activer eslint et quel ensemble de spécifications utiliser, sélectionnez simplement la spécification Standard.
•  Plugin de formatage de code Prettier - Formateur de code

 

Les trois plug-ins ci-dessus peuvent formater automatiquement le code lors de l'enregistrement du fichier et peuvent détecter des irrégularités dans le code lors de l'exécution du projet. Les configurations des trois plug-ins ci-dessus ont été incluses dans le code source et il vous suffit de coder en toute sérénité.

2. Construire une petite page vue (débuter avec vue)

(1) Démarrez vscode, cliquez sur "ouvrir le dossier", et sélectionnez le répertoire D:\my\vue-code\hello-vue où le projet vue généré par webpack a été empaqueté tout à l'heure,

Bien sûr, vous pouvez également contrôler le démarrage du projet vue en entrant des commandes dans la console Terminal.

Vue.config.jsCela signifie que les fichiers générés par le générateur de code Vue.config.jssont déjà configurés et n'ont fondamentalement pas besoin d'être ajustés.

  

(2) Placez le cd terminal de vscode sur hello-vue et entrez les commandes dans la console Terminal pour contrôler le démarrage du projet vue.

Entrez dans le dossier du répertoire du projet [D:\my\vue-code\hello-vue], après avoir exécuté la commande suivante, démarrez le projet avec la commande start,

npm run serve

Un serveur Web sera démarré localement. L'avantage de ce serveur Web est qu'il peut rafraîchir automatiquement la page.

Ctrl+c : fermer le serveur Web

  

Copiez n'importe quel chemin et ouvrez-le avec un navigateur (le navigateur peut ne pas afficher automatiquement une page).

Ouvrez http://localhost:8080/ dans le navigateur pour y accéder, l'effet est comme indiqué dans la figure ci-dessous : 

3. Une compréhension générale des idées de conception de Vue

Pour Vue, vous devez comprendre le mode d'ajout et de suppression de pages dans Vue, le mode de saut des composants et des itinéraires (c'est-à-dire les URL de lien de page Web).

• Comprenez d'abord le concept de conception de vue. La composition en composants est l'un des aspects les plus réussis de vue. La fonctionnalité de composantisation divise un site Web entier en petites parties les unes après les autres.
  • Par exemple : Il y a trois fichiers dans le répertoire du projet en cours :
    • index.html dans tout le répertoire du projet ;
    • App.vue dans le répertoire src ;
    • HelloWorld.vue sous le dossier des composants ;
• Il est important de comprendre la relation entre les trois,
  • Index : il s'agit du framework de site Web le plus externe. Certains CSS peuvent être définis dans sa tête. Sa partie du corps est complètement vide et il ne charge qu'un module de vue nommé app.
  •  App.vue : est imbriqué dans index.html,

    • Le composant HelloWorld.vue est utilisé et affiché sous le logo, et l'affichage est contrôlé par le routeur au lieu d'insérer directement le composant.

    • Les fichiers Vue sont tous dans ce mode, composé de trois parties :
      • <template> ci-dessus : la structure du composant ;
        • <img alt="Vue logo" src="./assets/logo.png"> : Une image est insérée,
        • <HelloWorld msg="Bienvenue dans votre application Vue.js"/> : composant HelloWorld.
      • <script> au milieu : mettre le code de comportement du composant, et définir les données et fonctions utilisées par ce composant ;
      • <style> derrière : mettre le style css du composant ;

4. Facile à utiliser

【1】Si le composant est nouvellement créé, comment utiliser le composant ?

(1) Analyse :

(2) Commencer : créer un nouveau composant et modifier App.vue pour la configuration,

Résoudre l'erreur : le nom du composant "Hello" doit toujours être composé de plusieurs mots

Reproduction de scénario : utilisez vue-cli pour créer un projet Vue, et signalez une erreur lors de la création d'un composant.

Raison : La version eslint -plugin-vue a été mise à jour vers @8. Par rapport à la version précédente, de nombreuses règles ont été ajoutées dans la version @8, ce qui nécessite que les noms des composants soient nommés en casse camel.

Résolution :

• Méthode 1 : suivez les règles et modifiez le nom du composant en casse camel, par exemple bonjour en bonjourBonjour
• Méthode 2 : désactivez les règles et modifiez levue.config.js

(1) Ici, nous utilisons d'abord la deuxième méthode,

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,    // 新增代码
})

(2) Utilisez la première méthode pour renommer,

Ensuite, redémarrez vscode, vous constaterez que le composant ne signale plus d'erreur.

ok, le problème est résolu.

Exécutez ensuite le projet, le terminal affiche ce qui suit,

Copiez n'importe quel chemin et ouvrez-le avec un navigateur (le navigateur peut ne pas afficher automatiquement une page).

Ouvrez http://localhost:8080/ dans le navigateur pour y accéder, l'effet est comme indiqué dans la figure ci-dessous :

[2] Comment réutiliser les composants ? Et comment les composants transmettent-ils des valeurs ?

(1) Analyse :

Ouvrez http://localhost:8080/ dans le navigateur pour y accéder, l'effet est comme indiqué dans la figure ci-dessous : 

(2) Si vous souhaitez afficher plusieurs films sur le frontal,

Ouvrez http://localhost:8080/ dans le navigateur pour y accéder, l'effet est comme indiqué dans la figure ci-dessous : 

 

5. element-ui : fournir des composants communs

Element : Un ensemble de bibliothèques de composants de bureau basées sur Vue 2.0 pour les développeurs, les concepteurs et les chefs de produit. Il s'agit d'un ensemble de frameworks frontaux open source fournis par la société nationale Ele.me. Il est simple et élégant et propose plusieurs versions telles que Vue, React et Angular.

Adresse du site Web officiel : Element - Le framework d'interface utilisateur Vue le plus populaire au monde

【1】Télécharger element-ui

Il est recommandé d'utiliser npm pour l'installation, il peut être mieux utilisé avec l'outil de packaging webpack .

npm i element-ui -S

Une fois l'installation réussie, le package.json dans le projet frontal sera automatiquement enregistré,

 

Résoudre l'erreur : Impossible de résoudre la dépendance :
npm ERR ! peer vue@"^2.5.17" de element-ui@2.15.13

 Reproduction du scénario : Dans le terminal de vscode, entrez la commande npm i element-ui -S pour signaler une erreur,

Raison : vue3.0 n'est pas compatible avec element-ui, donc element-plus a été lancé

Solution : télécharger element-plus

(1) Dans le terminal de vscode, entrez la commande pour télécharger element-plus,

npm install element-plus --save

Il semble, il semble que cela ne fonctionne pas. . .

 (2) Après cela, j'ai vérifié à nouveau, vu d'autres blogs, installé elementUI,

npm install --legacy-peer-deps element-ui --save

(3) Voir pachage.json, vous pouvez voir,

 ok, le problème est résolu.

conseils : Comment exécuter le code du projet téléchargé sur Internet ?

(1) Entrez simplement le projet, puis entrez le terminal csvode

npm install

Cette commande trouvera automatiquement pachage.json dans le dossier et téléchargera automatiquement les bibliothèques requises.

(2) Une fois le téléchargement et l'installation terminés, exécutez simplement le projet directement,

npm run serve

【2】Introduire elementUI

Introduisez l'élément dans main.js selon le tutoriel du site officiel de vue,

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Le code ci-dessus complète l'introduction d'Element. Il convient de noter que les fichiers de style doivent être importés séparément.

Résoudre le rapport d'erreur : Vue présente le rapport d'erreur Element-ui

Reproduction de scénario : Vue introduit Element-ui pour signaler les erreurs

Raison : En regardant les documents officiels, j'ai trouvé que vue3 ne prend plus en charge l'interface utilisateur Ele.me d'origine et doit utiliser Element-plus adapté à vue3

Solution : introduire dans main.js,

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(ElementPlus)
app.mount('#app')

【3】Facile à utiliser : formulaire de base

Adresse : Element - Le framework Vue UI le plus populaire au monde

Selon le tutoriel du site officiel vue, créez un nouveau composant testTable.vue, modifiez la configuration App.vue,  

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
  
  <script>
  export default {
    data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>
  
  <style>
  
  </style>

Ouvrez http://localhost:8080/ dans le navigateur pour y accéder, l'effet est comme indiqué dans la figure ci-dessous :