Explication détaillée de l'utilisation de la bibliothèque de composants mobiles cube-ui

Cette fois, je vous apporte une explication détaillée de l'utilisation de la bibliothèque de composants mobiles cube-ui. Quelles sont les précautions lors de l'utilisation de la bibliothèque de composants mobiles cube-ui. Voici des cas pratiques, prenons. un regard.

cube-ui est une bibliothèque de composants mobiles exquise implémentée par l'équipe technique de Didi sur la base de Vue.js. C'est génial. Bien qu'il n'y ait pas beaucoup de composants, c'est suffisant pour les scénarios de base. Merci pour l'open source !

Créez d’abord un projet vue

vue init webpack my-project
cd my-project
npm install

Installer cube-ui

npm install cube-ui -S

La recommandation officielle est d'utiliser le plug-in babel-plugin-transform-modules, qui peut introduire les modules de composants et les styles correspondants de manière plus élégante.

npm install babel-plugin-transform-modules -D

Configurez ensuite ce plugin et modifiez .babelrc : (ajouter aux plugins)

{
 "plugins": [
 ["transform-modules", {
  "cube-ui": {
  "transform": "cube-ui/lib/${member}",
  "kebabCase": true,
  "style": {
   "ignore": ["create-api", "better-scroll"]
  }
  }
 }]
 ]
}

Méthode d'introduction 1 : Tout importer

Généralement dans le fichier d'entrée main.js :

import Vue from 'vue'
import Cube from 'cube-ui' // 一般直接放在这个位置
Vue.use(Cube)

Une fois que tout est présenté, cela équivaut à un enregistrement global et vous pouvez l'utiliser directement. Il n'est pas nécessaire d'importer { … } (local fait référence à ) dans chaque fichier .vue, et les composants { … } sont enregistrés localement.

Méthode d'introduction 2 : Introduction à la demande

import {
 /* eslint-disable no-unused-vars */
 Style, // 必需
 Button
} from 'cube-ui'

Remarque : si elle est importée à la demande, la partie de style de base ne sera pas empaquetée, vous devez donc introduire le module de style lors de son utilisation.

Mode d'inscription Vous pouvez choisir une inscription globale ou une inscription partielle :

// 全局注册
Vue.use(Button) // 在入口文件中
// 或者局部注册
// 某个组件中
{
 components: {
 CubeButton: Button
 }
}

Tous les composants pouvant être importés sur demande :

import {
 Button,
 Checkbox,
 Loading,
 Tip,
 Toast,
 Picker,
 TimePicker,
 Dialog,
 ActionSheet,
 Scroll,
 Slide,
 IndexList
} from 'cube-ui'

Vous pouvez également introduire des modules create-api et better-scroll :

import { createAPI, BetterScroll } from 'cube-ui'

Exemple

<template>
 <cube-button @click="showDiaog">show dialog<cube-button>
</template>
<script>
 export default {
 methods: {
  showDialog() {
  this.$createDialog({
   type: 'alert',
   title: 'Alert',
   content: 'dialog content'
  }).show()
  }
 }
 }
</script>

Ne pas utiliser la post-compilation

Remarque : cube-ui avec webpack 2+ utilisera la post-compilation par défaut, mais la post-compilation nécessite certaines dépendances et configurations (voir la fin de cette page) ; modifier la configuration du webpack :

// webpack.config.js
module.exports = {
 // ...
 resolve: {
 // ...
 alias: {
  // ...
  'cube-ui': 'cube-ui/lib'
  // ...
 }
 // ...
 }
 // ...
}

Compiler après utilisation

Lorsque cube-ui est associé à webpack 2+, la post-compilation sera utilisée par défaut, l'application doit donc être compatible avec les dépendances et la configuration de cube-ui.

1. Modifier package.json

{
 // webpack-post-compile-plugin 依赖 compileDependencies
 "compileDependencies": ["cube-ui"],
 "devDependencies": {
 "babel-plugin-transform-modules": "^0.0.2",
 // 新增 stylus 相关依赖 (都需要额外安装：npm install … -D)
 // stylus 类似于 sass,less
 "stylus": "^0.54.5",
 "stylus-loader": "^2.1.1",
 "webpack-post-compile-plugin": "^0.1.2"
 }
}

2. Modifiez .babelrc et continuez à compter sur babel-plugin-transform-modules :

"plugins": [
 ["transform-runtime"],
 ["transform-modules", {
 "cube-ui": {
  // 注意: 这里的路径需要修改到 src/modules 下
  "transform": "./node_modules/cube-ui/src/modules/${member}",
  "kebabCase": true
 }
 }]
]

3. Modifiez webpack.base.conf.js

var PostCompilePlugin = require('webpack-post-compile-plugin')
module.exports = {
 // ...
 plugins: [
 // ...
 new PostCompilePlugin()
 ]
 // ...
}

4. Modifiez la fonction exports.cssLoaders dans build/utils.js

exports.cssLoaders = function (options) {
 // ...
 const stylusOptions = {
 'resolve url': true
 }
 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
 css: generateLoaders(),
 postcss: generateLoaders(),
 less: generateLoaders('less'),
 sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
 stylus: generateLoaders('stylus', stylusOptions),
 styl: generateLoaders('stylus', stylusOptions)
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment réaliser la liaison de deux zTree dans une seule page

Comment appeler le WeChat fonction de partage dans nodejs

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!