最好用的js前端框架、组件、文档在线预览插件

这里收集的都是个人认为比较好的js框架、组件

js前端ui框架

此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完整解决方案。

  1. Kendo UI
    商用收费,组件丰富,界面简洁美观,有jquery和angular两个js的版本

  2. Webix
    商用收费,组件丰富,界面特别美观

  3. JQwidgets
    商用收费,丰富的组件,有angular2、react、jquery以及ASP.NET MVC版本

  4. Wijmo
    商用收费,看着不错,但是官网好像没有比较详细的示例

  5. jquery easyui
    商用收费, easyui这个框架相信大多数人都知道,组件丰富,接口友好,但是ui不美观,生成的dom结构过于冗余。

  6. layui
    开源免费,国产框架,小巧,精致,但是table、tree组件的功能性还比较欠缺,希望之后会有改进。

基于react的ui框架

  1. ant design
    开源免费,来自于蚂蚁金服的企业级应用解决方案,组件丰富,可以满足绝大部分的应用需求。
    目前react的企业级ui框架,目前我只发现这一个,其余都只是基础样式库。

  2. Material UI

  3. React Toolbox

    更多react相关框架可以查看此处

js独立ui组件

  1. 树/树表 fancytreezTree
  2. 列表 fancygridjsgriddatatablesjqgrid
  3. 弹窗 layer 来自于layui的独立组件
  4. 即时通讯 layim来自于layui的独立组件
  5. 文件上传 webuploader 来自于百度FEX团队

    更多组件可点击这里

js富文本编辑器/代码编辑器

  1. Ueditor
    百度前端团队开发的富文本编辑器,开源免费,功能丰富

  2. markitup

  3. TinyMCE

  4. CodeMirror
    是一个提供代码在线编辑、代码高亮、语法检查的js插件,目前许多在线代码编辑器都是基于此开发的

数据可视化

  1. Echarts
    百度团队开发,是目前我用过的最好用的图表控件,目前有2.x、3.x的版本。

  2. d3.js
    做数据可视化的应该没有不知道d3的吧。

  3. jsPlumb
    一个连线插件,基于它可以完成流程图/UML的绘制,之前用过是免费的,现在好像也收费了。

  4. JointJS
    jointjs本身开源免费,但是基于它的一套完整框架Rappid收费。jointjs可以绘制丰富的图表、流程图、UML图等。

  5. three.js
    一个3d图形库,基于它可以开发出各种3d交互、图形、游戏等。

WEB文档在线预览解决方案

web页面无法支持预览office文档,但是却可以预览PDF、flash文档,所以大多数解决方案都是在服务端将office文档转换为pdf,然后再通过js的pdf预览插件(谷歌浏览器等已经原生支持嵌入PDF文档)进行查看。

Aspose
后台转换可以使用Aspose将office文档转换为PDF格式,Aspose功能强大,支持编辑/转换word、excel、ppt、pdf等,且API操作简便快速。Aspose是收费的,你需要下载破解版本。

除了Aspose可以编辑文档,类似的还有NPOI 、POI等。

  1. 利用flexPaper预览swf文件,百度文库就是这种方式
    由于现在flash插件用得已经很少,此处不再赘述,详细请看这里

  2. pdfjs
    pdfjs是firefox浏览器内置的pdf预览插件,由于是开源的,我们也可以使用它,ie版本只支持ie9/ie9+。
    它通过将pdf转换为html元素再添加一些css3的样式达到pdf的预览效果,文档样式与原文档几乎没有太大区别。

  3. 在页面中嵌入多媒体对象(PDF、flash、video等)
    缺点是不同的浏览器支持及呈现不一致,比如pdf目前只有webkit浏览器原生支持嵌入,而且移动端的webkit浏览器也是不支持的。
    PDF嵌入可以采用已封住好操作的插件PDFObject,也可以通过浏览器API自行编写。

WEB打印

