基于 Vue-Cli3 的开箱即用脚手架模版

本贴最后更新于 2317 天前,其中的信息可能已经斗转星移

Awesome Vue-Cli3 ExamplE :基于 Vue-Cli3 搭建的开箱即用 Vue 脚手架模版, 致力于探究更高效地构建优质 Web 应用。

功能详述

Vue-Cli3:对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。

此脚手架:基于 Vue-Cli3 所构建,延续早先 vue-boilerplate-template 项目所倡导,旨在探究更高效地构建优质 Web 应用(推荐阅读开箱即用的 Vue Webpack 脚手架模版);为此,有作以下工作:

  • 注入并配置 Vue-router,使得构建单页面应用(SPA)变得易如反掌;
  • 注入并配置 Vuex,以方便处理应用程序开发的状态管理;
  • 引入 Element-ui,以便快速搭建网站,而无需过多关注 UI;
  • 引入 Axios 并做封装,使得更优雅处理 Http 请求;
  • 引入 Dayjs,使得以更小的代价,处理日期时间相关;
  • 引入 marked 插件,并做封装,使得可以充作富文本编辑器;同时亦可借助它的解析功能,实现 Markdown 来绘制页面;
  • 基于 Webepack 4.* 新增特性,作了优化,详见 vue.config.js
  • 开启 & 运用 Jest 对组件做单元测试,并附以 Demo 示例;
  • 集成 Prettier 插件并做配置,促使团队写出更好且风格一致的代码,具体参见使用 ESLint & Prettier 美化 Vue 代码
  • 注入 prerender-spa-plugin 插件,使得在单页面应用程序中预呈现静态 HTML,优化 SEO 以及首屏渲染。
  • 注入 webpack-bundle-analyzer 插件,使得运行 yarn analyz,即可直观得到构建包内容,以助优化;详情参见:Webpack 打包优化之体积篇
  • 注入 size-plugin 插件,使得在构建应用之时,可打印 Webpack 资产的 gzip 大小,以及自上次构建以来的变更。
  • 优化内置 Icon(Svg) 组件,使可以接收不同方式输入,并将 Svg 提取至单独文件中,以避免资源重复加载;
  • 将此脚手架,结合 Node.js(Koa2) Nginx MondoDb Redis,汇融入于 Docker,使 Front-End Developer 可轻松构建整个 Web 应用(目前已开源在 docker-vue-node-nginx-mongodb-redis)。
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1348 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    265 引用 • 666 回帖
  • 脚手架
    2 引用 • 10 回帖
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 258 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • Vanessa via macOS

    终于呀。要不自己写 webpack 和 express 还是蛮费时间和精力,不知道自定义方便否?

    1 回复
  • jeffjade via macOS
    作者

    整体上对自定义的支持是比较好的。但,从之前的折腾经历来看,添加或者移除相对独立的格式支持,也比较容易;但对于复杂的就显得不尽人意,没有原来的方便:比如 Svg

  • jeffjade via macOS
    作者

    将此脚手架集结 DockerVueNodeNginxMongodb 以及 Redis 于一体,旨在更高效和优雅构建、开发您的 Web 应用程序,目前已经开源于 🐉Docker Vue Node Nginx Mongodb Redis,后续将持续更新。

jeffjade
在职程序员,晚晴幽草轩轩主,倾城之链开发者 深圳

推荐标签 标签

  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    159 引用 • 3809 回帖 • 1 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 4 关注
  • 印象笔记
    3 引用 • 16 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 663 关注
  • danl
    153 关注
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1395 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    345 引用 • 724 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 531 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    5 引用 • 107 回帖 • 2 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖 • 4 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 215 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    26 引用 • 196 回帖 • 19 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 491 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • Anytype
    3 引用 • 31 回帖 • 2 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 35 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2036 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 166 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 900 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 750 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 183 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    166 引用 • 595 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3191 引用 • 8214 回帖