Maison  >  Article  >  interface Web  >  Comment ajouter des composants de l'élément UI dans Vue

Comment ajouter des composants de l'élément UI dans Vue

php中世界最好的语言
php中世界最好的语言original
2018-03-10 15:13:073385parcourir

Cette fois, je vais vous montrer comment ajouter des composants d'élément d'interface utilisateur à Vue. Quelles sont les précautions pour ajouter des composants d'élément d'interface utilisateur à Vue. Voici un cas pratique, jetons un coup d'œil.

Selon le document, le module de chargement à la demande doit être configuré (s'il n'est pas chargé à la demande, il n'est pas nécessaire de modifier ce fichier).

Le fichier babelrc ; le contenu du fichier pré-généré par er1vue-cli est :

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

La description du site officiel d'ElementUI modifie la configuration en :

{  
"presets": [   
       ["ES-2015", { "modules": false }] 
  ], 
 "plugins": [["component", [ 
      {     
        "libraryName": "element-ui",    
        "styleLibraryName": "theme-chalk"   
      }
  ]]]
 }

En fait, le nœud signalera une erreur lorsque npm run dev. La recommandation officielle est babel-preset-env pour remplacer es-2015 pour la compilation ;

dans vue2.x ? Notez qu'il est ajouté dans le fichier

main.js. Par exemple, nous voulons utiliser le composant de sélection de temps

import {

DatePicker} from 'element-ui'import 'element-ui/lib/. theme-chalk/index.css'Vue.use(DatePicker);

De cette façon, ok Vous pouvez l'utiliser directement sur n'importe quelle autre page, telle que 1135d8f4d0a1a80886ba828ad77b7dd253ec856e5c0e9f9859c109db8a083f18

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, et il y a des choses plus excitantes. Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Structure de données définie et structure de données cartographiques d'ES6

Assignation d'objet ES6 et symbole


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn