推荐使用 npm 方式进行开发
npm i tdesign-mobile-vue
目前可以通过 unpkg.com/tdesign-mobile-vue 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-mobile-vue/dist/tdesign.min.js"></script>
...
<script>
Vue.createApp({}).use(TDesign).mount('#app');
</script>
请注意,我们不推荐使用这种方式,这样无法实现按需加载等优化手段,生产项目会直接受版本更新影响,同时也可能受到 CDN 的稳定性的影响。
npm package 中提供了多种构建产物,可以阅读 这里 了解不同目录下产物的差别。
TDesign 提供了三种方式使用组件,具体使用方式如下
基础使用会全量注册所有组件,如果您的项目大规模使用组件,请放心使用这种方式。
import { createApp } from 'vue';
import TDesign from 'tdesign-mobile-vue';
import App from './app.vue';
// 引入组件库的少量全局样式变量
import 'tdesign-mobile-vue/es/style/index.css';
const app = createApp(App);
app.use(TDesign);
如果您对产物大小有严格的要求,可以通过 按需引入具体组件 的方式来使用。
借助 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具,可以达到按需引入的使用效果。
import { createApp } from 'vue';
import { Button as TButton } from 'tdesign-mobile-vue';
import App from './app.vue';
// 引入组件库的少量全局样式变量
import 'tdesign-mobile-vue/es/style/index.css';
const app = createApp(App);
app.use(TButton);
除此之外,也可以使用 unplugin-vue-components
和 unplugin-auto-import
来实现自动导入:
您仍需在项目引入组件库的少量全局样式变量
import { createApp } from 'vue';
// 引入组件库的少量全局样式变量
import 'tdesign-mobile-vue/es/style/index.css';
const app = createApp(App);
并安装两个unplugin相关的第三方包
npm install -D unplugin-vue-components unplugin-auto-import
然后在 Webpack 或 Vite 对应的配置文件添加上述插件。
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'unplugin-vue-components/resolvers';
export default {
plugins: [
// ...
AutoImport({
resolvers: [TDesignResolver({
library: 'mobile-vue'
})],
}),
Components({
resolvers: [TDesignResolver({
library: 'mobile-vue'
})],
}),
],
};
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { TDesignResolver } = require('unplugin-vue-components/resolvers');
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [TDesignResolver({
library: 'mobile-vue'
})],
}),
Components({
resolvers: [TDesignResolver({
library: 'mobile-vue'
})],
}),
],
};
TDesignResolver
支持的配置,可以点击此链接。
Firefox | Chrome | iOS Safari | Samsung | Opera | Android Browser |
---|---|---|---|---|---|
Firefox >=104 | Chrome >=105 | iOS Safari >=12.2 | Samsung >=10.2 | Opera >=64 | Android Browser >=105 |
详情参见移动端组件库浏览器兼容性说明
Q: 是否内置reset样式统一页面元素的默认样式 ?
A: 0.25.0
版本开始我们不再引入 reset.less
。
如果你的项目开发依赖于原先的 reset
样式,可以从 dist
目录中单独引入它:
import 'tdesign-mobile-vue/dist/reset.css';