tj-design-vue
v1.1.70
Published
a component library for Vue 3 base on tj-design-vue
Downloads
17
Readme
安装
使用 npm 安装
推荐使用 npm 方式进行开发
npm i tj-design-vue
通过 浏览器引入 安装
目前可以通过 unpkg.com/tj-design-vue 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<!-- vue 3 -->
<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://unpkg.com/tj-design-vue/lib/index.css" />
<script src="https://unpkg.com/tj-design-vue"></script>
...
<script>
Vue.createApp({}).use(TjDesign).mount('#app');
</script>
使用
TjDesign 提供了三种方式使用组件,具体使用方式如下
基础使用
基础使用会全量注册所有组件,如果您的项目大规模使用组件,请放心使用这种方式。
import { createApp } from 'vue';
import TjDesign from 'tj-design-vue';
import App from './app.vue';
// 引入组件库的少量全局样式变量
import 'tj-design-vue/lib/index.css';
const app = createApp(App);
app.use(TjDesign);
按需引入使用
如果您对产物大小有严格的要求,可以通过 按需引入具体组件 的方式来使用。
借助 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具,可以达到按需引入的使用效果。
import { createApp } from 'vue';
import { TjButton } from 'tj-design-vue';
import App from './app.vue';
// 引入组件库的少量全局样式变量
import 'tj-design-vue/es/button/index.css';
const app = createApp(App);
app.use(TjButton);
编辑器提示
安装注册 TjDesign 之后,在开发项目时,可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
如果你在使用 Volar,那么可以在 tsconfig.json 中配置 compilerOptions.types 来指定全局组件类型。
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["tj-design-vue/types/volar"]
}
}
浏览器兼容性
| IE / Edge | Firefox | Chrome | Safari | | --- | --- | --- | --- | | Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 |
FAQ
Q: 是否内置reset样式统一页面元素的默认样式 ?
A: 0.17.0
版本开始我们不再引入 reset.less
,影响最大的是移除了原先全局盒子模型的设定:
*,
*::before,
*::after {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}