@lidick/mt-view/README.md

A MiniTool Component Library for Vue 3

# mt-view

mt-view ui组件库

minitool ui - a component library for vue 3

## 示例

### 引入样式
```javascript
import "/node_modules/@lidick/mt-view/dist/es/style.css"
```

### 完整引入
```javascript
import {createApp} from 'vue'
import App from './App.vue'
import MtView from "@lidick/mt-view"
import "/node_modules/@lidick/mt-view/dist/es/style.css"
const app = createApp(App)
app.use(MtView)
app.mount('#app')
```


### 按需引入
需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
```
npm install -D unplugin-vue-components unplugin-auto-import
```
```
yarn add -D unplugin-vue-components unplugin-auto-import
```
在vite.config.ts中添加以下代码
```javascript
// 驼峰转横杠
function upperCasetoLine(str) {
    let temp = str.replace(/[A-Z]/g, (match) => {
        return '-' + match.toLowerCase();
    });
    if (temp.slice(0, 1) === '-') {
        temp = temp.slice(1);
    }
    return temp;
}
```
在vite.config.ts的defineConfig中添加
```javascript
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

plugins: [
    AutoImport({
        resolvers: [
            (componentName) => {
                if (componentName.startsWith('Mt'))
                    return { name: componentName, from: 'node_modules/@lidick/mt-view/dist/es/'+upperCasetoLine(componentName)+'/index.js' }
            },
        ],
    }),
    Components({
        resolvers: [
            (componentName) => {
                // where `componentName` is always CapitalCase
                if (componentName.startsWith('Mt'))
                    return { name: componentName, from: '/node_modules/@lidick/mt-view/dist/es/'+upperCasetoLine(componentName)+'/index.js' }
            },
        ],
    }),
]
```