Giter Club home page Giter Club logo

vuepress-web-app's Introduction

静晴轩别苑

采用 VuePress 构建的 Web 应用程序:https://nice.lovejade.cn

目标与哲学

静晴轩别苑的诞生,其初衷完全是为了体验 VuePress: Vue 驱动的静态网站生成器。VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。除此之外,它还内置了以下优秀特性:

相比与 NuxtHexoJekyllDocsifyGitBook 等工具,VuePress 在不同方向,都拥有着巨大优势,并且仍在开发更新当中;如果你有搭建个人博客、技术文档的需求,那么 VuePress 将是超棒的选择。

附加功能

  • 添加基于 Github Issue 的评论功能(相当于内置 Gitalk);只需修改 .vuepress/themeConfig.js 文件中 comment 字段配置即可;具体字段含义,可参见Gitalk Options
  • 有添加 element-ui 依赖,以方便编写常用组件;此项目中,内置除了评论组件外,还有 Advertisement(广告)、ArticleList(文章列表)、Contact(联系方式)等;
  • 引入 prettier, lint-staged, husky 等依赖,从而使得写出更合乎‘规范’的 markdown;同时注入至 Git hooks,以确保你的代码库具有一致的风格;即使你正与团队合作编写,也不必为统一风格的问题而感到忧虑!

如何使用

可将项目 Fork 至自己的代码仓库,运行以下命令即可:

# 🎉 clone the project
https://github.com/nicejade/vuepress-web-app.git
cd vuepress-web-app

# ➕ install dependencies & start dev
yarn && yarn start

修改 deploy.sh 文件中的“自定义域名”以及“仓库路径”,运行如下命令,即可实现部署(默认发布至 github pages;如果暂不使用自定义域名,注释该行即可。

# 🚀 deploy to github-page
yarn deploy

相关链接

微信公众号 前端微信群 推荐 Web 应用
😉 静晴轩 ✨ 大前端联盟 🎉 倾城之链
静晴轩 倾城之链 倾城之链

许可执照

MIT

Copyright (c) 2018-present, nicejade

vuepress-web-app's People

Contributors

dependabot[bot] avatar nicejade avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vuepress-web-app's Issues

快应用之开发体验纪要 | 静晴轩别苑

https://nice.lovejade.cn/zh/article/develop-quick-app-experience-notes.html

快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定。其标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台,以平台化的生态模式对个人开发者和企业开发者全品类开放。快应用具备传统 APP 完整的应用体验,无需安装、即点即用;覆盖 10 亿设备,与操作系统深度集成,探索新型应用场景。

如何优雅处理「快应用」数据请求 | 静晴轩别苑

https://nice.lovejade.cn/zh/article/how-to-elegantly-handle-quickapp-request.html

查阅快应用开发文档,可以知道官方提供了数据请求接口;对于如何使用,文档中也给出了示例,但很显然,这在实际项目中,不够优雅且更不高效,所以需要对其进行再封装,使得可以大幅提升开发效率,同时也令整个代码优雅、便于维护。所以在此篇文章的存在,旨在于讨论下如何优雅处理快应用数据请求。

使用ESLint & Prettier美化Vue代码 | 静晴轩别苑

https://nice.lovejade.cn/zh/article/beautify-vue-by-eslint-and-prettier.html

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;您可以结合 ESLint 和 Prettier,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。

如何为项目编写良好 README | 静晴轩别苑

https://nice.lovejade.cn/zh/article/how-to-write-a-good-readme-for-your-project.html

README,它是别人对项目了解、印象的第一来源;尤其是针对开源项目,相当之重要:好比颜值之于一个人,主页之于一个公司;但很多项目并未重视这一点;各种仓库,浩如烟海,没有简洁、明晰的介绍,教人如何耐心去看?本篇文章的存在,即是为了改善这种情况。它将指导您如何写出一篇友好、易读的 README ,同时提供一键生成专业 README(模版)的工具,从而为广大开发者,解决如何书写良好 README 之烦忧;同时为诸多阅读者,缓解没有清晰 README 一窥项目主旨的苦恼。

静晴轩别苑

https://nice.lovejade.cn/zh/article/

Prettier 是一个有见识的代码格式化工具。它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要时包装代码。如今,它已成为解决所有代码格式问题的优选方案;您可以结合 ESLint 和 Prettier,检测代码中潜在问题的同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。

高效开发 Web 单页应用解决方案 | 静晴轩别苑

https://nice.lovejade.cn/zh/article/vue-webpack-boilerplate-template.html#%E9%A1%B9%E7%9B%AE%E5%BE%85%E4%BC%98%E5%8C%96%E7%9A%84%E9%82%A3%E4%BA%9B%E6%96%B9%E5%90%91

通过介绍一款开箱即用的 Vue Webpack 脚手架模版,以探讨“如何更高效开发单页面应用”;其中,对于构建中大型 Vue 项目,根据不断积淀的开发经验,提供创立项目基础、演示、大量的实践以及参考性建议;并且将保持持续性更新优化。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.