Comment utiliser la bibliothèque de composants mobiles dans Vue.js (tutoriel détaillé)

Cet article présente principalement cube-ui, une bibliothèque de composants mobiles basée sur Vue.js. Maintenant, je le partage avec vous et le donne comme référence.

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

Installez cube-ui

npm install cube-ui -S

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

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)

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

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

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

Remarque : Si vous importez à la demande, la partie de style de base ne sera pas emballée, vous devez donc présenter le module de style.

Mode d'inscriptionVous pouvez choisir une inscription globale ou une inscription locale :

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

Tous les composants pouvant être introduits 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: &#39;alert&#39;,
   title: &#39;Alert&#39;,
   content: &#39;dialog content&#39;
  }).show()
  }
 }
 }
</script>

Compiler sans l'utiliser

Remarque : cube-ui est associé à webpack 2 + Post-compilation sera utilisé par défaut, mais la post-compilation nécessite quelques dépendances et configurations (voir fin de cette page) ;

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

Après utilisation Après avoir compilé

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

1. Modifiez 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 comptez toujours 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. 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)
 }
}

Exécutez et voyez les résultats :

npm run dev

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter une séquence de chargement haute performance en javascript

Comment implémenter l'enregistrement global dans axios

Comment implémenter le saut de vérification de connexion à l'aide de Vue+Flask (tutoriel détaillé)

Utilisation du décorateur de connexion dans React-redux

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!