vue-element-plus-admin-doc/assets/guide_design.md.a9f36c5d.js

import{o as s,c as a,a as e}from"./app.c38d1953.js";const n='{"title":"样式","description":"","frontmatter":{},"headers":[{"level":2,"title":"介绍","slug":"介绍"},{"level":2,"title":"unocss","slug":"unocss"}],"relativePath":"guide/design.md","lastUpdated":1721206001124}',t={},p=e('<h1 id="样式"><a class="header-anchor" href="#样式" aria-hidden="true">#</a> 样式</h1><h2 id="介绍"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>主要介绍如何在项目中使用和规划样式文件。</p><p>默认使用 <code>less</code> 作为预处理语言，建议在使用前或者遇到疑问时学习一下 <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> 的相关特性。</p><p>项目中使用的通用样式，都存放于 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/styles" target="_blank" rel="noopener noreferrer">src/style/</a> 下面。</p><div class="language-bash"><pre><code><span class="token builtin class-name">.</span>\n├── index.less <span class="token comment"># 入口</span>\n├── theme.less <span class="token comment"># 主题相关</span>\n├── var.css  <span class="token comment"># css变量</span>\n└── variables.module.less <span class="token comment"># less变量</span>\n\n</code></pre></div><div class="tip custom-block"><p class="custom-block-title">全局注入</p><p>variables.module.less 这个文件会被全局注入到所有文件，所以在页面内可以直接使用变量而不需要手动引入。</p><p>var.css 则是注入到根元素，所以在每个地方也都能用到。</p></div><h2 id="unocss"><a class="header-anchor" href="#unocss" aria-hidden="true">#</a> unocss</h2><p>项目中使用了 <a href="https://github.com/unocss/unocss#readme" target="_blank" rel="noopener noreferrer">unocss</a>，具体参见文件使用说明。</p><p>可能没有用到人会觉得用起来很不习惯，但就个人而言，用起来还是挺香的。减少了很多不必要的麻烦</p><p>语法如下:</p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>relative w-full h-full px-4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>\n</code></pre></div>',12);t.render=function(e,n,t,l,o,c){return s(),a("div",null,[p])};export default t;export{n as __pageData};