手把手自定义组件库 -- 架构搭建

架构搭建

• 里面components和pages 下的目录 我就是举个例子,请按照你的需求来创建目录

├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   │   ├── chooseArea
│   │   │      ├── lib (引入的第三方库)
│   │   │      │    └── xxx.json
│   │   │      ├── src (源码)
│   │   │      │   ├── index.vue
│   │   │      ├── index.ts
│   │   ├── chooseIcon
│   │   │      ├── lib (引入的第三方库)
│   │   │      │    └── xxx.json
│   │   │      ├── src (源码)
│   │   │      │   ├── index.vue
│   │   │      ├── index.ts
│   │   ├── index.ts
│   ├── router
│   ├── store
│   ├── utils
│   ├── pages
│   │   ├── chooseArea
│   │   │     └── index.vue
│   │   ├── chooseIcon
│   │   │     └── index.vue
│   │   ├── Home
│   │   │     └── index.vue
│   ├── App.vue
│   ├── main.ts
├── .editorconfig 
├── .eslintrc.ts 
├── .gitignore 
├── .prettierrc.cjs 
├── env.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.js

步骤开始

(1) main.ts 里面挂载

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// 初始化

import 'normalize.css'

// 引入element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 引入icons
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 引入组件
import YJUI from './components'

// 引入工具类

import { toLine } from '@/utils/tools'
const app = createApp(App)

// 全局注册组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(`el-icon${toLine(key)}`, component)
}

app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.use(YJUI)

app.mount('#app')

(2) components/index.ts

import { type App } from 'vue'
import chooseArea from './chooseArea'
import chooseIcon from './chooseIcon'

const components = [chooseArea, chooseIcon]

export default {
    install(app: App) {
        components.map(item => {
            app.use(item)
        })
    }
}

(3) components/chooseArea/index.ts

import { type App } from 'vue'
import chooseArea from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
    install(app: App) {
        app.component('YJ-choose-area', chooseArea)
    }
}

(4) components/chooseIcon/index.ts

import { type App } from 'vue'
import chooseIcon from './src/index.vue'

// 让这个组件可以通过use的形式使用
export default {
    install(app: App) {
        app.component('YJ-choose-icon', chooseIcon)
    }
}

(5) pages/chooseIcon/src/index.vue

<template>
    <div>
        图标选择
        <YJ-choose-icon></YJ-choose-icon>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

(6) pages/chooseArea/src/index.vue

<template>
    <div>
        图标选择
        <YJ-choose-area></YJ-choose-area>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>