我的比較喜歡ant-design的風格和設計理念,但限於公司前端框架主要是Vue,因此一直沒用起來。在今年初,私人開發的ant-design-vue被官方承認,vue的桌面端終於可使用ant-design,然而在找了一圈以後發現移動端沒有任何ant-design-mobile的vue移植版本,因此打算本身動手開發。javascript
這幾個月一直在開發公司移動管理系統,因此在開發的過程當中持續的移植了antd-mobile的許多組件,目前已經移植了80%的組件,覆蓋了絕大部分經常使用的組件。css
整體來講,大部分組件的移植難度不是很大,剩餘的組件沒有移植主要緣由是項目中並未用到,因此沒有動力,若是有人須要其餘組件,能夠在在文章或github上留言,我會盡快響應。html
與antd-mobile的組件對比vue
antd-mobile 共有 47
個組件,本項目截至如今移植了37
個java
組件名稱 | antd-mobile | antd-mobile-vue | 說明 |
---|---|---|---|
Accordion | √ | √ | |
ActionSheet | √ | √ | |
ActivityIndicator | √ | √ | |
Badge | √ | √ | |
Button | √ | √ | |
Calendar | √ | √ | |
Card | √ | √ | |
Carousel | √ | √ | |
Checkbox | √ | √ | |
DatePicker | √ | √ | |
DatePickerView | √ | ||
Drawer | √ | √ | |
Flex | √ | √ | |
Grid | √ | √ | |
Icon | √ | √ | |
ImagePicker | √ | ||
InputItem | √ | √ | |
List | √ | √ | |
ListView | √ | ||
Menu | √ | √ | |
Modal | √ | √ | |
NavBar | √ | √ | |
NoticeBar | √ | √ | |
Pagination | √ | √ | |
Picker | √ | √ | |
PickerView | √ | √ | |
Popover | √ | ||
Progress | √ | ||
Radio | √ | √ | |
PullToRefresh | √ | √ | |
Result | √ | √ | |
SearchBar | √ | √ | |
SegmentedControl | √ | ||
Slider | √ | √ | |
Range | √ | √ | |
Stepper | √ | ||
Steps | √ | √ | |
SwipeAction | √ | ||
Switch | √ | √ | |
TabBar | √ | √ | |
Tabs | √ | √ | |
Tag | √ | ||
TextareaItem | √ | √ | |
Toast | √ | √ | |
WhiteSpace | √ | √ | |
WingBlank | √ | √ | |
LocaleProvider | √ |
npm i antd-mobile-vue -S
複製代碼
import AntdMobile from 'antd-mobile-vue'
Vue.use(AntdMobile)
複製代碼
非CDN方式引入目前只支持TypeScriptgit
按需加載須要藉助babel-plugin-import
, 這樣就能夠只引入須要的組件,以減少項目體積github
npm i babel-plugin-import -D
複製代碼
將babel.config.js修改成:shell
module.exports = {
presets: ['@vue/app'],
plugins: [
[
'import',
{
libraryName: 'antd-mobile-vue',
libraryDirectory: 'es',
style: true
},
'antd-mobile-vue'
]
]
};
複製代碼
引入組件npm
import { Alert } from "antd-mobile-vue";
@Component({
components: {
Alert
}
})
複製代碼
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<link rel="stylesheet" href="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.css.gz">
<script src="https://public-file.aegis-info.com/antd-mobile-vue/0.3.0/antdm.umd.min.js.gz"></script>
複製代碼