vue组件库如何开发使用

{
"private":true,
"workspaces":[
"packages/*"
]
}

#W指workspace-root，即在项目根目录下安装，下同
yarnaddlerna-D-W
#由于经常使用lerna命令也推荐全局安装
yarnglobaladdlerna
or
npmilerna-g

lernainit

//lerna.json
{
"$schema":"node_modules/lerna/schemas/lerna-schema.json",
"useWorkspaces":true,
"version":"0.0.0"
}

//lerna.json
{
"version":"independent",
"npmClient":"yarn"
}

//lerna.json
{
"command":{
"version":{
"message":"chore(release):publish",
"conventionalCommits":true
}
}
}

cdargo-eslint-config
yarnaddeslint
npxeslint--init

//argo-eslint-config/package.json
{
scripts:{
"lint:script":"npxeslint--ext.js,.jsx,.ts,.tsx--fix--quiet./"
}
}

//settings.json
{
"editor.defaultFormatter":"dbaeumer.vscode-eslint",
"editor.codeActionsOnSave":{
"source.fixAll.eslint":true
}
}

module.exports={
env:{
browser:true,
es2021:true,
node:true
},
extends:['plugin:vue/vue3-essential','standard-with-typescript'],
overrides:[],
parserOptions:{
ecmaVersion:'latest',
sourceType:'module'
},
plugins:['vue'],
rules:{}
}

//argo-eslint-config/package.json
{
"main":"index.js"
}

//argo-eslint-config/package.json
{
"devDependencies":{
"@argo-design/eslint-config":"^1.0.0"
},
"eslintConfig":{
"root":true,
"extends":[
"@argo-design"
]
}
}

{
"comma-dangle":"off",
"no-comma-dangle":"off",
"@typescript-eslint/comma-dangle":"off",
"vue/comma-dangle":"off",
}

cdargo-prettier-config
yarnaddprettier
yarnaddeslint-config-prettiereslint-plugin-prettier

//argo-prettier-config/index.js
module.exports={
printWidth:80,//一行的字符数，如果超过会进行换行，默认为80
semi:false,//行尾是否使用分号，默认为true
trailingComma:'none',//是否使用尾逗号
bracketSpacing:true//对象大括号直接是否有空格
};

module.exports={
"extends":["plugin:prettier/recommended"]
};

{
"extends":["eslint-config-prettier"],
"plugins":["eslint-plugin-prettier"],
"rules":{
"prettier/prettier":"error",
"arrow-body-style":"off",
"prefer-arrow-callback":"off"
}
}

{
"devDependencies":{
"@argo-design/prettier-config":"^1.0.0"
},
"prettier":"@argo-design/prettier-config"
}

//settings.json
{
"editor.defaultFormatter":"esbenp.prettier-vscode"
}

cdargo-stylelint-config
yarnaddstylelintstylelint-prettierstylelint-config-prettierstylelint-orderstylelint-config-rational-orderpostcss-htmlpostcss-less
#单独postcss8
yarnaddpostcss@^8.0.0

//argo-stylelint-config/index.js
module.exports={
plugins:[
"stylelint-prettier",
],
extends:[
//"stylelint-config-standard",
"stylelint-config-standard-vue",
"stylelint-config-rational-order",
"stylelint-prettier/recommended"
],
rules:{
"length-zero-no-unit":true,//值为0不需要单位
"plugin/rational-order":[
true,
{
"border-in-box-model":true,//Border理应作为盒子模型的一部分默认false
"empty-line-between-groups":false//组之间添加空行默认false
}
]
},
overrides:[
{
files:["*.html","**/*.html"],
customSyntax:"postcss-html"
},
{
files:["**/*.{less,css}"],
customSyntax:"postcss-less"
}
]
};

{
"devDependencies":{
"@argo-design/stylelint-config":"^1.0.0"
},
"stylelint":{
"extends":[
"@argo-design/stylelint-config"
]
}
}

//settings.json
{
"editor.codeActionsOnSave":{
"source.fixAll.eslint":true,
"source.fixAll.stylelint":true
},
"stylelint.validate":["css","less","vue","html"],
"css.validate":false,
"less.validate":false
}

#在根目录安装husky
yarnaddhusky-D-W

