该工具适用于超多项目开发,每个项目不用都安装依赖,所有依赖都安装在ffk命令项目中,对于多分支拉到本地进行开发,亦有益处。对于多页面开发,也是相当便利,不用手动撸entry和plugin。

git:

https://github.com/lin1270/ffk

欢迎star.

1. 安装:

npm install ffk -g

2. 下载种子:

https://github.com/lin1270/ffk-seed

3. 在种子目录中使用dev(开发)命令:

ffk d

即可打开浏览器,实时刷新html网页。

4. 打包:

ffk o

o=output,会在目录中生成output目录。

代码说明:

===================================================

1. 种子

data

拷贝文件夹,打包出来的output文件夹中,在aasets中,可以看到data文件夹。

pages

页面,index.js为入口js,index.vue为入口vue。

index.config.json为配置:

{
"title":"a-new",
"keywords":"ksdkkks",
"useVconsole":false
}

若要添加新的页面,需要复制一份文件夹,html的名称为文件夹名称。

最外层的 ffk.config.json:

{
"px2rem": false,
"cdn":[],
"eslint": false
}

px2rem,一般用于移动端,适配不同分辨率的设备。

cdn,用于替换路径,若cdn配置为["//www.baidu.com/a/], (目前暂未使用项目名添加为cdn配置)如:

background: url("../../img/a.png");

则a.png会使用cdn的路径进行替换为//www.baidu.com/a/a.png,如果有多个CDN路径,则随机使用其中一个。

eslint是否使用eslit。

2. ffk

使用 portfinder 进行多端口分配。

使用 WebpackDevServer 启动本地服务。

使用 hmr 进行动态刷新网页。

vue项目自动构建工具1.0,支持多页面构建的更多相关文章

  1. Mysql自动备份工具1.0(2013年11月15日更新)

    Mysql自动备份工具1.0 下载地址 2013-11-15 1.解决日历控件在Windows7/8/8.1环境下遮挡按钮问题:2.解决按月备份当月没有该日期问题: 2013-11-13 1.Mysq ...

  2. Jenkins Vue项目自动构建以及构建后续操作

    Jenkins在linux上的安装教程:http://www.ityouknow.com/springboot/2017/11/11/springboot-jenkins.html 另外,关于在win ...

  3. 跨平台自动构建工具v1.0.2 发布

    XMake是一个跨平台自动构建工具,支持在各种主流平台上构建项目,类似cmake.automake.premake,但是更加的方便易用,工程描述语法更简洁直观,支持平台更多,并且集创建.配置.编译.打 ...

  4. java实现的一个maven多模块项目自动生成工具

    平时在做spring mvc web新项目时,都需要自己去搭建spring mvc的项目框架,包括基本pom 依赖引入,基本配置文件(web.xml,spring-mvc.xml,数据库配置文件等等) ...

  5. 如何在输入命令行npm run dev 之后vue项目自动在浏览器打开

    使用代码编辑器打开vue项目代码,在config文件夹里面找到index.js 将里面的:autoOpenBrowser: false, 修改为 :autoOpenBrowser: true, 这个方 ...

  6. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  7. Vue项目自动转换 px 为 rem,高保真还原设计图

    技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...

  8. 【转载】Vue项目自动转换 px 为 rem,高保真还原设计图

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  9. Vue项目用了脚手架vue-cli3.0,会报错You are using the runtime-only build of Vue where the template compiler is not available.....

    摘自: https://blog.csdn.net/wxl1555/article/details/83187647 报错信息如下图: 报错原因是:vue有两种形式的代码:一种是compiler(模版 ...

随机推荐

  1. learing cbor protocol

    https://tools.ietf.org/html/rfc7049 https://github.com/panzidongfamily/tinycbor

  2. ege图形库之简单贪吃蛇(c++)

    第二次做动画显示效果的小程序,心血来潮想做下儿时的经典游戏----贪吃蛇.由于时间有限,只是简单地做了基本功能,有时间后再完善更多功能. 由于个人水平有限,可能代码有些地方可以改进.不足之处敬请指出. ...

  3. 数据结构-用C++实现一个二叉树,递归方法中序遍历

    1:二叉排序树,又称二叉树.其定义为:二叉排序树或者空树,或者是满足如下性质的二叉树. (1)若它的左子树非空,则左子树上所有节点的值均小于根节点的值. (2)若它的右子树非空,则右子树上所有节点的值 ...

  4. Docker+Rancher构建部署流水线

    工作多年,在项目部署方面, 1:以前用ftp或者rz上传更新的,每次更新算上打包.目录切换.更新遗漏.备份.出错还原.启动等工作都得搞上一来小时甚至更长,要是多两台服务器那心都凉了: 2:后来有用sv ...

  5. Centos镜像下载地址

    https://blog.csdn.net/weixin_42430824/article/details/81019039

  6. decimal模块 --数字的精度、保留小数位数、取整问题

    开始之前需要注意一点是:精度值为数字的总位数,如:1.23, 精度值为3: 0.123,精度值也为3 1.更改默认精度值后,直接进行计算即可保留对应精度值 from decimal import ge ...

  7. (转载)IOCP 浅析

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-iocp/#author   郭 仁祥, 软件工程师, IBM 简介: 传统的 Server/Cli ...

  8. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  9. LC 638. Shopping Offers

    In LeetCode Store, there are some kinds of items to sell. Each item has a price. However, there are ...

  10. Android中常见的默认实现类

    * Basexxx* Defaultxxx* Simplexxx* Baicxxx