web打印目前要么使用window.print() 要么使用flash插件,
前者不好控制打印设置
详细请看这里

  • 4
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 要搭建一个使用 Vue 框架前端项目,需要以下步骤: 1. 安装 Node.js 环境,以使用 npm 包管理工具。 2. 使用 npm 安装 Vue CLI,这是一个命令行工具,可以帮助您快速搭建一个 Vue 项目。 3. 通过 Vue CLI 创建一个新项目,并选择所需的模板和插件。 4. 在项目中定义组件并使用 Vue 指令和语法实现前端逻辑。 5. 设置路由以实现单页面应用(SPA)的功能。 6. 编写单元测试以保证代码质量。 7. 运行 npm run build 命令,将项目打包为生产版本,以便发布到生产环境。 8. 配置 Webpack 以调整打包配置,例如使用代码分离或 tree shaking 等。 以上是使用 Vue 搭建前端框架的基本步骤,如果需要更详细的配置,可以参考 Vue 官方文档。 ### 回答2: 使用Vue搭建一个前端框架,并配置完成,主要分为以下几个步骤: 1. 安装Node.js和npm:首先需要在电脑上安装Node.js和npm,这是Vue的运行环境和包管理工具。 2. 全局安装Vue-cli:打开命令行工具,执行`npm install -g @vue/cli`命令,将Vue-cli安装在全局环境中。 3. 创建一个新的Vue项目:在命令行中执行`vue create my-project`命令,其中`my-project`是项目的名称,可以根据自己的需求修改。 4. 选择项目配置:在创建项目的过程中,会弹出一些选项供你选择。可以选择默认配置,也可以根据需要手动配置功能。 5. 安装依赖:项目创建完成后,进入项目目录,执行`npm install`命令,安装项目的依赖项。 6. 运行项目:执行`npm run serve`命令,在本地启动项目并运行开发服务器。在浏览器中输入对应的地址,即可预览项目。 7. 开始开发:打开项目所在的源代码目录,可以看到项目的基本结构。在src目录下的App.vue文件中,可以撰写页面的HTML结构,以及添加Vue的组件和逻辑代码。在assets目录下,可以存放项目所需的静态资源,如图片、样式表等。在components目录下,可以存放项目的各个组件。 8. 配置完成:根据项目要求,进行进一步的配置,如添加路由、状态管理、axios等,来满足项目的功能需求。 通过以上步骤,我们就能够使用Vue搭建一个前端框架,并根据需要进行配置,以便后续的开发工作。随着项目的不断迭代,我们可以根据实际需要修改和完善项目的配置。 ### 回答3: 使用Vue搭建一个前端框架并进行配置是一个相对简单的过程。首先,我们需要安装Vue的脚手架工具Vue CLI。可以使用npm或者yarn进行安装,具体命令如下: npm install -g @vue/cli 或 yarn global add @vue/cli 安装完成后,我们可以使用Vue CLI来创建一个新的项目。在命令行中输入以下命令: vue create my-project 这样就创建了一个名为my-project的项目。接下来,Vue CLI会提供一些配置选项,包括项目的类型、预设配置等。我们可以根据实际需求进行选择,也可以选择默认配置。等待Vue CLI自动创建项目并安装依赖。 创建项目完成后,我们就可以使用Vue进行开发了。项目的源代码位于src目录下,其中主要文件是App.vue和main.js。App.vue是项目的根组件,main.js是项目的入口文件。 在App.vue中,我们可以定义项目的整体布局和样式。可以使用Vue提供的组件、指令、数据绑定等特性来实现页面的交互逻辑。 在main.js中,我们可以配置一些全局的设置,例如路由、状态管理等。可以使用Vue Router来管理项目中的路由,可以使用Vuex来管理项目的状态。 除了以上两个文件,我们还可以创建其他的组件文件和模块文件来分别管理不同的业务逻辑。 完成了具体的开发工作后,我们可以使用以下命令来启动项目的开发服务器: npm run serve 或 yarn serve 这样就可以在浏览器中进行预览和调试。在开发过程中,我们可以热更新的方式修改代码,并实时查看页面的变化。 完成项目的开发后,我们可以使用以下命令来进行打包和部署: npm run build 或 yarn build 这样就可以将项目打包成静态文件,可以部署到服务器上供用户访问。 以上就是使用Vue搭建一个前端框架并配置完成的简要过程。当然,在实际项目中,还需要根据具体需求进行更加详细的配置和开发。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值