模仿vue-cli写一个简单脚手架

作者:iplaycodex
仓库:githubcodePen
博客:掘金segmentfault知乎简书博客园leetcode
公众号:FEZONE
联系我:iplaycodex@163.com
特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,尊重原创尊重知识产权从我做起

1. 前言

我的朋友们,你是否遇到过下面的这种情况.每当要开始做新项目的时候(此文档仅针对vue,后续会继续扩展),每次都需要使用vue-cli去初始化一个项目:

1
2
// init your project by vue-cli with webpack template
vue init webpack yourProject

一顿操作猛如虎生成了一个基于webpack的项目.BUT 距离开箱即用还是有一点距离.如果你的项目是个移动端的项目,那么针对移动端又需要安装大量的插件,第三方库.包括不限于如下所示:

  • fastclick
  • babel-polyfill
  • reset.css
  • border.css
  • rem.js
  • flexable.js
  • axios
  • qs

一遍一遍,真的是烦的要死.而且现在是一个强调工程化的时代,任何可以交给程序的东西都交给程序自动化的去做.而且每次这样做也不利于项目的一致性,规范性.如果你是一个团队owner,如何统一化开发流程,如何解决这个问题.则迫在眉睫.

既然产生了问题,那么就要解决问题.

2. 思路

前面的文章本人已经分享了自己编写的HTML开发规范,CSS开发规范以及Javascript开发规范.通过code-review来规范HTMLCSS的开发,通过eslint来规范javascript的开发.

通过eslint来规范js的开发,本人会在这个集合中再写一篇专门介绍如何使用eslint来规范js的开发.

2.1. 模板

既然vue-cli官方提供的模板不满足我们的需求(vue inint webpack project其实就是下载一个webpack的模板),那么我们就自定义一个满足自己项目需求的模板.在这个模板中配置好上述的所有插件,第三方库,工具类,布局组件,ui库,eslint,webpack配置等等…

做到真正的开箱即用,满足我们项目的使用.

2.2. cli

…未完,待续..

3. 结束语

❤️ 关注 + 点赞 + 收藏 + 评论 + 转发 ❤️
原创不易,鼓励笔者创作更好的文章~