online connection
Online component address dc-pro-component
1. Project construction, create project dc-pro-component
pnpm init pnpm install @vitejs/plugin-vue vite -D
pnpm-workspace.yaml soft link
packages: - "packages/**" - "examples"
2. Create folders and component tests written by examples
pnpm init
Create the src folder and create the corresponding file
config file content
import {<!-- --> defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({<!-- -->
plugins: [vue()],
});
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>
3. Create folders, packages
Corresponds to init in the component file
pnpm init
Component source code corresponds to configuration config
import {<!-- --> defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({<!-- -->
build: {<!-- -->
target: "modules",
//Package file directory
outDir: "es",
//compression
minify: false,
//css separation
//cssCodeSplit: true,
rollupOptions: {<!-- -->
//Ignore packaging vue files
external: ["vue"],
input: ["src/index.js"],
output: [
{<!-- -->
format: "es",
//No need to package it into .es.js, here we want to package it into .js
entryFileNames: "[name].js",
//Let the packaging directory correspond to our directory
preserveModules: true,
//Configure the packaging root directory
dir: "es",
preserveModulesRoot: "src",
},
{<!-- -->
format: "cjs",
entryFileNames: "[name].js",
//Let the packaging directory correspond to our directory
preserveModules: true,
//Configure the packaging root directory
dir: "lib",
preserveModulesRoot: "src",
},
],
},
lib: {<!-- -->
entry: "./src/index.js",
formats: ["es", "cjs"],
},
},
plugins: [vue(),VueSetupExtend()],
});
4. Encapsulate component button, src like this
components/src/button/button.vue
<template>
<Button v-bind="{ ...$attrs }" @click="onClick">Primary Button</Button>
</template>
<script setup name="Dbutton">
defineOptions({<!-- -->
name: "DButton",
});
import {<!-- --> Button } from "ant-design-vue";
const onClick = () => {<!-- -->};
</script>
components/src/button/index.js
//Partial registration
import button from "./button.vue";
import {<!-- --> withInstall } from "dcqc-utils";
//app.use (registered component)
const DButton = withInstall(button);
export default DButton;
Utils also publishes npm, so you also need to pnpm init in the utils file.
export const withInstall = (comp) => {<!-- -->
comp.install = (app) => {<!-- -->
//Register component
app.component(comp.name, comp);
};
return comp;
};
component.js
export {<!-- --> default as Button } from './button';
export {<!-- --> default as Space } from './space';
components/src/index.js
//Global registration
import * as components from './components';
export * from './components';
export const install = function (app) {<!-- -->
Object.keys(components).forEach(key => {<!-- -->
const component = components[key];
if (component.install) {<!-- -->
app.use(component);
}
});
return app;
};
export default {<!-- -->
install,
};
components/package.json
{<!-- -->
"name": "dc-pro-component",
"version": "1.0.6-beat",
"description": "",
"main":"src/index.js",
//Modify when publishing
//"main": "lib/index.js",
//"module": "es/index.js",
"files": [
"es",
"lib"
],
"scripts": {<!-- -->
"test": "echo "Error: no test specified" & amp; & amp; exit 1",
"build": "vite build",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
"keywords": [
"dc-pro-component"
],
"author": "dcqc",
"license": "MIT",
"dependencies": {<!-- -->
"ant-design-vue": "4.x",
"vite-plugin-vue-setup-extend": "^0.4.0"
}
}
If there are dependencies between packages, soft links
pnpm install dc-pro-component dc-utils -D -w
5. Automatically publish github page
#!/usr/bin/env sh ### # @Date: 2023-10-18 15:58:56 # @Auth: [email protected] # @LastEditors: [email protected] # @LastEditTime: 2023-10-18 16:06:54 # @FilePath: \dc-component\deploy.sh ### # Ignore errors set -e #There is an error and an error is thrown # Construct pnpm run docs:build #Then execute the packaging command # Enter the directory to be published cd docs/.vitepress/dist #Enter the dist directory git init #Execute these git commands git add -A git commit -m 'deploy' git push -f [email protected]:lan-an/dc-component.git master:gh-pages #Submit to this branch. This address is an SSH address that requires a secret key. cd- rm -rf docs/.vitepress/dist #Delete dist folder document doc
projectpackage.json
"deploy":"bash d
Run directly
pnpm run deploy
Generate link address in setting=>Page on github
6.npm released
npm login npm publish
7. Document integration
pnpm add vitepress -D
Add execution script
"scripts": {<!-- -->
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs"
},
We encapsulate components and integrate them in the theme
import DefaultTheme from "vitepress/theme";
import * as dc from "dc-pro-component";
//Globally register components
export default {<!-- -->
...DefaultTheme,
enhanceApp: async ({<!-- --> app }) => {<!-- -->
app.use(dc);
},
};
doc configuration config
export default {<!-- -->
//Deploy your own server and remove/
base: '/dc-component',
themeConfig: {<!-- -->
siteTitle: 'dcqcComponent',
logo: '/logo.svg',
search: {<!-- -->
provider: 'local'
},
nav: [
{<!-- --> text: 'component', link: '/component/button' },
{<!-- --> text: 'Guide', link: '/guide/method' },
{<!-- --> text: 'hooks', link: '/hooks/method' },
{<!-- --> text: 'gitHub', link: 'https://github.com/lan-an/dc-component' }
],
sidebar: {<!-- -->
'/component/': [
{<!-- -->
text: 'component',
items: [
{<!-- -->
text: 'button',
link: '/component/button',
activeMatch: '/component/button'
}
]
}
],
'/guide/': [
{<!-- -->
text: 'Guide',
items: [
{<!-- -->
text: 'Get started quickly',
link: '/guide/method',
activeMatch: '/guide/method'
}
]
}
]
},
footer: {<!-- -->
message: 'Released under the MIT License.',
copyright: 'Copyright ? 2023-present Evan You'
},
editLink: {<!-- -->
pattern: ({<!-- --> filePath }) => {<!-- -->
return `https://github.com/lan-an/dc-component/docs/${<!-- -->filePath}`
}
}
},
markdown: {<!-- -->
lineNumbers: true
}
}
index.mdHomepage
---
layout:home
hero:
name: DcqcComponent
text: Vite & Vue powered static site generator.
tagline: Lorem ipsum...
image:
src: /logo.svg
alt:VitePress
actions:
- theme: brand
text: Get Started
link: /guide/method
- theme: alt
text: View on GitHub
link: https://github.com/lan-an/dc-component
features:
- icon: ?
title: development dependencies
details: Implemented using Vue + antd + Vite + pnpm package management
- icon:
title: soft dependency
details: All dependencies use soft links
- icon:
title: Ready out of the box
details: Commonly used basic UI components
---
Complete directory structure
