快速上手

脚手架

新项目可通过vue-cli初始化集成mand-mobile，现有项目集成请参考安装)

  • Vue CLI 2/3(模板)(支持1.x)
  1. vue init mand-mobile/mand-mobile-template my-mand-mobile-project
  • Vue CLI 3(插件)(支持1.x/2.x)
  1. vue create my-project
  2. cd my-project
  3. npm install --save-dev vue-cli-plugin-mand
  4. vue invoke mand

Vue UI

通过Vue UI以图形化界面创建和管理项目，并通过安装插件vue-cli-plugin-mand集成mand-mobile

  • 启动Vue UI
  1. vue ui
  • 完成项目创建后，点击插件并搜索mand-mobile，点击搜索结果完成安装快速上手 - 图1

安装

NPM or Yarn
  1. npm install mand-mobile --save
  2. # OR 
  3. yarn add mand-mobile
浏览器引入

在浏览器中使用script和link标签直接引入文件，并使用全局变量 window['mand-mobile']。

在npm发布包内的mand-mobile/lib或mand-mobile/lib-vw目录下提供了JS以及CSS bundle，参考产出包目录)。

你也可以通过快速上手 - 图2或者UNPKG进行下载。

建议直接使用 CDN 引入时锁定版本，以免将来受到非兼容性更新的影响。锁定版本的方法请查看unpkg.com。

引入

按需加载(推荐)

使用 babel-plugin-import 或 ts-import-plugin, 无需配置style，默认加载目录为lib，其他目录参考产出包目录

  1. {
  2.   "plugins": [
  3.     ["import", {
  4.       "libraryName": "mand-mobile",
  5.       "libraryDirectory": "lib"
  6.     }]
  7.   ]
  8. }
  1. // ts-loader option
  2. {
  3.   rules: [
  4.       {
  5.        test: /\.tsx?$/,
  6.        loader: 'ts-loader',
  7.        options: {
  8.          appendTsSuffixTo: [/\.vue$/],
  9.          transpileOnly: true,
  10.          getCustomTransformers: () => ({
  11.            before: [
  12.             require('ts-import-plugin')({
  13.               "libraryName": "mand-mobile"
  14.             })
  15.            ]
  16.          })
  17.        }
  18.     }
  19.   ]
  20. }

组件使用：

如果没有以上配置，会全量引入，需手动引入全部样式， 参考全量引入

  1. import { Button } from 'mand-mobile'
按需引入
  1. import Button from 'mand-mobile/lib/button'
全量引入
  1. import Vue from 'vue'
  2. import mandMobile from 'mand-mobile'
  3. import 'mand-mobile/lib/mand-mobile.css'
  5. Vue.use(mandMobile)

使用前准备

Normalize or Reset

为标准化浏览器元素的样式，推荐引入Normalize.css或Reset CSS

FastClick

为避免浏览器兼容问题引起的点击问题, 推荐引入FastClick

  1. import FastClick from 'fastclick'
  3. if ('addEventListener' in document && 'ontouchstart' in window) {
  4.   FastClick.prototype.focus = function (targetElement) {
  5.     targetElement.focus()
  6.   }
  7.   document.addEventListener('DOMContentLoaded', function () {
  8.     FastClick.attach(document.body)
  9.   }, false)
  10. }
产出包目录

产出包中包含以下几种不同目录，分别适用于不同场景的代码，可根据实际需要选择一个目录加载：

  1. ├── mand-mobile
  2.     ├── components  # 源码，一般自定义主题等
  3.     ├── lib         # 编译后，样式单位px，一般用于自定义适配方案等（默认）
  4.     ├── lib-vw      # 编译后，样式单位vh/vw，一般用于非兼容场景，无需额外配置
  5.     ├── ...
Px to Rem

产出包lib目录中的组件样式以px为单位，并且以iPhone6屏幕 “物理像素” 宽度750为基准 (即普通 “逻辑像素” 值的2倍大小)。在实际项目中，可根据具体情况使用postcss-pxtorem把px单位转成rem，从而实现不同设备下等比缩放的效果。

如转换基准为1rem = 100px：

  • .postcssrc.js配置
  1. module.exports = {
  2.   plugins: [
  3.     require('postcss-pxtorem')({
  4.       rootValue: 100,
  5.       minPixelValue: 2,
  6.       propWhiteList: []
  7.     })
  8.   ]
  9. }
  • webpack配置
  1. const pxtorem = require('postcss-pxtorem');
  3. // Postcss
  4. webpackConfig.postcss.push(pxtorem({
  5.   rootValue: 100,
  6.   minPixelValue: 2,
  7.   propWhiteList: []
  8. }))
  10. // Poststylus（使用源码时）
  11. const poststylus = require('poststylus')
  13. webpackConfig.plugins.push(new webpack.LoaderOptionsPlugin({
  14.   options: {
  15.     stylus: {
  16.       use: [
  17.         poststylus(pxtorem({
  18.           rootValue: 100,
  19.           minPixelValue: 2,
  20.           propWhiteList: []
  21.         }))
  22.       ]
  23.     }
  24.   }
  25. }))

如何使配置仅作用于mand-mobile?

配置主题和字体

使用

这是一个使用Mand Mobile组件开发而成的表单页面