tj-design-vue

安装

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