Étapes complètes de la construction du projet vue2 - super détaillées

---

Configuration de l'environnement

configuration du nœud

1. Lien de téléchargement : https://nodejs.org/en/

2. Vérifiez si l'installation a réussi : si le numéro de version est affiché, cela signifie que nous avons installé avec succès l'environnement du nœud.

//输入：
node -v

Installer Vue CLI

1. Entrez la commande suivante dans Terminal pour installer globalement :

//三选一即可
cnpm install -g @vue/cli
npm install -g @vue/cli
yarn global add @vue/cli

Remarque : Si vous avez installé une ancienne version de VUE CLI, vous devez d'abord la désinstaller.

//三选一即可
npm uninstall vue-cli -g 
cnpm uninstall vue-cli -g 
yarn global remove vue-cli

2. Exécutez vue -V pour afficher la version : si le numéro de version est affiché, cela signifie que nous avons installé vue avec succès

//输入：
vue -V

​Construire un nouveau projet

Vue create construit un nouveau projet

vue create <Project Name> //文件名 不支持驼峰(含大写字母)
//如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作，必须通过 
winpty vue.cmd create hello-world
 启动这个命令

L'interface suivante apparaît, c'est réussi

1. default (vue3 babel, eslint) : le paramètre par défaut (entrer directement) est très approprié pour créer rapidement un prototype d'un nouveau projet vue3, sans aucun package npm avec aucune fonction auxiliaire

2. default (vue2 babel, eslint) : le paramètre par défaut (entrer directement) est très approprié pour créer rapidement un prototype d'un nouveau projet vue2, sans aucun package npm avec aucune fonction auxiliaire

3. Sélectionnez manuellement les fonctionnalités : la configuration personnalisée (appuyez sur la touche fléchée ↓) est le projet orienté production dont nous avons besoin, le package npm qui fournit des fonctionnalités optionnelles.

Méthode 1 : choisissez simplement la première (la valeur par défaut est installée automatiquement, appuyez sur la touche Entrée pour sélectionner)

Si l'interface suivante apparaît, cela signifie succès
Saisie : cd adminEntrez à nouveau npm run servepour ouvrir le projet

Effet d'ouverture du projet :

Ouvrez le lien :

Deuxième méthode : configurer les paramètres personnalisés

Étape 1 : Sélectionnez Sélectionner manuellement les fonctionnalités

L'interface suivante apparaît, c'est réussi

Étape 2 : Configurez les valeurs de configuration personnalisées :

1 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
2 ( ) Babel //Transcodeur, qui peut convertir le code ES6 en code ES5, afin qu'il puisse être exécuté dans l'environnement existant.
3 ( ) TypeScript// TypeScript est un sur-ensemble de JavaScript (suffixe .js) (suffixe .ts) qui inclut et étend la syntaxe de JavaScript. Il doit être compilé et affiché en tant que JavaScript pour s'exécuter dans le navigateur. À l'heure actuelle, peu les gens utilisent 4
( ) Prise en charge de Progressive Web App (PWA) // Progressive Web Application
5 ( ) Routeur // vue-router (routage vue)
6 ( ) Vuex // vuex (mode de gestion d'état de vue)
7 ( ) Préprocesseurs CSS // Préprocesseur CSS (ex : less, sass)
8 ( ) Linter / Formatter // vérification du style de code et formatage (ex : ESlint)
9 ( ) Tests unitaires // tests unitaires (tests unitaires)
10 ( ) Tests E2E / /e2e (de bout en bout) tester

Étape 3 : Sélectionnez la version vue, je choisis 3.x

Étape 4 : Vérification et formatage du style de code (par exemple : ESlint)

Choisir une configuration linter/formatter ? Choisir un outil de détection de formatage de code

Étape 5 : Choisir des fonctionnalités de charpie supplémentaires ?

Méthode d'inspection du code : vérification lors de la sauvegarde ou vérification lors de la soumission ;
je choisis la première vérification lors de la sauvegarde

第六步：Où préférez-vous placer la configuration pour Babel, ESLint, etc. ?

Comment stocker des fichiers de configuration tels que Babel, PostCSS, ESLin, etc., dans un fichier de configuration séparé ? Ou dans package.json ? Il est
pratique de configurer de manière claire et belle, je choisis package.json

Étape 7 : Enregistrer ceci comme préréglage pour de futurs projets ?

Avez-vous besoin de sauvegarder la configuration actuelle afin de pouvoir la construire rapidement dans de futurs projets ? Après avoir enregistré, vous pouvez directement sélectionner cette configuration lors de la création ultérieure d'un projet, pas besoin de la configurer séparément. Après avoir sélectionné non et appuyé sur Entrée : le Le projet est créé avec succès. Effet d'ouverture du projet : Ouvrir

le

lien

 :

Bonjour, je m'appelle Feichen.
Suivez-moi ~ Répondez aux « Matériel d'apprentissage » pour obtenir des ressources d'apprentissage frontales, partager quotidiennement les changements technologiques, les règles de survie ; initié de l'industrie, un aperçu des opportunités.