快速开始
安装
快速开始最好的方式就是使用 vite
初始化项目工程,添加 mand-mobile-next
即可。
使用 npm:
npm init @vite/app
选择 vue-ts
,初始化工程
安装 mand-mobile-next
npm i mand-mobile-next@alpha
# or
yarn add mand-mobile-next@alpha
使用
全量引入
在 main.ts
写入以下内容
import { createApp } from 'vue'
import MandMobile from 'mand-mobile-next';
import 'mand-mobile-next/dist/es/mand-mobile-next.min.css';
import App from './App.vue';
const app = createApp(App)
app.use(MandMobile)
app.mount('#app')
按需引入
在 main.ts
引入组件库所需的基础变量
import 'mand-mobile-next/dist/es/mand-mobile-next.vars.css';
在 vite
中按需引入
首先,安装 vite-plugin-style-import
:
npm install vite-plugin-style-import -D
#or
yarn add vite-plugin-style-import -D
然后修改 vite.config.ts
:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'mand-mobile-next',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return `mand-mobile-next/dist/es/${name}/style.js`;
},
resolveComponent: (name) => {
return `mand-mobile-next/dist/es/${name}`;
},
}]
})
]
})
接下来,如果你只希望引入部分组件,比如 Button,需要在 main.js 中写入以下内容:
import { createApp } from 'vue'
import { Button } from 'mand-mobile-next';
import App from './App.vue';
const app = createApp(App)
app.component(Button.name, Button);
/* or
* app.use(ElButton)
* app.use(ElSelect)
*/
app.mount('#app')
或者直接在组件中使用:
import { Button } from 'mand-mobile-next';
export default {
components: {
MdButton: Button,
}
}
自定义主题
Mand mobile next 采用 CSS var 实现主题切换,用户可以通过下面的方式实现自定义主题。
- 在
main.ts
中:
import { useCssVar } from 'mand-mobile-next/dist/es/composable'
const themeVars ={
'--md-color-primary': '#f44336',
}
useCssVar(themeVars)
- 在组件
setup
中
<script setup ts>
import { useCssVar } from 'mand-mobile-next/dist/es/composable'
import { ref } from 'vue'
const themeVars = ref({
'--md-color-primary': '#f44336',
})
useCssVar(themeVars)
</script>
基础变量
/// Brand Color
--md-color-primary : #4280EB // 品牌色
/// Text Color
--md-color-text-base : #111A34 // 重要信息,如一级标题
--md-color-text-base-inverse : #FFF
--md-color-text-body : #41485D // 普通信息,如正文主要内容
--md-color-text-minor : #666f83 // 次要信息,如利益点、摘要
--md-color-text-caption : #858B9C // 辅助信息,如列表内容描述
--md-color-text-disabled : #C5CAD5 // 禁用状态
--md-color-text-placeholder : #C5CAD5 // 默认提示输入或占位
--md-color-text-highlight : var(--md-color-primary) // 高亮状态
--md-color-text-warn : #FF7D41 // 利益点,警告提示
--md-color-text-error : #FF5257 // 强提示报错
--md-color-text-link : #5878B4 // 文字链接
/// Border & Background Color
--md-color-border-base : #E2E4EA // 条目边框
--md-color-border-element : #C5CAD5 // 元素边框,如按钮
--md-color-bg-base : #F9FAFB // 元素,容器背景
--md-color-bg-inverse : #FFF
--md-color-bg-disabled : #E2E4EA // 禁用元素背景
--md-color-bg-tap : #F9FAFB // 条目点击态
--md-color-mask : rgba(37, 38, 45, .7) // 弹窗蒙层
/// Text Size
--md-font-heading-large : 60px
--md-font-heading-medium : 52px
--md-font-heading-normal : 44px
--md-font-caption-large : 36px
--md-font-caption-normal : 32px
--md-font-body-large : 28px
--md-font-body-normal : 26px
--md-font-minor-large : 24px
--md-font-minor-normal : 20px
--md-font-weight-light : 300
--md-font-weight-normal : 400
--md-font-weight-medium : 500
--md-font-weight-semibold : 600
/// Radius Size
--md-radius-normal : 8px
--md-radius-circle : 50%
/// Border Size
--md-border-width-base : 2px
/// Spacing size
--md-h-gap-xs : 8px
--md-h-gap-sm : 12px
--md-h-gap-md : 20px
--md-h-gap-lg : 32px
--md-h-gap-sl : 40px
--md-v-gap-xs : 8px
--md-v-gap-sm : 12px
--md-v-gap-md : 20px
--md-v-gap-lg : 32px
--md-v-gap-sl : 40px
/// Transition
--md-ease-in-out-quint : cubic-bezier(.86, 0, .07, 1)
/// Opacity
--md-opacity-disabled : .3 // opacity of disabled button, switch, agree
/// Font Family
--md-font-family-normal : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
--md-font-family-number : DIDIFD-Medium, "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
组件变量
TIP
可查看对应的组件代码获取