maa-ui
v1.0.7
Published
我的组件库
Downloads
498
Readme
- 初始化项目
yarn init- 安装相关依赖
yarn vue
yarn vite -D
yarn @vitejs/plugin-vue -D
yarn @vitejs/plugin-vue-jsx -D
yarn terser -D
yarn unocss -D
yarn @iconify-json/ic -D- 根目录index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="index.txs" type="module"></script>
</body>
</html>- 根目录package.json
{
"name": "zc-ui",
"version": "1.0.0",
"description": "我的组件库",
"main": "index.js",
"author": "miaoaa",
"license": "MIT",
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"@vitejs/plugin-vue-jsx": "^4.0.0",
"terser": "^5.31.1",
"vite": "^5.3.1",
"vite-plugin-vue-setup-extend": "^0.4.0"
},
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.4.29"
},
"type": "module"
}注明："type": "module" 是因为Vite5不在支持cjs，而是使用了ESM 5. 根目录index.ts
import { createApp } from 'vue'
import ZcUI from "../dist/zc-ui.mjs"
import App from './App.vue'
// import GButton from './components/m-button'
// createApp(GButton).mount('#app')
// import SFCButton from "./components/SFCButton/index.vue";
// createApp(SFCButton).mount('#app')
//
// import JSXButton from "./components/JSXButton/index";
// createApp(JSXButton).mount('#app')
// 全量加载
createApp(App).use(ZcUI).mount('#app')- 根目录entry.ts
import {App} from "vue";
import ZcButton from "./components/m-button/index";
import SFCButton from "./components/SFCButton/index.vue";
import JSXButton from "./components/JSXButton/index";
// 导出单独组件
export {ZcButton, SFCButton, JSXButton}
// 实现 install 方法
export default {
install(app: App): void {
app.component(ZcButton.name, ZcButton)
app.component(SFCButton.name, SFCButton)
app.component(JSXButton.name, JSXButton)
}
}- 打包测试
yarn run build- 根目录src/shims-vue.d.ts
// 任何以.vue结尾的模块都应该被当作一个Vue组件模块来处理，
// 并且该模块的类型是DefineComponent。这让TypeScript能够正确地解析和处理.vue文件，
// 从而进行类型检查和代码提示
declare module "*.vue" {
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}- 根目录tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": false,
"jsx": "preserve",
"moduleResolution": "node"
}
}https://www.cnblogs.com/caicai521/p/18047175