Vue3自制UI框架技术总结

时间：2023-03-28 00:03:12 HTML

本项目结构所有UI组件及其依赖都放在lib文件中，用于搭建官网。正式版只需要将lib文件中的组件导出即可。常用控件的实现--数据结构设计参考ElementUI。笔者发现，为了提供组件定制能力，我们需要定义一套高可用的数据结构，从而实现组件需求变化带来的可维护性优势。.不同的组件对应不同的组件属性。我们需要设计一个统一的标准配置来约定它，这样以后的扩展就很方便了，给组件添加属性就可以了。以Button为例，我按照如下属性表实现组件，功能互不影响。常用控件的实现--vue3的新特性笔者在制作框架中学习和理解了Vue3的新特性。属性和事件继承与Vue2相比，Vue3默认为子组件继承属性和事件。你可以选择关闭，props声明的属性将不再帮你继承：//SubcomponentinheritAttr=falsev-modelVue3abandoned.sycn修饰符，满足要求使用v-model，否则手动通信。v-model://parent//childthis.emit('update:xxx',yyy)manual://parentxxx=yyy"/>//childthis.emit('update:xxx',yyy)新模板语法——类绑定绑定对象

上面的语法表示active是否存在取决于数据属性isActive的值是true还是false。TeleportDialog对话框组件在打开时应覆盖整个页面。使用Teleport可以脱离当前的堆叠上下文，去你想去的地方。componentmeta-componentsandcontext在制作Tabs和Tabs时，用户可以这样使用：“你死后，我会照顾你的妻子，你放心吧。”“大哥，师傅被人夺走了一个妖精。”"大郎，该吃药了。"“我看过这个之前的姐姐"第一步：需要检查Tabs子组件的类型，如果不是tab，直接报错setup(props,context){constdefaults=context.slots.default()defaults.forEach((tag)=>{if(tag.type!==Tab){thrownewError('TabsmustbeaTab')}}第二步：导航栏遍历所有Tabs的标题consttitles=defaults.map((tab)=>{returntab.props.title})第三步：显示选中的Tab组件constcurrent=computed(()=>{returndefaults.find(tab=>tab.props.title===props.selected)})可以发现深入理解context和component组件可以灵活实现功能。rollup包文件Rollup是一个JavaScript模块打包器，可以将小段代码编译成大段复杂代码。安装npminstall--globalrollupconfiguration//rollup.config.js//compiletsimportesbuildfrom'rollup-plugin-esbuild'//Compilevueimportvuefrom'rollup-plugin-vue'//Compilescssimportscssfrom'rollup-plugin-scss'importdartSassfrom'sass';//中断代码import{terser}from"rollup-plugin-terser"exportdefault{//entryinput:'src/lib/index.ts',//output输出：[{globals:{vue:'Vue'},name:'Friday',文件:'dist/lib/friday.js',格式:'umd',plugins:[terser()]},{name:'Friday',文件:'dist/lib/friday.esm.js',格式:'es',插件:[terser()]}],插件:[scss({include:/\.scss$/,sass:dartSass}),esbuild({include:/\.[jt]s$/,minify:process.env.NODE_ENV==='production',target:'es2015'}),vue({include:/\.vue$/,})],}简单易用的API--Element.getBoundingClientRect()Element.getBoundingClientRect()返回一个DOMRect对象，它是包围整个元素（包括padding和border-width)此对象使用只读属性left、top、right、bottom、x、y、width和height（以像素为单位）描述整个矩形的位置和大小。其他插件--引入marked和prismjsmarked来转换.md文件。引入$npmaddmarked来配置vite.config.ts。建议将它们放在一个md.ts文件中并调用//vite.config.ts//@ts-nocheckimportpathfrom'path'importfsfrom'fs'importmarkedfrom'marked'constmdToJs=str=>{constcontent=JSON.stringify(marked(str))return`exportdefault${content}`}exportdefault{plugins:[{configureServer:[//用于开发async({app})=>{app.use(async(ctx,next)=>{//koaif(ctx.path.endsWith('.md')){ctx.type='js'constfilePath=path.join(process.cwd(),ctx.path)ctx.body=mdToJs(fs.readFileSync(filePath).toString())}else{awaitnext()}})},],transforms:[{//forrollup//plugintest:context=>context.path.endsWith('.md'),transform:({code})=>mdToJs(code)}]}],};prismjs形成一个代码块语法高亮引入$npminstallprismjs使用prismjs默认提供多个主题，可以到node_modules\prismjs\themes中找到