Hybrid開發(fā)是指基于web技術(shù)，以H5頁面為基礎(chǔ)，在原生應(yīng)用的殼子中展現(xiàn)。它既具備了原生應(yīng)用的交互體驗，又有開發(fā)周期比原生應(yīng)用短、跨平臺的諸多優(yōu)點，已成為移動應(yīng)用開發(fā)的主流方式。

Vue 是一個漸進式JavaScript框架，有強大的數(shù)據(jù)綁定和組件化能力。Vue 官方提供的CLI（命令行界面） 工具中，也包含了用于 Hybrid 開發(fā)的cordova插件集成，使我們可以很方便地使用 Vue 開發(fā) Hybrid 應(yīng)用。

使用Vue 進行 hybird開發(fā)，我們可以使用 Vue 開發(fā) Web 端的應(yīng)用，在cordova 插件的幫助下進行打包、運行，適配各種手機平臺，并在原生應(yīng)用中轉(zhuǎn)換為視圖。

//舉個例子：
//初始化一個基于vue的hybrid項目
npm i -g @vue/cli
vue create projectname
cd projectname
vue add cordova
//添加 cordova 插件
npx cordova platform add android
npx cordova plugin add cordova-plugin-whitelist  
npx cordova run android

其中，npx是npm 5.2+ 版本內(nèi)置的包執(zhí)行器，可以在本地環(huán)境中臨時執(zhí)行npm安裝的命令。

我們在基于 Vue 的項目中引入 cordova-plugin 時，需要在Vue.config.js文件的configureWebpack項中進行如下修改。

// Vue.config.js
module.exports = {
// some other code  
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new webpack.BannerPlugin('xxxxxxxxxxxxxxxxxxxxx')
],
module: {
rules: [
{
test: /\.hbs$/,
use: [
'handlebars-loader'
]
}
]
}
}
};

這里的 webpack 指構(gòu)建工具webpack，我們在Vue.config.js 中配置了 cordova-plugin 以及各種webpack的entry、output、rules、resolve、plugins等屬性。這樣就使得我們可以對cordova應(yīng)用進行詳細的配置，包括插件使用規(guī)則、版本號、配置啟動頁、權(quán)限、應(yīng)用圖標等。

總的來說，基于vue開發(fā)hybrid最大的好處是把Web應(yīng)用直接轉(zhuǎn)換到了移動應(yīng)用。Vue提供了很強大的雙向綁定功能，從而通過Vue進行數(shù)據(jù)操作、顯示頁面，而cordova插件也提供了各種Native的功能，對于開發(fā)移動端應(yīng)用非常的方便和快捷，是一種非常有優(yōu)勢的開發(fā)方式。