[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"content-\u002Fdocs\u002Finstallation":3},{"id":4,"title":5,"body":6,"description":226,"extension":227,"meta":228,"navigation":177,"path":229,"seo":230,"stem":231,"__hash__":232},"content\u002Fdocs\u002Finstallation.md","安装",{"type":7,"value":8,"toc":221},"minimark",[9,12,16,20,23,66,73,76,79,108,111,114,117,214,217],[10,11,5],"h1",{"id":5},[13,14,15],"p",{},"下面的步骤以使用 pnpm 的 Vue 3 项目为例。MoriUI 依赖 Tailwind CSS 4，并把所有组件样式汇总在一个公开入口中。",[17,18,19],"h2",{"id":19},"安装依赖",[13,21,22],{},"在项目目录安装组件包与 Tailwind 的 Vite 插件：",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light github-dark","pnpm add moriui\npnpm add -D tailwindcss @tailwindcss\u002Fvite\n","bash","",[31,32,33,49],"code",{"__ignoreMap":29},[34,35,38,42,46],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sScJk","pnpm",[34,43,45],{"class":44},"sZZnC"," add",[34,47,48],{"class":44}," moriui\n",[34,50,52,54,56,60,63],{"class":36,"line":51},2,[34,53,41],{"class":40},[34,55,45],{"class":44},[34,57,59],{"class":58},"sj4cs"," -D",[34,61,62],{"class":44}," tailwindcss",[34,64,65],{"class":44}," @tailwindcss\u002Fvite\n",[13,67,68,69,72],{},"然后按 Tailwind CSS 4 的方式把 ",[31,70,71],{},"@tailwindcss\u002Fvite"," 加入 Vite 插件列表。",[17,74,75],{"id":75},"引入样式",[13,77,78],{},"在应用的全局样式文件中保持这两个导入，并确保该文件由应用入口加载：",[24,80,84],{"className":81,"code":82,"language":83,"meta":29,"style":29},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"moriui\u002Fstyle.css\";\n","css",[31,85,86,99],{"__ignoreMap":29},[34,87,88,92,95],{"class":36,"line":37},[34,89,91],{"class":90},"szBVR","@import",[34,93,94],{"class":44}," \"tailwindcss\"",[34,96,98],{"class":97},"sVt8B",";\n",[34,100,101,103,106],{"class":36,"line":51},[34,102,91],{"class":90},[34,104,105],{"class":44}," \"moriui\u002Fstyle.css\"",[34,107,98],{"class":97},[13,109,110],{},"不需要逐个引入组件样式，也不需要复制 Nova 的主题变量。",[17,112,113],{"id":113},"第一个组件",[13,115,116],{},"组件可以直接在 Vue 单文件组件中导入并组合：",[24,118,122],{"className":119,"code":120,"language":121,"meta":29,"style":29},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n  import { Button } from 'moriui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CButton>保存更改\u003C\u002FButton>\n\u003C\u002Ftemplate>\n","vue",[31,123,124,148,162,172,179,189,205],{"__ignoreMap":29},[34,125,126,129,133,136,139,142,145],{"class":36,"line":37},[34,127,128],{"class":97},"\u003C",[34,130,132],{"class":131},"s9eBZ","script",[34,134,135],{"class":40}," setup",[34,137,138],{"class":40}," lang",[34,140,141],{"class":97},"=",[34,143,144],{"class":44},"\"ts\"",[34,146,147],{"class":97},">\n",[34,149,150,153,156,159],{"class":36,"line":51},[34,151,152],{"class":90},"  import",[34,154,155],{"class":97}," { Button } ",[34,157,158],{"class":90},"from",[34,160,161],{"class":44}," 'moriui'\n",[34,163,165,168,170],{"class":36,"line":164},3,[34,166,167],{"class":97},"\u003C\u002F",[34,169,132],{"class":131},[34,171,147],{"class":97},[34,173,175],{"class":36,"line":174},4,[34,176,178],{"emptyLinePlaceholder":177},true,"\n",[34,180,182,184,187],{"class":36,"line":181},5,[34,183,128],{"class":97},[34,185,186],{"class":131},"template",[34,188,147],{"class":97},[34,190,192,195,198,201,203],{"class":36,"line":191},6,[34,193,194],{"class":97},"  \u003C",[34,196,197],{"class":131},"Button",[34,199,200],{"class":97},">保存更改\u003C\u002F",[34,202,197],{"class":131},[34,204,147],{"class":97},[34,206,208,210,212],{"class":36,"line":207},7,[34,209,167],{"class":97},[34,211,186],{"class":131},[34,213,147],{"class":97},[13,215,216],{},"确认按钮能以键盘聚焦并显示 Nova 样式后，就可以继续添加其他组件。",[218,219,220],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":29,"searchDepth":51,"depth":51,"links":222},[223,224,225],{"id":19,"depth":51,"text":19},{"id":75,"depth":51,"text":75},{"id":113,"depth":51,"text":113},"安装 MoriUI、接入样式并渲染第一个组件。","md",{},"\u002Fdocs\u002Finstallation",{"title":5,"description":226},"docs\u002Finstallation","9aGGuZrkXLScIaQ3cLUU3civIylJBMo8JflNeU0bOEA",1784368649989]