Vali是一款基于Bootstrap 4，SASS和PUG.js构建的框架和组件集合主题，特点是模块化及可定制化。该主题包含了几乎所有的图表组件，各组件按需组合，即插即用。
项目架构
│
├── docs - compiled files （已编译文件）
│ ├── css （由sass编译而来的css文件）
│ ├── images （项目图片存储，可利用七牛云等工具转为链接）
│ └── js（由pug编译而来的js文件）
└── src - Layout and style source files（源文件）
├── pug - Layout source（框架源文件）
└── sass - Style source（样式源文件）
源文件编译
本主题使用SASS和Pug.Js构建，然后由Grunt将其编译为HTML和CSS。 如果您对Grunt不熟悉，请参阅这篇文章。如果您熟悉Grunt，请按照以下步骤处理源代码。
- 将下载项目放在你想放的位置，在该位置下运行
npm install来安装依赖项目
- 这一步需要你先安装了node.js
- 装完node.js之后安装grunt-CLI（在cmd中输入
npm install -g grunt -cli）- 这一步中的npm install你可能会困惑为什么后面没有安装内容，其实是会自动把文件目录中的package.json中devDependencies包含的依赖项目全部安装，这也是Grunt的管理项目的神奇之处之一
- 运行
npm run build来编译项目- 运行
npm run start来运行项目
- 运行之后，他会通知你可以到 http://localhost:8888 去预览你的项目
布局定制
本主题基于Pug.js构建页面布局。布局源文件位于src/pug目录中。这个目录下包含两个子目录：
- layout：包含了所有页面共用的HTML整体架构
- includes：局部架构，如侧边栏、导航栏和页脚等
样式定制
本主题样式基于SASS编写。所有样式文件都位于src/sass目录中。在这个目录中有一个main.sass，它import了所有sass文件，最后编译导出到docs/css目录中的main.css文件。
src/sass目录中有四个子目录：
- 1-tools：包含了所有外部库的样式以及一个_var.scss文件，包含了本主题所需变量（如：侧边栏宽度、颜色）
- 2-basics：包含基本样式，如整体架构CSS和主题选项
- 3-component：包含组件的样式，如卡片card，小工具widgets，侧边栏，导航栏等
- 4-pages：包含特定页面的样式，如登录页面，锁屏页面等
例如，要自定义主题和侧边栏的颜色，可参考图色代码更改1-tools/_var.scss中的相关变量。
如果你不想使用特定的组件或插件，只需在src/sass/main.scss中注释该特定组件的import语句，然后通过运行npm run build命令来编译SASS。
与其他框架兼容
与Angular或React不同，本主题为轻量主题，由于其具有模块化特性，很容易组合到其他的前端框架中。此外，如果你使用Node JS作为你的web服务器，那你可以使用pug作为你的布局引擎，详情可见PUG API
