360SDN.COM

首页/Vue.js/列表

和React 比起来 Vue.js 好用吗(国内有哪些公司在用Vue.js,有什么心得?)知乎)

来源:  2017-05-26 10:21:33    评论:0点击:

来源:https://zhidao.baidu.com/question/986082170185390139.html
Backbone
手工同步数据和页面真得好烦。

Angular 1.x
很久之前用过快忘记是什么体验了,只记得有点重,组件化开发很弱。 Angular 2 看了眼介绍不是我的菜且体积巨大。

React
用 React + Redux + ES 6 搞过一个项目,数据井井有条,架构比较清楚,配套也好(自动刷新不丢页面状态),只是有点繁琐。 Virtual DOM 的存在使得和真实 DOM 隔了一层有时很不方便,函数式的架构使得组件之间的通信也难处理。

Vue.js
Vue.js 一眼看上去是实用风格,这框架我在用 React 之前就注意到了,只是当时一看是个国人作品就无视了,想不到突然就火起来了。 它比 React+Redux 轻量,内建组件间通信机制,支持组件,配套也不错该有的都有,看上去挺不错的样子,只是是个人项目,不过作者很勤奋所以这可能不是问题。且看作者的一些文字发现作者视野开阔不太会把 Vue 带沟里去偏离前端大势。



作者:杨奕
链接:https://www.zhihu.com/question/38213423/answer/101195694
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

1、由饿了么 UED (知乎专栏)设计的桌面端组件库已经开源,文档:Element,仓库: GitHub - ElemeFE/element: Desktop UI elements for Vue.js 2.0。这套组件库是基于 Vue 2 的,我们也希望大家开始使用 Vue 2,一起来丰富它的生态圈。
2、下面提到的移动端组件都被整合进了 Mint UI,仓库在 GitHub - ElemeFE/mint-ui: Mobile UI elements for vue.js
======= 原答案 =======
饿了么。
从去年开始,有越来越多的项目在使用 vue。这些项目里面,有桌面端(比如 饿了么安全应急响应中心)也有移动端(比如 饿了么招聘),有面向用户的,也有后台系统。
实践方案的话,vue + webpack + vue-router + vue-resource。
就我个人而言,vue 的开发体验还是比较愉悦的。首先,文档非常友好,所以上手会比较快。其次,配合 webpack 和 vue-loader,每个页面都是一个 .vue 文件,写起来很方便。另外,适合做组件化开发(每个组件也是一个 .vue 文件,可以全局或者在需要的地方引入),如果遇到比较复杂的、父子组件间需要频繁通信的场景,可以用 vuex 搞定。
在写业务的过程中,团队的同事们抽象了很多公共组件出来,开源在 github (饿了么前端 · GitHub)上,大家有兴趣的话可以去试一试。这里我把这些组件分类介绍一下:
 
  • 移动端:

vue-swipe:github.com/ElemeFE/vue-
幻灯片组件

vue-infinite-scroll:github.com/ElemeFE/vue-
无限滚动,可以实现向下的无限加载。是一个 directive

vue-loadmore:github.com/ElemeFE/vue-
下拉加载和上拉加载。是一个 component

vue-toast-mobile:github.com/ElemeFE/vue-
toast 组件

vue-indicator:github.com/ElemeFE/vue-
indicator 组件,提示用户正在加载,自带 modal

vue-msgbox:github.com/ElemeFE/vue-
弹出框组件
  • 桌面端

目前正在编写一套完整的桌面端组件库,利用它可以快速搭建后台页面。将于近期开源。

下面要隆重介绍的是前两天刚发布的一个工具。对于使用 webpack 打包的项目来说,不管是用 vue,angular 还是 react,开启一个新项目的时候都有许多脚手架的工作要做,比如写 webpack 的配置文件,安装依赖等等。这个过程有时会很繁琐,而且对新人不友好。为了解决这个问题,团队的小伙伴写了一个构件工具——cooking - 更易上手的前端构建工具。上面列出的工作,cooking 都可以一键完成,能够极大地解放生产力。而且,它不仅支持 vue,angular 和 react 也是支持的。


