### RuoYi-Vue Project Development Setup

Source: https://github.com/yangzongzhuan/ruoyi-cloud/blob/master/ruoyi-ui/README.md

This snippet provides commands to clone the RuoYi-Vue project, navigate into its directory, install dependencies using npm, and start the development server. It also includes a tip for resolving slow npm download speeds by configuring a registry mirror.

```bash
# 克隆项目
git clone https://gitee.com/y_project/RuoYi-Vue

# 进入项目目录
cd ruoyi-ui

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev
```

--------------------------------

### RuoYi-Vue Project Build Commands

Source: https://github.com/yangzongzhuan/ruoyi-cloud/blob/master/ruoyi-ui/README.md

This snippet provides commands to build the RuoYi-Vue project for different environments: a testing environment and a production environment. These commands generate optimized static assets for deployment.

```bash
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

--------------------------------

### Implement Full-Page CSS Preloader with Spinning Animation

Source: https://github.com/yangzongzhuan/ruoyi-cloud/blob/master/ruoyi-ui/public/index.html

This CSS snippet provides a comprehensive solution for a full-page loading overlay. It features a central spinning circular loader with multiple layers, and a unique split-screen effect where two sections slide out to reveal the content. The animations are defined using @keyframes for smooth transitions. It also includes styles for handling 'no-js' scenarios and basic body/app styling.

```CSS
<%= webpackConfig.name %> html, body, #app { height: 100%; margin: 0px; padding: 0px; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -webkit-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -webkit-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite; -ms-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #FFF; -moz-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #7171C6; z-index: 1000; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; } .no-js #loader-wrapper { display: none; } .no-js h1 { color: #222222; } #loader-wrapper .load_title { font-family: 'Open Sans'; color: #FFF; font-size: 19px; width: 100%; text-align: center; z-index: 9999999999999; position: absolute; top: 60%; opacity: 1; line-height: 30px; } #loader-wrapper .load_title span { font-weight: normal; font-style: italic; font-size: 13px; color: #FFF; opacity: 0.5; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.