草庐IT

Naïve UI——一个 Vue 3 组件库

注意,naive-ui仅支持Vue3。如果你在使用Vue2,可以去看看别的库。官网文档地址:https://www.naiveui.com/zh-CN/light/docs/introduction目录一、安装NaiveUI二、如何使用(1)局部安装(推荐)(2)全局安装(不推荐)三、支持的平台四、简单总结一、安装NaiveUInpmi-Dnaive-ui然后安装NaiveUI需要的字体:npmi-Dvfonts二、如何使用(1)局部安装(推荐)你可以直接导入组件并使用它。这种情况下,只有导入的组件才会被打包。naive-uiimport{defineComponent}from'vue'im

vue3里如何使用naive ui的useMessage

一、前言之前在用naiveui的表格组件的时候,我引入了个useMessage,当时不够熟悉data-table组件和vue3语法,还以为是我写错了,后面我按照官网给的例子引入,发现一直获取不到。所以专门开了一期,来稍微讲讲useMessage组件。二、错误示范我先举一下当时我的错误例子首先我在xx.vue文件里引入了import{useMessage}from'naive-ui'然后我在setup函数里,调用了下面这两个语句constmessage=useMessage()message.info(`Play`)到这里我还是觉得很正常,我引入了一个东西,然后我调用它生成了message变量,

Naive UI 获取树tree完整选中树结构(通用方法,也适用于其他自定义组件)

截止文章记录前,NaiveUI并未提供直接获取,与选中叶子节点相关的完整树结构数据方法,记录一下前端实现方法。数据准备:数据准备:树结构初始数据,选中相关的数据//初始树结构数据letdataSetData=[ { id:'1', text:'节点1', nodeuuid:'1', pnodeId:null, children:[] }, { id:'2', text:'节点2', nodeuuid:'2', pnodeId:null, children:[ { id:'2-1', text:'节点2-1', nodeuuid:'2-1', pn

两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件

使用Vue3、TypeScript、Vite、Naive-ui、Less、Pinia开发ChromeV3插件一、使用Vite创建Vue项目npmcreatevite@latest#npmyarncreatevite #yarnpnpmcreatevite #pnpm选择Vue和TS进入项目,并进行pnpmi安装node_modulespnpmi#安装node_modules包此时项目文件夹目录为:.├──README.md├──index.html├──package.json├──pnpm-lock.yaml├──public│└──vite.svg├──src│├──App.vue

naive-ui-admin BasicTable 列表操作栏显示图标icon

效果图在使用BasicTable的页面添加引用,这里随便弄了个iconimport{GameController}from"@vicons/ionicons5" 自定义列constactionColumn=reactive({width:180,title:"操作",key:"action",fixed:"right",render(record:any){returnh(TableAction,{style:"text",actions:[{label:"",icon:GameController,toolTip:"查看",onClick:view.bind(null,record)}]})

Vue3使用Naive UI Message等组件

NaviveUI官方文档有提示:在vue3中的setup里无法直接使用,现在要使用的话需要进行如下操作:1、创建其他组件用于存放Message,路径如下:index.ts内容如下:importMessageContentfrom'./index.vue';export{MessageContent};index.vue内容如下:import{useMessage}from'naive-ui';exportdefault{name:'MessageContent',setup(){//挂载在window方便与在js中使用window['$message']=useMessage();},}; 2

使用@zip.js/zip.js与naive-ui的Tree组件实现在线文件解压预览

zip.js用于压缩和解压缩文件的JavaScript库显着特点支持Zip64格式支持WinZIPAES和PKWareZipCrypto加密支持同时读取和写入一个或多个zip文件集成工作池管理器无第三方依赖该库依赖于Promise、TypedArray、 Streams API以及以下可选的API:WebWorkersCompressionStreamsWebCrypto兼容性该库与最新版本的Chrome、Firefox、Safari、MicrosoftEdge和Deno完全兼容。NaiveUI比较完整有超过80个组件,希望能帮你少写点代码。顺便一提,它们全都可以treeshaking。主题可

vue3 + naive ui + Tabs 报错 ‘Slot “default“ invoked outside of the render function‘

警告的异常信息:'Slot"default"invokedoutsideoftherenderfunction'解决方法:如下给Tabs组件加一个defaultValue的默认值即可参考:https://github.com/tusen-ai/naive-ui/issues/3134{colorSegment:"#c6c6c6"}}defaultValue={"one"}>

使用 CRXJS、Vite、TypeScript、Vue3、Pinia、Less、Naive-ui 开发 Chrome 浏览器插件——自带热加载,无需手动配置 vite.config.ts 文件

一、CRXJS一、什么是CRXJS?CRXJSVitePlugin是一款使用现代Web开发技术制作Chrome扩展的工具二、CRXJS的作用CRXJS支持热加载和静态资源导入,无需手动构建配置工具CRXJSVite插件通过将Vite的精细功能与简单的配置策略相结合,简化了Chrome扩展开发者体验二、使用Vue开发Chrome插件一、创建Vue项目1.使用Vite创建Vue项目npmcreatevite@latest#npmyarncreatevite #yarnpnpmcreatevite #pnpm选择Vue和TS进入项目,并进行pnpmi安装node_modulespnpmi#安

C++ - Kazushige Goto 论文中的优化矩阵乘法在 O3 标志中的表现比 naive 差

相关论文是here.我正在尝试重现KazushigeGoto关于快速矩阵乘法的开创性论文,方法是将其衰减为gepp(通用面板-面板)和gebp(通用block-面板)乘法的子例程,这显然是gemm最快的构建block。我编写了下面的代码来测试它并使用-O3标志,我发现我的代码的性能实际上更差比朴素的矩阵乘法:(~0.5xincrease)Timeelapsed:3.82941但是,如果没有-O3标志,我们看到速度确实比原始版本快:(~4xincrease)Timeelapsed:53.4537根据@ztik的建议,我在没有使用-mavx2-O3标志的情况下进行了尝试,并添加了-O2,它