作者:寇云
链接:https://www.zhihu.com/question/38213423/answer/75432936
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

异乡好居(异乡好居 Uhouzz)手机访问哦。webApp

简单的谈谈 历程&心得
  1. 当时前端组在岗3个人,要做很多东西,也受制于后端(php) 没办法啊,要解放生产力就得用工具。当时首选 angular和react 我还特意买了国外的教程 egghead.io - Learn professional JavaScript tools with Tutorial Videos & Training @eggheadio 的教程。但是angular太重了,关键两者学习曲线太陡峭了,三个人风险太大。最终投身Vue了。
  2. 第一次用的时候,微信公众账号开发。但是把Vue当成一个类jquery库来用(不知道这么说合适不合适)。这个阶段Vue承担的责任就是UI呈现,通过接口处理简单的逻辑,一个页面一个Vue实例。复杂的时候有多个。这个阶段前端的路由还是PHP模板/路由控制。这个阶段用成这个德性,顾及大家会骂我们,这不大材小用了么?而且组件和过滤器都没用,那时候写个过渡动画都好开心啊。而且后来二期需求的时候 开发了机票那么复杂的业务,处理列表排序的时候,那酸爽啊。
  3. 小伙伴们尝试了甜头,突然接到上级指示要做webApp。基于第一次的经验,我们参考了青城主题 zerqu/qingcheng · GitHub 开始用Vue + webpack 主程技术预研两天,搭好架子然后开搞。3个人一周把现在的网站搞完了。而且两个女生Vue还是初学其中一个女生js基础不是很好。足以说明Vue起码简单,文档友好完善。后来队员基于当前技术栈做了个开源项目:cnodejs.org/topic/565c4 (代码质量有点渣,但是基本实现了)
  4. 接下来的事情:升级到1.0以上,在社区推广,帮助别人解决一些问题,开始读源码(一个commit一个commit那样读——笨方法),在团队里做深层的技术分享,以及针对单页面应用的SEO问题。 (由于家人骨折刚手术完 需要照顾家人 在推进上有些拖沓,致歉。)

使用心得
  1. 从DOM操作的时代没有压力的过渡到了MVVM时代
  2. 简单上手在团队很快就安利开了(Vue设计的不错,文档完善友好,官方教程看完就能开撸)
  3. 省心 所有的操作关注点都在data上面。开发的时候,写好data 剩下的事情就是 通过异步请求来交互data,UI层绑定事件改变data,在组件间传递data。

-------------------------------------
留好分割线。

没想到分割线是留给这些感慨的:不更新回答了,已经离开这家公司了。现在回答这个问题,我和离开那时候一样凄凉的感觉。这个项目没有什么参考价值了,前两天前同事发个活动点进去,随手发现10个以上的bug 好居基本废弃这个项目了。好的UI虽然能给前端加分,但后面乱七八糟了,不知道是怎么维护的。 (哈哈 说的好像是甩锅的既视感)

vue 已经遍地开花了,真心开心。我们写那时候还没有什么团队用,遇到问题要卡一天两天 。

现在依然写vue,但是写不出当时那种自豪感 和 激情。远程开发中,很开心。不断学习杂七杂八的东西。

vue2.0 升级中 欢迎交流噢……

稀土掘金 全网都是用 Vue.js + Webpack 实现的,算是一个纯前端应用,我们的前端开发也谢了一个小的使用总结:稀土掘金:Vue 组件化开发实践

心得:

  1. 明白 Vue.js 的 component system
  2. 理解 component 之间心得数据交互,inherit / pass variable / event 等等
  3. 我觉得 Vue.js 如果使用得当也能做到 UI = Vue(state),所以我用了很多 state 变量,以操作页面样式改动,效果很好
  4. 理解 v-directive 自定义,可以有很多很好用的功能
  5. v-transition 在 dagger 之后又很好用的效果
  6. vue router 加入的比较深,如果之前用了 director 之类的前端路由,改的时候成本比较大
  7. 了解 webpack 使用规则,理解有、无 scss 时如何写局部样式
  8. node-sass 真的很难装(和 Vue.js 没关系只是想吐槽)