npmpkgsetscripts.prepare="huskyinstall"
npmrunprepare
#添加pre-commit钩子,在提交前运行代码lint
npxhuskyadd.husky/pre-commit"yarnlint"

yarnaddlint-staged-D-W

{
"lint-staged":{
"*.{js,ts,jsx,tsx}":[
"eslint--fix",
"prettier--write"
],
"*.{less,css}":[
"stylelint--fix",
"prettier--write"
],
"**/*.vue":[
"eslint--fix",
"stylelint--fix",
"prettier--write"
]
}
}

#!/usr/bin/envsh
."$(dirname--"$0")/_/husky.sh"

npx--no-installlint-staged

():

yarnaddcommitizen-D-W

yarnaddcz-conventional-changelog-D-W

"config":{
"commitizen":{
"path":"./node_modules/cz-conventional-changelog"
}
}

"scripts":{
"cm":"cz"
},

yarnaddcommitlint@commitlint/cli@commitlint/config-conventional-D-W

module.exports={
extends:["@commitlint/config-conventional"]
};

npxhuskyadd.husky/commit-msg"npx--no-installcommitlint-e$HUSKY_GIT_PARAMS"

#!/usr/bin/envsh
."$(dirname--"$0")/_/husky.sh"

npx--no-installcommitlint-e

consttemplate=`

`

import{build}from"vite";
importfsfrom"fs-extra";

constCWD=process.cwd();
constES_DIR=resolve(CWD,"es");
constLIB_DIR=resolve(CWD,"lib");

interfacecompileOptions{
umd:boolean;
target:"component"|"icon";
}

asyncfunctioncompileComponent({
umd=false,
target="component"
}:compileOptions):Promise{
awaitfs.emptyDir(ES_DIR);
awaitfs.emptyDir(LIB_DIR);
constconfig=getModuleConfig(target);
awaitbuild(config);

if(umd){
awaitfs.emptyDir(DIST_DIR);
constumdConfig=getUmdConfig(target);
awaitbuild(umdConfig);
}
}

import{InlineConfig}from"vite";
importglobfrom"glob";
constlangFiles=glob.sync("components/locale/lang/*.ts");

exportdefaultfunctiongetModuleConfig(type:"component"|"icon"):InlineConfig{
constentry="components/index.ts";
constinput=type==="component"?[entry,...langFiles]:entry;
return{
mode:"production",
build:{
emptyOutDir:true,
minify:false,
brotliSize:false,
rollupOptions:{
input,
output:[
{
format:"es",//打包模式
dir:"es",//产物存放路径
entryFileNames:"[name].js",//入口模块的产物文件名
preserveModules:true,//保留模块结构,否则所有模块都将打包在一个bundle文件中
/*
*保留模块的根路径，该值会在打包后的output.dir中被移除
*我们的入口是components/index.ts,打包后文件结构为:es/components/index.js
*preserveModulesRoot设为"components"，打包后就是:es/index.js
*/
preserveModulesRoot:"components"
},
{
format:"commonjs",
dir:"lib",
entryFileNames:"[name].js",
preserveModules:true,
preserveModulesRoot:"components",
exports:"named"//导出模式
}
]
},
//开启lib模式
lib:{
entry,
formats:["es","cjs"]
}
},
plugins:[
//自定义external忽略node_modules
external(),
//打包声明文件
dts({
outputDir:"es",
entryRoot:C_DIR
})
]
};
};

exportdefaultfunctiongetUmdConfig(type:"component"|"icon"):InlineConfig{
constentry=
type==="component"
?"components/argo-components.ts"
:"components/argo-icons.ts";
constentryFileName=type==="component"?"argo":"argo-icon";
constname=type==="component"?"Argo":"ArgoIcon";


return{
mode:"production",
build:{
target:"modules",//支持原生ES模块的浏览器
outDir:"dist",//打包产物存放路径
emptyOutDir:true,//如果outDir在根目录下，则清空outDir
sourcemap:true,//生成sourcemap
minify:false,//是否压缩
brotliSize:false,//禁用brotli压缩大小报告。
rollupOptions:{//rollup打包选项
external:"vue",//匹配到的模块不会被打包到bundle
output:[
{
format:"umd",//umd格式
entryFileNames:`${entryFileName}.js`,//即bundle名
globals:{
/*
*format为umd/iife时，标记外部依赖vue，打包后以Vue取代
*未定义时打包结果如下
*varArgoIcon=function(vue2){}(vue);
*rollup自动猜测是vue,但实际是Vue.这会导致报错
*定义后
*varArgoIcon=function(vue){}(Vue);
*/
vue:"Vue"
}
},
{
format:"umd",
entryFileNames:`${entryFileName}.min.js`,
globals:{
vue:"Vue"
},
plugins:[terser()]//terser压缩
},
]
},
//开启lib模式
lib:{
entry,//打包入口
name//全局变量名
}
},
plugins:[vue(),vueJsx()]
};
};

