FIS3简介

最新推荐文章于 2024-05-11 10:08:19 发布
最新推荐文章于 2024-05-11 10:08:19 发布
阅读量943 收藏
点赞数
分类专栏： FIS3 文章标签： FIS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky2_/article/details/101061109
版权

FIS3是类似于webpack的一个打包工具，我觉得他是最简单直接的模块化开发工具，先看看他的脚手架目录：
在这里插入图片描述
跟vue,angular的脚手架差别不是很大，在src文件里：

  • assets放置的是静态资源文件，例如iconfont、图片和一些scss文件
  • components问价里放置的是通用组件，这里我写的是头部、底部、导航栏和侧边栏，之后在index.html中按照所需顺序进行引入即可
  • pages文件里放置的是算是核心页面吧，我这里只有一个index页面
  • utils文件里是引入的jquery文件
  • 其余则是一些配置文件，在外部的index.html文件中引入的组件，示例如下：
    在这里插入图片描述
    在使用过程中，我选择的node版本是6.10.0，执行npm install -g fis3，随后fis -v查看是否安装成功，执行npm run dev即可
    详细介绍可以去官方网站查看(http://fis.baidu.com/fis3/docs/beginning/intro.html)
lucky2_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端 后端 Fis3+Es6+Smarty+Tmpl
04-08
graduation 毕业设计代码，还没完成！但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解： 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示，留言，评论，评论量，访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟，后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的插件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget，里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要，一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位置 ├── static # 静态资源发布位置 ├── plugin # plugin/*.php 发布位置 └── config # config/*.json 发布位置
前端开源库-fis3-deploy-replace
08-29
### 一、FIS3简介 FIS3是一个高效、灵活且强大的前端构建工具，旨在提高开发效率，降低维护成本。它支持多种语言，如HTML、CSS、JavaScript，并提供了丰富的插件体系，可以自定义扩展。`deploy-replace`是FIS3部署...
了解FIS3
weixin_44987155的博客
06-30 256
FIS3 是什么？ 最近接触到了fis3的相关使用，所以也了解了fis3相关的一些基础知识。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。 一、安装fis3（要安装node） 执行cmd命令： npm install -g fis3 安装完成后，测试是否安装成功，输入命令：...
【工具】fis3 - 使用教程（02）
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
12-05 3749
前提回顾OK，在本篇中我们将介绍如何调式和发布前面我们已经构建好的项目。由于我们将项目进行构建之后，发现构建之后项目中的资源文件的路径从“相对路径”——>变成了“绝对路径”。这样一来，不方便我们的调式。所以，fis3为了解决这个问题，就在fis3中内置了web server 以方便调式查看我们的构建结果。那问题是我们该如何使用呢？往下看~ 打开web server根目录 （1）在使用该命令的时候，有一个前提————即，我们在构建项目时，不指定输出目录，即fis3 release -d ./output 变
推荐使用 | FIS3：面向前端的高效能工程构建系统
最新发布
gitblog_00094的博客
05-11 262
推荐使用 | FIS3：面向前端的高效能工程构建系统 项目地址:https://gitcode.com/fex-team/fis3 在前端开发领域，高效且灵活的构建工具是提升工作效率的关键。今天，我们要向您隆重推荐一个强大的开源项目——FIS3，它是一个面向前端的全方位工程构建系统，旨在解决前端工程中的各种挑战，如性能优化、资源加载、模块化开发、自动化工具、开发规范以及代码部署等复杂问题。 1、项...
fis3
包磊磊的博客
09-09 559
1 打开 cmd  2 用 node -v  和 npm -v 检测node的版本号 3 npm install -g cnpm --registry=https://registry.npm.taobao.org  （等转圈） 4 cnpm -v  （查看cnpm是否安装成功） 5 cnpm install -g fis3（用cnpm的命令代替npm 命令 安装fis3）  （等转圈
fis3项目个人理解
认真和努力总没有错
03-13 652
Fis项目个人理解： `pages`目录存放是页面文件存放路径 1.        `index`页面是首页文件 2.        `login`页面是登陆页文件 3.        `commons`目录存放各个页面的公共文件，如公共菜单、公共样式等 4.        `templates`属于各个页面的公共模板，如页首、页尾等 `libs`目录是存放第三方库文件目录：就是放js...
PyPI 官网下载 | fis3-0.0.6.tar.gz
01-11
**PyPI 官网下载 | fis3-0.0.6.tar.gz** PyPI（Python Package Index）是Python开发者发布和查找Python软件包的主要平台。它是一个存储库，包含了各种Python模块、工具和项目的源代码，供全球的Python开发者下载和...
前端开源库-fis3-command-install
08-30
### fis3简介 `fis3`是基于Node.js的前端构建工具，由百度前端技术团队开发，旨在解决前端开发中的资源管理和优化问题。它包含了编译、压缩、合并、模块化、自动化测试等众多功能，能够帮助开发者快速构建复杂的...
前端开源库-fis3-postpackager-simplify
08-30
**FIS3简介** FIS3是一个面向现代Web应用的构建工具，它的核心特性包括： 1. **模块化管理**：支持CommonJS、AMD和ES6模块化标准，使代码组织更加有序。 2. **资源管理**：自动处理CSS、JavaScript、图片等资源的...
fis3-command-webfont:使用fis3将svg字体自动转换为eot，svg，woff，ttf并输出CSS样式
05-11
fis3-command-webfont 背景与简介目前移动端webfont字体使用越来越广泛，由于缺少比较好的自动化工具，开发者在修改字体图标时需要在2个平台进行转换(svg转ttf再转woff2,woff2普遍不支持)才能完成字体生成工作。...
fis3简单项目
07-21
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。
FIS3学习笔记（二）
cr196的博客
12-05 466
前言：在之前学习了调试和内置语法后，又根据帮助文档学习了初级使用和中级使用。 高级使用大致了解，需要实际应用才可加深理解。 接下来主要总结接口文档FIS3帮助文档链接1.命令行命令行大致有如下这几种：（可根据命令行代码 fis3 -h 查询） init,release,inspect,install,server2.配置FIS3的特性与css很多特性相似，比如 （1）属性覆盖，后面同名属性覆
fis3学习笔记
认真和努力总没有错
11-14 1320
11月7日安装fis3： - 1.在Windows系统中，开始菜单的搜索框中输入cmd打开命令行，在打开的命令行窗口中输入npm install -g fis3,然后按回车，然后fis3自己进行安装，等待十分钟左右，安装完毕。 - 2.在命令行中输入fis3 -v可以查看fis3的版本，检查是否安装成功。如果出现FIS的图标就表示安装成功，如果出现’fis3’ 不是内部或外部命令，也不是可运
fis3初步学习体验
orichisonic的专栏
05-09 1087
作为前端开发，或多或少都会接触很多前端构建工具，最近的业务使用到了百度FIS团队的fis3，想和大家分享下我所理解的fis3。 使用方法简单说 首先，你需要安装node和npm 然后，使用 npm install -g install 命令安装fis3，安装完成是这样的 表示安装成功。 然后我们可以通过 fis3 release -w 来对代码进行监听。 注：f
webpack 之 webpack 认识和 webpack 基础用法的 Entry、Output、Loaders、Plugins、Mode 和资源解析
浮生离梦的博客
04-09 724
一、webpack 认识 为什么需要构建工具，如下所示： 转换 ES6 语法 转换 JSX CSS 前缀补全/预处理器 压缩混淆 图片压缩 前端构建演变之路，ant + YUI Tool -> grunt -> fis3、gulp -> rollup、webpack、parcel。 为什么选择 webpack，如下所示： 社区生态丰富 配置灵活和插件化扩展 官方更新迭代速度快 初识 webpack，如下所示： 配置文件名称，webpack 默认配置文件为 webpac
fis 产出修改的html,FIS3项目构建
weixin_42508058的博客
06-05 217
一、安装fis3(确保已经安装了node)执行cmd命令：npminstall-gfis3安装完成后，测试是否安装成功，输入命令：fis3-v如图所示说明安装成功！二、新建项目(此处我以Hbuilder开发工具为例)1)新建web项目目录结构：2)fis3配置fis3配置文件为fis-conf.js，它所在的文件目录为项目根目录，例如我这里新建的项目Test的根目录为src。fis-con...
FIS3的简单使用
weixin_33901641的博客
11-08 151
序言： 最近在收集前端的优化工具，随便一搜，厉害了word哥，有grunt、gulp、FIS3、webpack等等，简直就是眼花缭乱！前辈们对于他们的评价各有千秋，于是乎就想每个都来用一遍（之前已经倒腾了grunt，gulp），今天倒腾fis3,看看哪个更好玩~ FIS3 是什么？能做什么？ FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖...
fis3 上传文件报错
05-20
上传文件报错可能是...6. Fis3配置问题：检查您的Fis3配置是否正确，特别是上传路径和服务器配置。 如果以上方法都无法解决问题，请尝试查看上传日志以获取更多信息，并尝试联系服务器管理员或开发人员以获取帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值