How to use mobile component library in Vue.js (detailed tutorial)-JS Tutorial-php.cn

How to use mobile component library in Vue.js (detailed tutorial)

亚连

Release： 2018-06-19 15:49:49

Original

1950 people have browsed it

This article mainly introduces cube-ui, a mobile component library based on Vue.js. Now I share it with you and give it as a reference.

cube-ui is an exquisite mobile component library implemented by Didi's technical team based on Vue.js. It's great. Although there are not many components, it is enough for basic scenarios. Thanks for the open source!

First create a vue project

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

Copy after login

Install cube-ui

npm install cube-ui -S

Copy after login

The official recommendation is to use the babel-plugin-transform-modules plug-in, which can introduce component modules and corresponding modules more elegantly style.

npm install babel-plugin-transform-modules -D

Copy after login

Then configure this plug-in and modify .babelrc: (Add to plugins)

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

Copy after login

Introduction method 1: Import all

General In the entry file main.js:

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

Copy after login

After all are introduced, it is equivalent to global registration, and you can use it directly. There is no need to import {…} (local reference) in each .vue file, and components{…} are locally registered.

Introduction method 2: Import on demand

import {
 /* eslint-disable no-unused-vars */
 Style, // 必需
 Button
} from &#39;cube-ui&#39;

Copy after login

Note: If imported on demand, the basic style part will not be packaged, so you need to introduce style when using it module.

Registration methodOptional global registration or local registration:

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

Copy after login

All components that can be introduced on demand:

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

Copy after login

can also be introduced create-api and better-scroll modules:

import { createAPI, BetterScroll } from &#39;cube-ui&#39;

Copy after login

Example

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

Copy after login

Do not use post-compilation

Note: cube-ui with webpack 2 will use post-compile by default, but Post-compilation requires some dependencies and configurations (see the end of this page); if you don’t want to use post-compilation, you can directly modify the webpack configuration:

// webpack.config.js
module.exports = {
 // ...
 resolve: {
 // ...
 alias: {
  // ...
  &#39;cube-ui&#39;: &#39;cube-ui/lib&#39;
  // ...
 }
 // ...
 }
 // ...
}

Copy after login

Use post-compile

cube-ui combination After webpack 2, post-compilation will be used by default, so the application needs to be compatible with cube-ui's dependencies and configuration.

1. Modify 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"
 }
}

Copy after login

2. Modify .babelrc and still rely on babel-plugin-transform-modules:

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

Copy after login

3. Modify webpack.base.conf .js

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

Copy after login

4. Modify the exports.cssLoaders function in build/utils.js

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

Copy after login

Run and see the results:

npm run dev

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement high-performance loading sequence in javascript

##How to implement global registration in axios

How to implement login verification jump using Vue Flask (detailed tutorial)

About usage of connect decorator in react-redux

The above is the detailed content of How to use mobile component library in Vue.js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!