Ausführliche Erläuterung der Verwendung der mobilen Komponentenbibliothek Cube-UI

Dieses Mal erkläre ich Ihnen ausführlich die Verwendung der mobilen Komponentenbibliothek Cube-UI. Was sind die Vorsichtsmaßnahmen bei der Verwendung der mobilen Komponentenbibliothek Cube-UI? ein Blick.

cube-ui ist eine exquisite Bibliothek mobiler Komponenten, die von Didis technischem Team auf Basis von Vue.js implementiert wurde. Es ist großartig, obwohl es nicht viele Komponenten gibt, aber für grundlegende Szenarien reicht es aus.

Erstellen Sie zunächst ein Vue-Projekt

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

Cube-ui installieren

npm install cube-ui -S

Die offizielle Empfehlung lautet, das Plug-In babel-plugin-transform-modules zu verwenden, mit dem Komponentenmodule und entsprechende Stile eleganter eingeführt werden können.

npm install babel-plugin-transform-modules -D

Konfigurieren Sie dann dieses Plugin und ändern Sie .babelrc: (zu Plugins hinzufügen)

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

Einführungsmethode 1: Alle importieren

Im Allgemeinen in der Eintragsdatei main.js:

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

Nachdem alles eingeführt wurde, entspricht es der globalen Registrierung und kann direkt verwendet werden. Es ist nicht erforderlich, { … } (lokal bezieht sich auf ) in jede .vue-Datei zu importieren, und Komponenten{ … } werden lokal registriert.

Einführungsmethode 2: On-Demand-Einführung

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

Hinweis: Beim Importieren bei Bedarf wird der grundlegende Stilteil nicht gepackt, daher müssen Sie bei der Verwendung das Stilmodul einführen.

Registrierungsmethode Sie können zwischen globaler Registrierung und teilweiser Registrierung wählen:

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

Alle Komponenten, die bei Bedarf importiert werden können:

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

Sie können auch Create-API- und Better-Scroll-Module einführen:

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

Beispiel

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

Verwenden Sie kein Post-Compile

Hinweis: Cube-UI mit Webpack 2+ verwendet standardmäßig die Nachkompilierung, die Nachkompilierung erfordert jedoch einige Abhängigkeiten und Konfigurationen (siehe Ende dieser Seite). Wenn Sie die Nachkompilierung nicht verwenden möchten, können Sie dies direkt tun Ändern Sie die Webpack-Konfiguration:

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

Nach Gebrauch kompilieren

Wenn Cube-UI mit Webpack 2+ gekoppelt ist, wird standardmäßig die Nachkompilierung verwendet, daher muss die Anwendung mit den Abhängigkeiten und der Konfiguration von Cube-UI kompatibel sein.

1. Ändern Sie 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. Ändern Sie .babelrc und verlassen Sie sich weiterhin auf babel-plugin-transform-modules:

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

3. Ändern Sie webpack.base.conf.js

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

4. Ändern Sie die Funktion exports.cssLoaders in 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)
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man die Verknüpfung zweier zTree auf einer einzigen Seite realisiert

Wie man den WeChat aufruft Sharing-Funktion in NodeJS

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung der mobilen Komponentenbibliothek Cube-UI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!