Utilisez vue-cli + element-ui pour créer rapidement un projet et en savoir plus

En termes d'architecture front-end, nous devons apprendre à utiliser vue-cli + element-ui pour construire des projets. Le contenu de l'article est compact et j'espère que tout le monde étudiera patiemment.

1. Avant-propos

vue2.0 est devenu un framework front-end MVVM très populaire en Chine en raison de sa simplicité et de sa facilité d'apprentissage, de sa documentation complète en chinois et de son écosystème riche. ,

element-ui est basé sur le framework vue2.0 de ui, développé et maintenu par l'équipe Ele.me. C'est actuellement le framework le plus populaire de la bibliothèque vue ui

Site officiel d'element-ui

Site Web du sujet vue

Vous pouvez voir la popularité de chaque

dans le sujet vueui框架

2. Fonctionnement du code

Il existe deux façons d'utiliser

vue-cli + element-ui

Option 1 :

①Utilisez d'abord
pour construire le projet, vue-cli ② Utilisez ensuite les modules et plug-ins correspondants de
, npm install ③Allez sur
pour configurer le chargeur de divers fichiers, webpack.conf.js ④Allez sur
pour configurer le plug-in .babelrc

Si le projet n'a pas encore été écrit, n'utilisez pas la première option. Si le projet a été démarré depuis un certain temps, alors vous devez suivre. les points ci-dessus à chaque étape. Cela doit être bien géré. Si vous ne faites pas attention, une erreur sera signalée, qui consiste à utiliser un modèle fourni par element-ui

Option deux :

① Utilisez la commande git

pour télécharger le modèle officiel
(Si git n'est pas installé sur votre ordinateur local, vous pouvez entrer https://github.com/ElementUI/element-starter, cliquer sur le bouton vert Cloner ou télécharger, puis cliquer sur Télécharger ZIP pour télécharger le modèle) git clone https://github.com/ElementUI/element-starter.git ② Utilisez
dans le répertoire racine du projet pour télécharger les modules dépendants (vous pouvez utiliser
s'il n'y a pas de miroir Taobao cnpm) cnpm intsall ③ Utilisez npm install pour exécuter le projet dans le répertoire racine du projet. La structure de base du modèle
npm run dev

est la suivante - fondamentalement pas différente du projet construit à l'aide de

échafaudage, très propre <.>

vue-cli

Après avoir exécuté le projet, vous pouvez voir une page simple - elle contient un composant bouton de plus

vue-clielement-ui 🎜>

Ensuite, vous pouvez utiliser la

bibliothèque~

Une application simple d'ElementUI, vous pouvez suivre l'article ci-dessous, cliquez sur le lien pour entrer

element-uiUtilisez vue2.0 pour créer rapidement un backend Ajouter, supprimer, modifier et vérifier l'interface de gestion

3 Autres

paramètres d'installation

1. 🎜>

2. Écrire les dépendances de développement

npm install module_name -S

3. Installation globale (utilisation de la ligne de commande)

npm install module_name --save

Recommandations associées :

npm install module_name -D

npm install module_name --save-dev

Comment utiliser vue-cli pour importer un composant Element UI

npm install module_name -g

Comment implémenter l'importation et l'exportation

dans vue + element-ui

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!