有其它问题也可以来找我,如果你想要用 Vue.js 开发出很厉害的应用,也可以联系我加入我们团队:稀土 - 加入我们


 


苏宁易购触屏版的购物车结算页面已经用 Vue 重构了下,在众多框架中还是选择了 Vue,主要还是因为 API 比较友好,上线了之后在体验上也流畅了很多。
很多低级错误框架都帮着处理好了,关注点已经完全移到了业务层,写起代码来简直如尿崩。
想想开始重构的时候是版本是 0.12,现在已经 1.0+ 了,发展的好快,我们是背着上级偷偷重构的,其实上线的时候压力大的很呢。


 
作者:阿安
链接:https://www.zhihu.com/question/38213423/answer/128155176
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

我们(凡普信贷)的移动端页面正在使用 vue2.0 重构,在基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案。在这里俺也对整个过程简单做个介绍吧。

目录结构

   ├── index.html                      入口页面
    ├── build                           构建脚本目录
    │   ├── build-server.js                 运行本地构建服务器,可以访问构建后的页面
    │   ├── build.js                        生产环境构建脚本
    │   ├── dev-client.js                   开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
    │   ├── dev-server.js                   运行本地开发服务器
    │   ├── utils.js                        构建相关工具方法
    │   ├── webpack.base.conf.js            wabpack基础配置
    │   ├── webpack.dev.conf.js             wabpack开发环境配置
    │   └── webpack.prod.conf.js            wabpack生产环境配置
    ├── config                          项目配置
    │   ├── dev.env.js                      开发环境变量
    │   ├── index.js                        项目配置文件
    │   ├── prod.env.js                     生产环境变量
    │   └── test.env.js                     测试环境变量
    ├── mock                            mock数据目录
    │   └── hello.js
    ├── package.json                    npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
    ├── src                             项目源码目录    
    │   ├── main.js                         入口js文件
    │   ├── app.vue                         根组件
    │   ├── components                      公共组件目录
    │   │   └── title.vue
    │   ├── assets                          资源目录,这里的资源会被wabpack构建
    │   │   └── images
    │   │       └── logo.png
    │   ├── routes                          前端路由
    │   │   └── index.js
    │   ├── store                           应用级数据(state)
    │   │   └── index.js
    │   └── views                           页面目录
    │       ├── hello.vue
    │       └── notfound.vue
    ├── static                          纯静态资源,不会被wabpack构建。
    └── test                            测试文件目录(unit&e2e)
        └── unit                            单元测试
            ├── index.js                        入口脚本
            ├── karma.conf.js                   karma配置文件
            └── specs                           单测case目录
                └── Hello.spec.js

快速开始

git clone https://github.com/hanan198501/vue-spa-template.git
cd vue-spa-template
cnpm install
npm run dev

命令列表

#开启本地开发服务器,监控项目文件的变化,实时构建并自动刷新浏览器,浏览器访问 http://localhost:8081
npm run dev

#使用生产环境配置构建项目,构建好的文件会输出到 "dist" 目录,
npm run build

#运行构建服务器,可以查看构建的页面
npm run build-server

#运行单元测试
npm run unit

前后端分离

项目基于 spa 方式实现前后端分离,后端将所有 url 都返回到同一个 jsp 页面(由前端提供),此 jsp 页面也是前端的入口页面。然后路由由前端控制(基于vue-router),根据不同的 url 加载相应数据和组件进行渲染。

接口 mock

前后端分离后,开发前需要和后端同学定义好接口信息(请求地址,参数,返回信息等),前端通过 mock 的方式,即可开始编码,无需等待后端接口 ready。项目的本地开发服务器是基于 express 搭建的,通过 express 的中间件机制,我们可以很方便的添加接口 mock 功能:

在 build/dev-server.js 中新增接口 mock 处理:

// mock api requests
var mockDir = path.resolve(__dirname, '../mock');
fs.readdirSync(mockDir).forEach(function (file) {
  var mock = require(path.resolve(mockDir, file));
  app.use(mock.api, mock.response);
});

