Méthode d'implémentation d'introduction de composants à l'aide de la partie vue+elementUI

La bibliothèque de composants d'interface utilisateur de vue.js a plusieurs projets sur git. Les deux bibliothèques de composants que je vois le plus d'utilisateurs sont iView et Element. Elles ont toutes deux des composants riches. Cet article vous présente principalement les informations pertinentes sur l'utilisation de vue+elementUI pour implémenter certains composants importés, et présente la solution à l'erreur lorsque vue introduit elementUI. L'article le présente en détail à travers l'exemple de code auquel les amis qui en ont besoin peuvent s'y référer. Ci-dessous se trouvent les petits Apprenons ensemble.

Introduction du site officiel

• iView : un ensemble de bibliothèques de composants d'interface utilisateur de haute qualité basées sur Vue.js

• Element, one Un ensemble de bibliothèques de composants basées sur Vue 2.0 préparées pour les développeurs, les concepteurs et les chefs de produit, fournissant des ressources de conception de support pour aider votre site Web à prendre rapidement forme.

Les deux ont leurs propres avantages et inconvénients, donc je ne ferai pas trop de commentaires. En fonction de mes propres besoins, j'ai fini par utiliser Element. Parce que l'entreprise a récemment développé un petit projet backend, j'ai envisagé d'introduire certains composants d'Element. Parce que je n'ai aucune expérience pour l'introduire seul pour la première fois, je lis beaucoup sur Internet et il y a tels ou tels problèmes que je ressens personnellement. que le site officiel ne me l'a pas expliqué clairement (peut-être que mon niveau est trop bas), je l'ai donc étudié moi-même et testé moi-même. S'il y a des erreurs, veuillez les signaler.

Méthode d'implémentation

1. Installez vue-cli

npm install -g vue-cli

2. Créer un projet projectName est le nom de votre projet

npm install webpack projectName

3. Entrez le répertoire du projet

cd projectName

4. Initialisez les dépendances d'installation du projet

npm install

5.

npm install element-ui --save -dev

6. Déterminez d'abord si le projet a un style-loader et un composant babel-plugin-s'il n'y en a pas

npm install xxx --save -dev

7. et brut, recherchez .babelrc et copiez le contenu du fichier original Supprimez-les tous et collez le code suivant

 { "presets": [["env", {
     "modules": false,
     "targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}
    }],
    "stage-2"],
  "plugins": [
     "transform-runtime",
     ["component",[
     {
     "libraryName":"element-ui",
     "styleLibraryName":"theme-default" //1.4的老项目用这个，2.0的用theme-chalk，假设没效果看看官网又把默认的主题改 成那个了 跟着改一下应该就可以了
     }
     ]]
     ],
  "comments":false,   
  "env": {
  "test": {
   "presets": ["env", "stage-2"],
   "plugins": ["istanbul"]
  }
  }
 }

8. Ajoutez la phrase suivante à webpack.base.conf.js

{
 test: /\.css$/,
 loader: 'style-loader'
},

9. Dans mian.js Introduisez

 import { Button,Input } from 'element-ui'
 Vue.use(Button)
 Vue.use(Input)

10 Ensuite, vous pouvez utiliser Button et Input

vue introduit elementUI et signale une erreur.

Introduisez import 'element-ui in main.js /lib/theme-default/index.css' et le projet ne peut pas être démarré. Il s'agit de changer le webpack dans package.json en "webpack": " beta" et réinstallez-le. Ensuite, il peut être démarré

Recommandations associées :

Vue2.0, ElementUI pour implémenter le tournage des pages du tableau

Explication détaillée d'un exemple de recherche à distance d'entrée vue Element-ui

Utilisez VUE element-ui pour écrire un composant Table réutilisable

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!