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

dans le sujet vueui框架

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

① 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

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 🎜>

bibliothèque~

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

npm install module_name --save

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

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!