So verwenden Sie die Bibliothek mobiler Komponenten in Vue.js (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich Cube-UI vorgestellt, eine auf Vue.js basierende Bibliothek für mobile Komponenten. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

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

Offiziell wird die Verwendung des Plugins babel-plugin-transform-modules empfohlen, mit dem Komponentenmodule und entsprechende Komponenten eingeführt werden können Module eleganter gestalten.

npm install babel-plugin-transform-modules -D

Dann konfigurieren Sie 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

Allgemein Im Eintrag Datei main.js:

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

Nachdem alle eingeführt wurden, entspricht es der globalen Registrierung und kann direkt verwendet werden. Es ist nicht erforderlich, {…} (lokale Referenz) in jede .vue-Datei zu importieren, und Komponenten{…} werden lokal registriert.

Einführungsmethode 2: Bei Bedarf importieren

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

Hinweis: Beim Import bei Bedarf wird der grundlegende Stilteil nicht gepackt, daher müssen Sie bei der Verwendung den Stil einführen it-Modul.

RegistrierungsmethodeSie können zwischen globaler oder lokaler Registrierung wählen:

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

Alle Komponenten, die bei Bedarf eingeführt werden können:

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

können ebenfalls eingeführt werden create-api- und better-scroll-Module:

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: &#39;alert&#39;,
   title: &#39;Alert&#39;,
   content: &#39;dialog content&#39;
  }).show()
  }
 }
 }
</script>

Nachkompilierung nicht verwenden

Hinweis: Cube-UI mit Webpack 2+ verwendet Postkompilierung Standardmäßig sind für die Nachkompilierung jedoch einige Abhängigkeiten und Konfigurationen erforderlich (siehe Ende dieser Seite). Wenn Sie die Nachkompilierung nicht verwenden möchten, können Sie die Webpack-Konfiguration direkt ändern:

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

Verwenden Nachkompilierung

cube-ui In Verbindung mit Webpack 2+ wird die Nachkompilierung standardmäßig verwendet, sodass die Anwendung mit den Abhängigkeiten und der Konfiguration von Cube-ui kompatibel sein muss.

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. 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)
 }
}

und führen Sie sie aus, um die Ergebnisse anzuzeigen:

npm run dev

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie eine leistungsstarke Ladesequenz in Javascript

So implementieren Sie die globale Registrierung in Axios

So implementieren Sie einen Login-Verifizierungssprung mit Vue+Flask (ausführliches Tutorial)

Verwendung von Connect Decorator in React-Redux

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Bibliothek mobiler Komponenten in Vue.js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!