我最喜欢的开发VUE项目的组合是:VUE+VUEX+Axios+Element+Lodash,但是每次初始化项目时都必须:
这些步骤是相当重复的。
再者,如果是公司团队开发,更需要有统一的规范(如eslint规范)和统一的结构(如axios的统一挂载、登录拦截等)
那么,用约曼帮你处理这些问题吧!组长处理脚手架后,组员一键安装即可
简单介绍一下Yeoman,这是一个脚手架生成工具。比如之前编写MVC时,Visual Studio会为你选择模板,然后生成一个项目的基本结构(脚手架),这对于提升开发体验、节省重复性工作非常有帮助。但是,没有IDE(Webstorm?Maybe),没有固定的开发模式,可能你喜欢jshint,我想用eslint,你觉得英文方便,我觉得vue更合适。这时,你可以使用Yeoman作为一个工具,生成适合自己技术栈的脚手架,一些你需要的文件也是提前生成的,为自己省去一些麻烦。
安装基本工具:全局安装yo
全局安装`发电机-发电机
准备自己的模板:我已经在这里建立了自己的模板,我命名为vue-temp项目,包含vue+vuex+axios+element+lodash目录结构如下:开始构建自己的脚手架:在vue-temp目录中运行yo generator
然后会出现一系列咨询问题,其中生成器名称必须是generator--在开始时的基本框架安装完成后
记录如下所示:有一个额外的generator-ve-temp文件夹,其中的文件结构如下所示(只列出了一些):
其中
让我们做一些修改:步骤1:将generator-vue-temp削减到与vue-temp相同的级别:
步骤2:将vue-temp中的文件(node_modules除外)复制到generator-vue-temp\generators\app\templates文件夹中,删除该文件夹中的原始文件
完成后,步骤3大致如下:修改配置文件generators-vue-temp\generators\app\file:
在这里,你的脚手架其实已经搭建好了!
测试支架:在generator-vue-temp目录中执行npm link命令,这意味着将节点包链接到本地
然后在generator-ve-temp的对等目录下创建一个新文件夹test-ve-temp,然后运行它
当以下命令出现时,表示成功。输入y并按Enter键。等一会儿,您会发现新生成的内容与我们在generators-vue-temp\generators\app\templates下的内容完全相同!(好奇的同学可以运行项目看看是否相同)
至此,脚手架已成功生成!!!
接下来,你可以通过npm在网上发布,方便你下载使用
可以覆盖generators-vue-temp\generators\app\文件中的writing函数,以指定应该将这些文件复制到新项目中。我想用
手写框架时添加几个问题,方便生成项目填写,可以在提示功能中重写生成器-vue-temp\generators\app\file,添加几个问题,然后再写内容重写
总的来说,yeoman给我的感觉是用一个命令帮助您直接将模板文件复制到新项目中。它还支持通过提示问题修改某些文件。
事实上,yeoman并不局限于vue,它可以用于react、Golity,甚至python、go和其他项目
使用Yeoman制作前端脚手架,开始Yeoman模板开发并编写一个Yeoman生成器的api文档