標籤：

國內有哪些公司在用Vue.js，有什麼心得?

01-20

不管是PC端，還是WAP端，還是Native端。如果能說說實踐方案就更好~~

更新：

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：https://github.com/ElemeFE/vue-swipe

幻燈片組件

vue-infinite-scroll：https://github.com/ElemeFE/vue-infinite-scroll

無限滾動，可以實現向下的無限載入。是一個 directive

vue-loadmore：https://github.com/ElemeFE/vue-loadmore

下拉載入和上拉載入。是一個 component

vue-toast-mobile：https://github.com/ElemeFE/vue-toast-mobile

toast 組件

vue-indicator：https://github.com/ElemeFE/vue-indicator

indicator 組件，提示用戶正在載入，自帶 modal

vue-msgbox：https://github.com/ElemeFE/vue-msgbox

彈出框組件

  • 桌面端

目前正在編寫一套完整的桌面端組件庫，利用它可以快速搭建後台頁面。將於近期開源。

下面要隆重介紹的是前兩天剛發布的一個工具。對於使用 webpack 打包的項目來說，不管是用 vue，angular 還是 react，開啟一個新項目的時候都有許多腳手架的工作要做，比如寫 webpack 的配置文件，安裝依賴等等。這個過程有時會很繁瑣，而且對新人不友好。為了解決這個問題，團隊的小夥伴寫了一個構件工具——cooking - 更易上手的前端構建工具。上面列出的工作，cooking 都可以一鍵完成，能夠極大地解放生產力。而且，它不僅支持 vue，angular 和 react 也是支持的。

掘金 全網都是用 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 開發出很厲害的應用，也可以聯繫我加入我們團隊：稀土 － 加入我們

異鄉好居（異鄉好居 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起碼簡單，文檔友好完善。後來隊員基於當前技術棧做了個開源項目：https://cnodejs.org/topic/565c4473d0bc14ae279399fe （代碼質量有點渣，但是基本實現了）
  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 升級中 歡迎交流噢……

我們（凡普信貸）的移動端頁面正在使用 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 測試文件目錄（unite2e）
└── 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 中使用 https://github.com/chimurai/http-proxy-middleware 中間件把介面請求代理到後端機器，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文件地址為：http://172.16.36.90:8081/main.js， 那麼後端同學的機器中需要在 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 頁面默認會載入 http://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

蘇寧易購觸屏版的購物車結算頁面已經用 Vue 重構了下，在眾多框架中還是選擇了 Vue，主要還是因為 API 比較友好，上線了之後在體驗上也流暢了很多。

很多低級錯誤框架都幫著處理好了，關注點已經完全移到了業務層，寫起代碼來簡直如尿崩。

想想開始重構的時候是版本是 0.12，現在已經 1.0+ 了，發展的好快，我們是背著上級偷偷重構的，其實上線的時候壓力大的很呢。

———————————更新於2017年10月30日——————————————

寫了篇vue項目如何debug的文章：VueJS項目調試(debug) - Yakima Teng | 滕運鋒

還有篇講vue+vuex項目本地數據持久化的：Vuex Data Persistence數據持久化 - Yakima Teng | 滕運鋒

———————————舊文（發佈於2017年6月28日）——————————————

我們項目部也在用，因為就我一個前端，所以框架我自己定的。

公司不大，說出來你們也沒聽過-_-。

從最初用客戶端vue.js，到後面用vue-cli使用的Vue1 + webpack模版，再到後面使用Vue2+webpack，用這個框架做SPA應用也有一年半的時間了。做一些總結吧，想到哪裡寫哪裡（針對Vue2 + webpack）。

一、頁面按需載入

這主要是為了加快首屏載入速度。這樣做的好處是第一屏所需載入的文件大小變小了，代價是如果用戶會走完整個SPA的話，實際的總代碼下載量是變多了的。按需載入頁面主要就是修改/src/router/index.js文件，示例代碼如下：

import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)

const Home = resolve =&> require(["@/views/Home.vue"], resolve)
const MyRoot = resolve =&> require(["@/views/my/Root.vue"], resolve)
const MyIndex = resolve =&> require(["@/views/my/Index.vue"], resolve)
const MyLogs = resolve =&> require(["@/views/my/Logs.vue"], resolve)
const MyBrokerages = resolve =&> require(["@/views/my/Brokerages.vue"], resolve)

export default new Router({
routes: [
{
path: "/home",
name: "Home",
component: Home,
meta: { needLogin: false }
},
{
path: "/my",
name: "MyRoot",
component: MyRoot,
meta: { needLogin: true },
children: [
{
path: "",
redirect: "index"
},
{
path: "index",
name: "MyIndex",
component: MyIndex,
meta: { needLogin: true }
},
{
path: "logs",
name: "MyLogs",
component: MyLogs,
meta: { needLogin: true }
},
{
path: "brokerages",
name: "MyBrokerages",
component: MyBrokerages,
meta: { needLogin: true }
}
]
},
// must be placed at the bottom
{ path: "*", redirect: "/home" }
]
})

因為覺得上面那樣引入組件的代碼重複的地方很多，本著DRY（Don"t Repeat Yourself，中文意思是「懶」 -_-）的原則，試過用下面這種方式引入組件：

function generateComponentFunction (path) {
return resolve =&> require([`@/views${path}`], resolve)
}

const Home = generateComponentFunction("/Home.vue")
const MyRoot = generateComponentFunction("/my/Root.vue")
const MyIndex = generateComponentFunction("/my/Index.vue")
const MyLogs = generateComponentFunction("/my/Logs.vue")
const MyBrokerages = generateComponentFunction("/my/Brokerages.vue")

是不是感覺這樣寫的話，引入組件的時候能少敲很多代碼呢？然而實踐發現這樣子npm run build後各個頁面被打包成了一個js，貌似是把所有這些都當成一個頁面了。

二、通過script標籤引入第三方js庫

這種方式或許並非比較好的實踐，個人保留意見，只是告知一下其實還有這種操作方法。這樣能減少本地打包後的vendor.js文件的大小，同時也利用了CDN，但是也增加了very first time的首屏載入時間，後面這些第三方js文件被緩存了，首屏載入時間是會快一點的。假設說，現在你的package.json文件中定義的依賴包有：

...
"dependencies": {
"fastclick": "^1.0.6",
"mockjs": "^1.0.1-beta3",
"vue": "^2.2.1",
"vue-router": "^2.2.0",
"vuex": "^2.2.1"
},
...

然後，在這些依賴包（第三方js文件），其實都是可以通過script標籤引入的。打開/index.html文件，示例如下（mockjs未處理，一樣一樣的）：

&
&& && --&>
&