快速上手

脚手架

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

  1. vue init mand-mobile/mand-mobile-template my-mand-mobile-project
  1. vue create my-project
  2. cd my-project
  3. npm install --save-dev vue-cli-plugin-mand
  4. vue invoke mand

安装

NPM
  1. npm install mand-mobile --save
浏览器引入

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

在npm发布包内的mand-mobile/lib或mand-mobile/lib-vw目录下提供了JS以及CSS bundle，参考产出包目录)。你也可以通过UNPKG进行下载

引入

按需加载(推荐)

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

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

FastClick

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

产出包目录

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

  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.       propWhiteList: []
  6.     })
  7.   ]
  8. }
  • webpack配置
  1. const pxtorem = require('postcss-pxtorem');
  3. // Postcss
  4. webpackConfig.postcss.push(pxtorem({
  5.   rootValue: 100,
  6.   propWhiteList: []
  7. }))
  9. // Poststylus（使用源码时）
  10. const poststylus = require('poststylus')
  12. webpackConfig.plugins.push(new webpack.LoaderOptionsPlugin({
  13.   options: {
  14.     stylus: {
  15.       use: [
  16.         poststylus(pxtorem({
  17.           rootValue: 100,
  18.           propWhiteList: []
  19.         }))
  20.       ]
  21.     }
  22.   }
  23. }))

使用

这是一个使用Mand Mobile组件开发而成的表单页面，更多的组件使用方法可在组件概览中找到。

  1. <template>
  2.   <div id="app">
  3.     <md-field title="投保人" class="block">
  4.       <md-input-item
  5.         title="投保人姓名"
  6.         placeholder="请填写投保人姓名"
  7.       ></md-input-item>
  8.       <md-input-item
  9.         title="身份证号"
  10.         placeholder="请填写投保人身份证号"
  11.       ></md-input-item>
  12.     </md-field>
  13.     <md-field title="被保人" class="block">
  14.       <md-input-item
  15.         title="被保人姓名"
  16.         placeholder="请填写被保人姓名"
  17.       ></md-input-item>
  18.       <md-field-item
  19.         title="与投保人关系"
  20.         arrow="arrow-right"
  21.         :value="relation"
  22.         @click="isPickerShow = true"
  23.         solid
  24.       ></md-field-item>
  25.       <md-picker
  26.         v-model="isPickerShow"
  27.         :data="pickerData"
  28.         title="选择与投保人关系"
  29.       ></md-picker>
  30.       <md-input-item
  31.         title="身份证号"
  32.         placeholder="请填写被保人身份证号"
  33.       ></md-input-item>
  34.       <md-input-item
  35.         title="手机号"
  36.         type="phone"
  37.         placeholder="请填写被保人手机号"
  38.       ></md-input-item>
  39.     </md-field>
  40.     <md-agree class="agree">
  41.       本人承诺投保人已充分了解本保险产品，并保证投保信息的真实性，理解并同意
  42.     </md-agree>
  43.     <md-action-bar :actions="actionBarData">
  44.       &yen;128.00
  45.     </md-action-bar>
  46.   </div>
  47. </template>
  49. <script>
  50. import {
  51.   Agree,
  52.   ActionBar,
  53.   Field,
  54.   FieldItem,
  55.   InputItem,
  56.   Picker
  57. } from 'mand-mobile'
  59. export default {
  60.   name: 'app',
  62.   components: {
  63.     [Agree.name]: Agree,
  64.     [ActionBar.name]: ActionBar,
  65.     [Field.name]: Field,
  66.     [FieldItem.name]: FieldItem,
  67.     [InputItem.name]: InputItem,
  68.     [Picker.name]: Picker
  69.   },
  71.   data () {
  72.     return {
  73.       relation: '本人',
  74.       isPickerShow: false,
  75.       actionBarData: [{
  76.         text: '我要投保'
  77.       }],
  78.       pickerData: [[{text:'本人'},{text:'父母'},{text:'配偶'},{text:'子女'}]]
  79.     }
  80.   }
  81. }
  82. </script>
  84. <style>
  85. * {
  86.   margin: 0;
  87.   padding: 0;
  88. }
  89. body{
  90.   background: #f0f0f0;
  91. }
  92. .detail{
  93.   background: #fff;
  94.   font-size: .24rem;
  95. }
  96. .block{
  97.   margin-top: .32rem;
  98. }
  99. .agree{
  100.   padding: .32rem;
  101.   font-size: .24rem;
  102.   color: #666;
  103. }
  104. </style>