大家好,我是dyb-dev,今天给大家带来一款非常好用的技术文档站点模板,该模板目前已开源,大家可放心使用!
话不多说先看实战效果:
实战项目:Vant-Pro
模板简介:
该模板集成了前端众多最新的技术栈,由 VitePress + Vue3 + TS + Scss + Vite5 + VSCode + Ant-Design-Vue + PWA 组成
1. 插件方面内置了 markdownlint + eslint + prettier + stylelint + husky + prettier-eslint + vue-tsc 等插件,能够让你保证良好的代码格式规范和极高的开发效率
2. 配置方面内置了 markdownlint + eslint + vscode + prettier + stylelint 等配置,无需自己手动配置规则,另外还额外内置了众多非常实用的vscode插件推荐,并且你无需手动配置对应插件的配置
3. 工具包方面内置了 dayjs + query-string + vconsole 等工具包,能够让你在处理日期时间、URL上有优异的表现
该模板还支持主题定制、代码预览、移动端控制台调试、本地搜索、本地https服务、PWA离线访问等功能,最最最重要的一点是配置极其简单,并且大部分配置集成在一个文件当中,方便统一管理,只需简单配置便可搭建你的技术文档站点,还等什么快快使用起来吧!
模板安装步骤:
1. 新建一个文件然后在终端中打开该文件,执行以下命令行:
// 如果你使用的是 npm 或者 yarn,那么只需把 pnpm 替换即可
pnpm create @dyb-dev/create-project@latest
2. 如果你能够看到以下界面就代表执行成功了
3. 接下来继续输入 .
,然后选择 lib-docs-template 模板
4. 如果下载成功将会呈现以下结果:
好的到现在为止你已经讲模板拉取到你的本地了
5. 这个时候只需执行一下命令便可运行起来了
// 初始化所有依赖包
pnpm install
// 本地运行
pnpm dev
使用教程:
1. 相关站点配置可在 .env 和 .env.production 和 .vitepress/config.ts 文件进行更改
2. 页面存放在 src/views 目录中,详细使用示例还请参考源码
3. 静态资源文件存放至 src/assets 或 public 目录中,请注意 public 目录中的静态资源在引用时需要使用内置的 toAssetsAbsoluteUrl 工具函数,使用示例还请参考源码
希望能给大家带来帮助!