exportconstCWD=process.cwd();
exportconstC_DIR=resolve(CWD,"components");

importdtsfrom"vite-plugin-dts";

plugins:[
dts({
outputDir:"es",
entryRoot:C_DIR
})
]

{
"sideEffects":false,
}

{
"main":"lib/index.js",//以esm形式被引入时的入口
"module":"es/index.js",//以commonjs形式被引入时的入口
"types":"es/index.d.ts"//指定声明文件
}

npxstorybookinit-tvue3-bwebpack5

{
"scripts":{
"storybook":"start-storybook-p6006",
"build-storybook":"build-storybook"
},
"devDependencies":{
"@storybook/vue3":"^6.5.13",
"@storybook/addon-links":"^6.5.13",
"@storybook/addon-essentials":"^6.5.13",
"@storybook/addon-actions":"^6.5.13",
"@storybook/addon-interactions":"^6.5.13",
"@storybook/testing-library":"^0.0.13",
"vue-loader":"^16.8.3",
"@storybook/builder-webpack5":"^6.5.13",
"@storybook/manager-webpack5":"^6.5.13",
"@babel/core":"^7.19.6",
"babel-loader":"^8.2.5"
}
}

exportconstparameters={
controls:{
matchers:{
color:/(background|color)$/i,
date:/Date$/
}
}
};