其中,mock 目录下可能有个文件内容如下,描述了一个接口的数据信息:

module.exports = {

  // 接口地址
  api: '/api/hello',

  // 返回数据
  response: function (req, res) {
    res.send(`
      

hello vue!

`); } }

组件化

整个应用通过 vue 组件的方式搭建起来,通过 vue-router 控制相应组件的展现,组件树结构如下:

   app.vue                         根组件(整个应用只有一个)
        ├──view1.vue                    页面级组件,放在 views 目录里面,有子组件时,可以建立子目录
        │   ├──component1.vue               功能组件,公用的放在 components 目录,否则放在 views 子目录
        │   ├──component2.vue
        │   └──component3.vue
        ├──view2.vue
        │   ├──component1.vue
        │   └──component4.vue
        └──view3.vue
            ├──component5.vue
            ……

单元测试

可以为每个组件编写单元测试,放在 test/unit/specs 目录下面, 单元测试用例的目录结构建议和测试的文件保持一致(相对于src),每个测试用例文件名以 .spec.js 结尾。 执行 npm run unit 时会遍历所有的 spec.js 文件,产出测试报告在 test/unit/coverage 目录。

前后端联调

前后端分离后,由于服务端和前端的开发环境处于2台不同的机器上,整个联调过程,入口页面需要引用前端机器的静态资源,又要调用后端机器的异步接口。根据入口页面的位置,我们可以使用不同的联调方案:

1. 入口页面在前端机器:

通过在本地 dev-server 中使用 github.com/chimurai/htt 中间件把接口请求代理到后端机器,vue-cli 生成的 dev-server 中已经自带了这个功能:

// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
});

最好通过启动 dev-server 时传入一个参数来控制是否打开代理功能,这样可以避免开发阶段覆盖掉我们的 mock 配置。

2. 入口页面在后端机器: 后端工程里面的入口 jsp 中引用的 js 文件地址需要指向前端环境中的地址,联调时才能显示最新的修改。主要有2种实现方式: 1) jsp 文件引用一个固定域名(如 debughost)的 js 文件, 后端机器上通过修改此域名的ip指向前端机器,达到引入前端环境 js 的目的。 2) jsp 文件通过获取一个 url 参数(如 debughost)的值,这个值为前端机器的 ip 地址,再动态的插入一个 script 标签引入这个 ip 的前端 js 文件。

举个例子,假设前端机器的 ip 为 172.16.36.90,需要加载前端的js文件地址为:172.16.36.90:8081/main., 那么后端同学的机器中需要在 host 文件加一条记录:

172.16.36.90 debughost

而入口 jsp 页面中则通过以下代码开加载前端js:

   var debughost = 'debughost';
    location.search.substr(1).split('&').forEach(function (item) {
        var arr = item.split('=');
        var key = arr[0];
        var value = arr[1];
        if (key === 'debughost') {
            debughost = value;
        }
    });
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://' + debughost + ':8081/main.js?' + (new Date()).getTime();
    document.head.appendChild(script);

这样,jsp 页面默认会加载 debughost:8081/main.js这个文件。 此外,如果不想用 debughost 这个域名的 js 文件,访问 jsp 时候还可以通过 url 带入 debughost 参数来指定前端 ip 。

部署方案 分离后前后端代码会存放在2个单独的 git 仓库中,构建过程也是分开的。后端构建时,需要依赖前端的构建结果。具体流程如下:

1. 拉取前端项目代码 2. 构建前端(构建结果放在dist目录) 3. 拉取后端代码 4. 将前端的构建结果(dist目录里的文件)复制到后端工程中 5. 构建后端

此过程可以借助 jenkins 配置,或者,让运维同学配合修改部署脚本。

最终的项目模板会是这样:annnhan/vue-spa-template

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

vue交流群:568815621

作者:小狼
链接:https://www.zhihu.com/question/38213423/answer/107330393
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