module.exports={
stories:[
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
addons:[
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions"
],
framework:"@storybook/vue3",
core:{
builder:"@storybook/builder-webpack5"
},
}

module.exports={
webpackFinal:(config)=>{
config.module.rules.push({
test:/.less$/,
use:[
{
loader:"style-loader"
},
{
loader:"css-loader"
},
{
loader:"less-loader",
options:{
lessOptions:{
javascriptEnabled:true
}
}
}
]
});

returnconfig;
},
}

yarnadd@vue/babel-plugin-jsx-D

{
"plugins":["@vue/babel-plugin-jsx"]
}

constinstance={
provides:parent?parent.provides:Object.create(appContext.provides)
}

functionprovide(key,value){
constparentProvides=currentInstance.parent&&currentInstance.parent.provides;
constnewObj=Object.create(parentProvides);
currentInstance.provides=newObj;
newObj[key]=value;
}

functioninject(key,defaultValue){
constinstance=currentInstance;
constprovides=instance.parent==null
?instance.vnode.appContent&&instance.vnode.appContent.provides
:	instance.parent.provides;

if(provides&&keyinprovides){
returnprovides[key]
}
}

importpathfrom"path";
import{outputFileSync}from"fs-extra";
importglobfrom"glob";

exportconstCWD=process.cwd();
exportconstC_DIR=path.resolve(CWD,"components");

exportconstlessgen=async()=>{
letlessContent=`@import"./style/index.less";n`;//全局样式文件
constlessFiles=glob.sync("**/style/index.less",{
cwd:C_DIR,
ignore:["style/index.less"]
});
lessFiles.forEach((value)=>{
lessContent+=`@import"./${value}";n`;
});

outputFileSync(path.resolve(C_DIR,"index.less"),lessContent);
log.success("genless","generateindex.lesssuccess!");
};

@import"./style/index.less";
@import"./button/style/index.less";
/*otherlessofcomponents*/

importpathfrom"path";
import{readFile,copySync}from"fs-extra"
import{render}from"less";

exportconstES_DIR=path.resolve(CWD,"es");
exportconstLIB_DIR=path.resolve(CWD,"lib");

constless2css=(lessPath:string):string=>{
constsource=awaitreadFile(lessPath,"utf-8");
const{css}=awaitrender(source,{filename:lessPath});
returncss;
}

constfiles=glob.sync("**/*.{less,js}",{
cwd:C_DIR
});

for(constfilenameoffiles){
constlessPath=path.resolve(C_DIR,`${filename}`);
//less文件拷贝到es和lib相对应目录下
copySync(lessPath,path.resolve(ES_DIR,`${filename}`));
copySync(lessPath,path.resolve(LIB_DIR,`${filename}`));

//组件样式/总入口文件/全局样式的入口文件编译成css
if(/index.less$/.test(filename)){
constcssFilename=filename.replace(".less",".css");
constES_DEST=path.resolve(ES_DIR,`${cssFilename}`);
constLIB_DEST=path.resolve(LIB_DIR,`${cssFilename}`);
constcss=awaitless2css(lessPath);

writeFileSync(ES_DEST,css,"utf-8");
writeFileSync(LIB_DEST,css,"utf-8");
}
}

importpathfrom"path";
importCleanCSS,{Output}from"clean-css";
import{ensureDirSync}from"fs-extra";
exportconstDIST_DIR=path.resolve(CWD,"dist");

console.log("startbuildcomponents/index.lesstodist/argo(.min).css");
constindexCssPath=path.resolve(ES_DIR,"index.css");
constcss=readFileSync(indexCssPath,"utf8");
constminContent:Output=newCleanCSS().minify(css);

ensureDirSync(DIST_DIR);
writeFileSync(path.resolve("dist/argo.css"),css);
writeFileSync(path.resolve("dist/argo.min.css"),minContent.styles);
log.success(`buildcomponents/index.lesstodist/argo(.min).css`);

import"../../style/index.less";
import"./index.less";

import"../../style/index.css";
import"./index.css";

"sideEffects":[
"dist/*",
"es/**/style/*",
"lib/**/style/*",
"*.less"
]

//locale.ts
import{ref,reactive,computed,inject}from"vue";
import{isString}from"../_utils/is";
importzhCNfrom"./lang/zh-cn";

exportinterfaceArgoLang{
locale:string;
button:{
defaultText:string;
}
}

typeArgoI18nMessages=Record;

//默认使用中文
constLOCALE=ref("zh-CN");
constI18N_MESSAGES=reactive({
"zh-CN":zhCN
});

//添加语言包
exportconstaddI18nMessages=(
messages:ArgoI18nMessages,
options?:{
overwrite?:boolean;
}
)=>{
for(constkeyofObject.keys(messages)){
if(!I18N_MESSAGES[key]||options?.overwrite){
I18N_MESSAGES[key]=messages[key];
}
}
};

//切换语言包
exportconstuseLocale=(locale:string)=>{
if(!I18N_MESSAGES[locale]){
console.warn(`use${locale}failed!Pleaseadd${locale}first`);
return;
}
LOCALE.value=locale;
};

//获取当前语言
exportconstgetLocale=()=>{
returnLOCALE.value;
};

exportconstuseI18n=()=>{
consti18nMessage=computed(()=>I18N_MESSAGES[LOCALE.value]);
constlocale=computed(()=>i18nMessage.value.locale);

consttransform=(key:string):string=>{
constkeyArray=key.split(".");
lettemp:any=i18nMessage.value;

for(constkeyItemofkeyArray){
if(!temp[keyItem]){
returnkey;
}
temp=temp[keyItem];
}
returntemp;
};

return{
locale,
t:transform
};
};

//lang/zh-CN.ts
constlang:ArgoLang={
locale:"zh-CN",
button:{
defaultText:"按钮"
},
}

//lang/en-US.ts
constlang:ArgoLang={
locale:"en-US",
button:{
defaultText:"Button",
},
}

import{computed}from"vue";
import{Meta,StoryFn}from"@storybook/vue3";
import{
Button,
addI18nMessages,
useLocale,
getLocale
}from"@argo-design/argo-ui/components/index";//源文件形式引入方便开发时调试
importenUSfrom"@argo-design/argo-ui/components/locale/lang/en-us";

interfaceArgs{}

exportdefault{
title:"Component/locale",
argTypes:{}
}asMeta;

constBasicTemplate:StoryFn=(args)=>{
return{
components:{Button},
setup(){
addI18nMessages({"en-US":enUS});
constcurrentLang=computed(()=>getLocale());
constchangeLang=()=>{
constlang=getLocale();
if(lang==="en-US"){
useLocale("zh-CN");
}else{
useLocale("en-US");
}
};
return{args,changeLang,currentLang};
},
template:`
内部切换语言,当前语言:{{currentLang}}
仅在未提供ConfigProvider时生效
点击切换语言

`
};
};
exportconstBasic=BasicTemplate.bind({});
Basic.storyName="基本使用";
Basic.args={};

import"@argo-design/argo-ui/components/index.less";

exportinterfaceConfigProvider{
locale?:ArgoLang;
}

exportconstconfigProviderInjectionKey:InjectionKey=
Symbol("ArgoConfigProvider");

import{configProviderInjectionKey}from"../config-provider/context";

exportconstuseI18n=()=>{
constconfigProvider=inject(configProviderInjectionKey,undefined);
consti18nMessage=computed(
()=>configProvider?.locale??I18N_MESSAGES[LOCALE.value]
);
constlocale=computed(()=>i18nMessage.value.locale);

consttransform=(key:string):string=>{
constkeyArray=key.split(".");
lettemp:any=i18nMessage.value;

for(constkeyItemofkeyArray){
if(!temp[keyItem]){
returnkey;
}
temp=temp[keyItem];
}
returntemp;
};

return{
locale,
t:transform
};
};

constProviderTemplate:StoryFn=(args)=>{
return{
components:{Button,ConfigProvider},
render(){
return(



);
}
};
};
exportconstProvider=ProviderTemplate.bind({});
Provider.storyName="在config-provider中使用";
Provider.args={
//在这里把enUS传给ConfigProvider的locale
locale:enUS
};

import{createApp}from"vue";
importAppfrom"./App.vue";
import{Button,Empty,ConfigProvider}from"@argo-design/argo-ui";
import{Anchor}from"@argo-design/argo-ui";
createApp(App)
.use(Button)
.use(Empty)
.use(ConfigProvider)
.use(Anchor)
.mount("#root");

import{defineConfig}from"vite";
importargoAutoInjectStylefrom'vite-plugin-argo-auto-inject-style';
exportdefaultdefineConfig({
plugins:[
argoAutoInjectStyle({
libs:[
{
libraryName:"@argo-design/argo-ui",
resolveStyle:(name)=>{
return`@argo-design/argo-ui/es/${name}/style/index.js`;
}
}
]
})
]
})

{
name:"vite-plugin-vue-auto-inject-style",
configResolved(config){}
}

importtype{Plugin}from"vite";
import{createFilter}from"@rollup/pluginutils";
import{ExportSpecifier,ImportSpecifier,init,parse}from"es-module-lexer";
importMagicStringfrom"magic-string";
import*aschangeCasefrom"change-case";
import{Lib,VitePluginOptions}from"./types";

constasRE=/s+ass+w+,?/g;

//插件本质是一个对象，但为了接受在配置时传递的参数，我们通常在一个函数中将其返回。
//插件默认开发和构建阶段都会应用
exportdefaultfunction(options:VitePluginOptions):Plugin{
const{
libs,
include=["**/*.vue","**/*.ts","**/*.tsx"],
exclude="node_modules/**"
}=options;
constfilter=createFilter(include,exclude);

return{
name:"vite:argo-auto-inject-style",
asynctransform(code:string,id:string){
if(!filter(id)||!code||!needTransform(code,libs)){
returnnull;
}

awaitinit;
letimports:readonlyImportSpecifier[]=[];
imports=parse(code)[0];

if(!imports.length){
returnnull;
}

lets:MagicString|undefined;
conststr=()=>s||(s=newMagicString(code));

for(letindex=0;indexitem.libraryName===libraryName);
}

functiongetImportItems(importStr:string){
if(!importStr){
return[];
}
constmatchItem=importStr.match(/{(.+?)}/gs);
constformItem=importStr.match(/from.+/gs);
if(!matchItem)return[];
constexportStr=`export${matchItem[0].replace(asRE,",")}${formItem}`;

letimportItems:readonlyExportSpecifier[]=[];
try{
importItems=parse(exportStr)[1];
}catch(error){
console.log(error);
}
returnimportItems;
}

functionneedTransform(code:string,libs:Lib[]){
returnlibs.some(({libraryName})=>{
returnnewRegExp(`('${libraryName}')|("${libraryName}")`).test(code);
});
}

exportinterfaceLib{
libraryName:string;
resolveStyle:(name:string)=>string;
}

exporttypeRegOptions=
|string
|RegExp
|Array
|null
|undefined;

exportinterfaceVitePluginOptions{
include?:RegOptions;
exclude?:RegOptions;
libs:Lib[];
}

@blue-6:#3491fa;
@blue-1:color-palette(@blue-6,1);
@blue-2:color-palette(@blue-6,2);
@blue-3:color-palette(@blue-6,3);
@blue-4:color-palette(@blue-6,4);
@blue-5:color-palette(@blue-6,5);
@blue-7:color-palette(@blue-6,7);
@blue-8:color-palette(@blue-6,8);
@blue-9:color-palette(@blue-6,9);
@blue-10:color-palette(@blue-6,10);

@primary-1:@blue-1;
@primary-2:@blue-2;
@primary-3:@blue-3;
//以此类推...

@success-1:@green-1;
@success-2:@green-2;
@success-3:@green-3;
//以此类推...

/*@warn@danger@info等等*/

@color-primary-1:@primary-1;
@color-primary-2:@primary-2;
@color-primary-3:@primary-3;
/*...*/

.argo-btn.arco-btn-primary{
color:#fff;
background-color:@color-primary-1;
}

//webpack.config.js
module.exports={
rules:[{
test:/.less$/,
use:[{
loader:'style-loader',
},{
loader:'css-loader',
},{
loader:'less-loader',
options:{
lessOptions:{
modifyVars:{
'primary-6':'#f85959',
},
javascriptEnabled:true,
},
},
}],
}],
}

//vite.config.js
exportdefault{
css:{
preprocessorOptions:{
less:{
modifyVars:{
'primary-6':'#f85959',
},
javascriptEnabled:true,
}
}
},
}

@dark-blue-1:dark-color-palette(@blue-6,1);
@dark-blue-2:dark-color-palette(@blue-6,2);
@dark-blue-3:dark-color-palette(@blue-6,3);
@dark-blue-4:dark-color-palette(@blue-6,4);
@dark-blue-5:dark-color-palette(@blue-6,5);
@dark-blue-6:dark-color-palette(@blue-6,6);
@dark-blue-7:dark-color-palette(@blue-6,7);
@dark-blue-8:dark-color-palette(@blue-6,8);
@dark-blue-9:dark-color-palette(@blue-6,9);
@dark-blue-10:dark-color-palette(@blue-6,10);

body{
--color-bg:#fff;
--color-text:#000;
--primary-6:@primary-6;
}
body[argo-theme="dark"]{
--color-bg:#000;
--color-text:#fff;
--primary-6:@dark-primary-6;
}

.argo-btn.argo-btn-primary{
color:#fff;
background-color:var(--primary-6);
}

body{
color:var(--color-bg);
background-color:var(--color-text);
}

//设置为暗黑模式
document.body.setAttribute('argo-theme','dark')

//恢复亮色模式
document.body.removeAttribute('argo-theme');

body{
--primary-6:'#3491fa'
}
.argo-btn{
color:#fff;
background-color:var(--primary-6);
}

//可计算selectedColor的10个颜色梯度值列表，并逐一替换
document.body.style.setProperty('--primary-6',colorPalette(selectedColor,6));
//....

%%API(button.vue)%%

%%INTERFACE(interface.ts)%%

import{Project}from"ts-morph";
constproject=newProject();
project.addSourceFileAtPath(filepath);
constsourceFile=project.getSourceFile(filepath);
constinterfaces=sourceFile.getInterfaces();
constcomponentDocList=[];
interfaces.forEach((interfaceDeclaration)=>{
constproperties=interfaceDeclaration.getProperties();
constcomponentDocJson={
displayName:interfaceDeclaration.getName(),
exportName:interfaceDeclaration.getName(),
props:formatterProps(properties),
tags:{}
};

if(componentDocJson.props.length){
componentDocList.push(componentDocJson);
}
});

//genMd(componentDocList);

```yaml
meta:
type:组件
category:通用
title:按钮Button
description:按钮是一种命令组件，可发起一个即时操作。
```

@import./__demo__/basic.md

@import./__demo__/disabled.md

##API

###``Props
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|type|按钮的类型，分为五种：次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮。|`'secondary'|'primary'|'dashed'|'outline'|'text'`|`"secondary"`|
|shape|按钮的形状|`'square'|'round'|'circle'`|`"square"`|
|status|按钮的状态|`'normal'|'warning'|'success'|'danger'`|`"normal"`|
|size|按钮的尺寸|`'mini'|'small'|'medium'|'large'`|`"medium"`|
|long|按钮的宽度是否随容器自适应。|`boolean`|`false`|
|loading|按钮是否为加载中状态|`boolean`|`false`|
|disabled|按钮是否禁用|`boolean`|`false`|
|html-type|设置`button`的原生`type`属性，可选值参考[HTML标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"_blank")|`'button'|'submit'|'reset'`|`"button"`|
|href|设置跳转链接。设置此属性时，按钮渲染为a标签。|`string`|`-`|

###``Events
|事件名|描述|参数|
|---|---|---|
|click|点击按钮时触发|event:`Event`|

###``Slots
|插槽名|描述|参数|
|---|:---:|---|
|icon|图标|-|

###``Props
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|disabled|是否禁用|`boolean`|`false`|

##INTERFACE

###ButtonProps
|参数名|描述|类型|默认值|
|---|---|---|:---:|
|type|按钮类型|`ButtonTypes`|`-`|

constButton=()=>import("@argo-design/argo-ui/components/button/README.zh-CN.md");

constrouter=createRouter({
{
path:"/button",
	component:Button
}
});

exportdefaultrouter;

//vite.config.ts
import{defineConfig}from"vite";
importvuefrom"@vitejs/plugin-vue";
importmdfrom"./plugins/vite-plugin-md/index";

exportdefaultdefineConfig({
server:{
port:8002,
},
plugins:[md(),vue()],
});

//App.vue

//readme.md
@import./__demo__/basic.md

@import"./__demo__/basic.md"

@import ./__demo__/basic.md

//marked.ts
import{marked}from"marked";
importpathfrom"path";

constmdImport={
name:"mdImport",
level:"block",
tokenizer(src:string){
construle=/^@imports+(.+)(?:n|$)/;
constmatch=rule.exec(src);
if(match){
constfilename=match[1].trim();
constbasename=path.basename(filename,".md");

return{
type:"mdImport",
raw:match[0],
filename,
basename,
};
}
returnundefined;
},
renderer(token:any){
return`n`;
},
};

marked.use({
extensions:[mdImport],
});

exportdefaultmarked;

//index.ts
import{Plugin}from"vite";
importmarkedfrom"./marked";

exportdefaultfunctionvueMdPlugin():Plugin{
return{
name:"vite:argo-vue-docs",
asynctransform(code:string,id:string){
if(!id.endsWith(".md")){
returnnull;
}
consttokens=marked.lexer(code);
consthtml=marked.parser(tokens);
constvueCode=transformMain({html,tokens});
},
};
}

//vue-template.ts
importchangeCasefrom"change-case";
importmarkedfrom"./marked";

exportconsttransformMain=({
html,
tokens,
}:{
html:string;
tokens:any[];
}):string=>{
constimports=[];
constcomponents=[];
for(consttokenoftokens){
constcomponentName=changeCase.pascalCase(`demo-${token.basename}`);

imports.push(`import${componentName}from"${token.filename}";`);
components.push(componentName);
}


return`



`;
};

import{getVueId}from"./utils";

exportdefaultfunctionvueMdPlugin():Plugin{
letvuePlugin:Plugin|undefined;
return{
name:"vite:argo-vue-docs",
configResolved(resolvedConfig){
vuePlugin=resolvedConfig.plugins.find((p)=>p.name==="vite:vue");
},
asynctransform(code:string,id:string){
if(!id.endsWith(".md")){
returnnull;
}
if(!vuePlugin){
returnthis.error("Notfoundplugin[vite:vue]");
}
consttokens=marked.lexer(code);
consthtml=marked.parser(tokens);
constvueCode=transformMain({html,tokens});
returnawaitvuePlugin.transform?.call(this,vueCode,getVueId(id));
},
};
}

//utils.ts
exportconstgetVueId=(id:string)=>{
returnid.replace(".md",".vue");
};

UncaughtSyntaxError:Therequestedmodule'/src/__demo__/basic.md?import'doesnotprovideanexportnamed'default'(atreadme.vue:9:8)

//index.ts
asynctransform(code:string,id:string){
if(!id.endsWith(".md")){
returnnull;
}

//新增对demo文档的解析分支
if(isDemoMarkdown(id)){
consttokens=marked.lexer(code);
constvueCode=transformDemo({tokens,filename:id});
returnawaitvuePlugin.transform?.call(this,vueCode,getVueId(id));
}else{
consttokens=marked.lexer(code);
consthtml=marked.parser(tokens);
constvueCode=transformMain({html,tokens});
returnawaitvuePlugin.transform?.call(this,vueCode,getVueId(id));
}

},

//utils.tsexport
constisDemoMarkdown=(id:string)=>{
return//__demo__//.test(id);
};

//vue-template.ts
exportconsttransformDemo=({
tokens,
filename,
}:{
tokens:any[];
filename:string;
})=>{
constdata={
html:"",
};

constvueCodeTokens=tokens.filter(token=>{
returntoken.type==="code"&&token.lang==="vue"
});
data.html=marked.parser(vueCodeTokens);

return`



`;
};

exportconsttransformDemo=({
tokens,
filename,
}:{
tokens:any[];
filename:string;
})=>{
constdata={
html:"",
};
constvirtualPath=`/@virtual${filename}`;
constvueCodeTokens=tokens.filter(token=>{
constisValid=token.type==="code"&&token.lang==="vue"
//缓存vue模版代码
isValid&&createDescriptor(virtualPath,token.text);
returnisValid;
});
data.html=marked.parser(vueCodeTokens);

return`



`;
};

//utils.ts
exportconstisVirtualModule=(id:string)=>{
return//@virtual/.test(id);
};

exportdefaultfunctiondocPlugin():Plugin{
letvuePlugin:Plugin|undefined;

return{
name:"vite:plugin-doc",
resolveId(id){
if(isVirtualModule(id)){
returnid;
}
returnnull;
},
load(id){
//遇到虚拟md模块，直接返回缓存的内容
if(isVirtualModule(id)){
returngetDescriptor(id);
}
returnnull;
},
asynctransform(code,id){
if(!id.endsWith(".md")){
returnnull;
}

if(isVirtualModule(id)){
returnawaitvuePlugin.transform?.call(this,code,getVueId(id));
}

//省略其它代码...
}
}
}

//cache.ts
constcache=newMap();
exportconstcreateDescriptor=(id:string,content:string)=>{
cache.set(id,content);
};
exportconstgetDescriptor=(id:string)=>{
returncache.get(id);
};

yarnaddprismjs

//marked.ts
importPrismfrom"prismjs";
importloadLanguagesfrom"prismjs/components/index.js";

constlanguages=["shell","js","ts","jsx","tsx","less","diff"];
loadLanguages(languages);

marked.setOptions({
highlight(
code:string,
lang:string,
callback?:(error:any,code?:string)=>void
):string|void{
if(languages.includes(lang)){
returnPrism.highlight(code,Prism.languages[lang],lang);
}
returnPrism.highlight(code,Prism.languages.html,"html");
},
});

//main.ts
import"prismjs/themes/prism.css";

import"../../style/index.less";//全局样式
import"./index.less";//组件样式复制代码

importtype{Plugin}from"vite";
import{OutputChunk}from"rollup";

exportdefaultfunctioncssjsPlugin():Plugin{
return{
name:"vite:cssjs",
asyncgenerateBundle(outputOptions,bundle){
for(constfilenameofObject.keys(bundle)){
constchunk=bundle[filename]asOutputChunk;
this.emitFile({
type:"asset",
fileName:filename.replace("index.js","css.js"),
source:chunk.code.replace(/.less/g,".css")
});
}
}
};
}