公司部分项目开始使用vue。之前做的一个较大的项目用的是react,对vue的认识没有react那么深入。 相比之下感觉vue确实是比较灵活,但是vue的问题在于,有很多的概念是不必要的,而且有一些需求实现起来比较复杂。

举个例子,用react写一个表单组件,获取表单数据的方法就那么几种,通过props传回调函数,或者父组件通过ref获取子组件实例上的数据,再来就是redux那一套了。而vue除了这些,还能通过v-model,通过sync props,通过directive等等。我个人是觉得选择多了不太好,起码读别人的代码的时候会变得更吃力。

react的组件抽象比vue更轻松。举个例子,写一个table组件,table的每一个单元格都是通过props传进来的。react可以很轻松的做到通过props往子组件传一个element实例,然后子组件在jsx里直接大括号一用,{this.props.row1.col1}就好了。而vue里想实现这个程度的抽象真是极其复杂。因为template里不能插入vue实例,只能通过mount的方式往里插,在想想这个props传进来的element要跟table这个组件做一些通信的话,真是繁琐的一笔。

再有就是vue模板里只能写es5,还不能用console.log。各种束手束脚的。虽然看起来vue这么多概念可以很灵活,但实际用起来并不是。反而react的jsx功能强大概念简单,相比之下还是更喜欢用react.


神马搜索明星项目使用了vue.js

明星垂搜:star.sm.cn/

前端负责人小康上次组内分享过《vue in action》 yunpan.taobao.com/s/BKB


长亭科技
内部所有系统和对客户产品基本都使用 Vue.js 作为前端解决方案,由于是 2B 的所以可能没有方便展示的页面:(
我们还赞助了 Vue.js 哟!


在公司里用了大半年了,遍布部门搞个系统,体验不用说,MVVM 里最好的。用 Node.js 来做前后端分离,开发效率实在太快了。其实 vue 有个好基友 Vuex 类Flux数据流控制框架,和 Vue 配合起来才是移动端 WebApp 大杀器。开发体验非常接近 React Native + Redux,思维上可以做到非常好的切换。今年前端将会大大火~


 

美团上门业务的运营后台用的vue。 轻量,操作data自动渲染,数据传递方便,配合director.js做后台单页应用挺好的。

——————————————————

刚才又去瞄了一眼,发展好快,我们当时用的是 0.11.5 ,现在都1.0了,而且也有路由了。
自己回答下。。
话说目前天猫团队在用vue啊…也就是vue-native,也就是weex。
话说马上要跟vue2.0的api同步了。

当然还有我陌咯。

从Vue还没发布1.0版本开始就在使用。

使用Vue之前真是尝试了N多种框架之后,最后才选中了Vue

一个是业务多针对移动端

而且使用Vue之前完全没有任何预编译经验

一个是组内基本上都是用的JQuery/Zepto

首先在一些小页面上试水,大家感觉都不错,但是就是没发挥到Vue的长处。

后来就有和

大神一起做的一个相对大的项目——圈子(其实也不大)

先自己写了一套简易编译打包工具

遇到了一堆坑,还有各种诡异的问题(后面官方都修复了)

在圈子2的时候重构了一般,后面改用gulp+webpack,也用上了Vuex、Router啥的

现在我们已经大部分项目都开始使用了Vue

最近的一个项目已经在开始使用Vue2.0了。

还用了饿了么开源的Element,还是挺好用的,就是默认主题被吐槽不好看。哈哈哈


 我们公司目前就我一个前端,因为刚好有一个移动端的网站要做(m.jianguanoa.com),便用了vue,因为喜欢他一切都是组建的思想,觉得拓展能力该不错,还没有尝试过大型的web开发,总体来说还不错
我是从jq时代过来的前端,在刚接触reacet和vue这类MVVM框架的时候,一个字,一脸蒙逼,在看API的时候总是以以前的老思想再衡量,看的那是相当费劲,不过最后还是艰难的看完了,如果能一开始学的时候,把之前的开发思路忘掉,再来从0开始学的话,应该会特别快,没有思路转换这一步,有种欲练此功 必先自宫
的感觉


 

 
	  	
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权