Cordova + Vue.js 開發手機App

Cordova或是PhoneGap可以用HTML5來開發手機APP

當然現在也可以用ReactNative來開發。但說起來還是得再額外學習新的語言

對於已經是Web開發者想直接寫手機APP其實可以採用Cordova + Vue.js + OnsenUI

這樣的組合來做，其實做出來還是有80%像原生APP的。

今天介紹一下怎麼弄好環境，首先先用以下指令把 Cordova 與 VueCLI 裝好

npm install -g cordova
npm install -g vue-cli

接下來建立一個Cordova專案

cordova create project-name

再來建立Vue專案

vue init webpack project-name

? Target directory exists. Continue? Yes
? Project name project-name
? Project description A Vue.js project
? Author Lin Masahiro <k80092@gmail.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

接著進專案資料夾做一點修正。先把 index.html 加上 cordova.js

cd project-name
vi index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self'">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />
    <title>project-name</title>
</head>
<body style="margin: auto;">
    <div id="app"></div>
</body>
</html>

然後修正 build 時的目標資料夾，大概在config/index.js的第40行附近。把預設的dist換成www

vi config/index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../www/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
...

改好後加入需要的Cordova插件

cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-device

然後加入我們要採用的OnsenUI

npm install onsenui vue-onsenui

最後將OusenUI引入main.js中，加上下面四行

vi src/main.js

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';
import VueOnsen from 'vue-onsenui';
Vue.use(VueOnsen);

接下來按照OnsenUI官網的範例寫一個helloworld app

修改好App.vue之後插上手機用以下指令把他裝進手機裡面試試看

npm run build
cordova platform add ios android
cordova build

成功 build 完之後，進platform/ios中開啟xcode專案，設定好開發者資訊後就能夠安裝進手機了
如果是安卓系統的話，用以下指令就行了

cordova run android --device

祝大家開發順利:)

追加事項：

如果有需要用到自訂字體的話。要在build/webpack.base.conf.js中的module裡加上新的rules

test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: ‘url-loader’,
options: {
    limit: 10000,
    name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’),
    publicPath: process.env.NODE_ENV === ‘production’ ? ‘../../’ : ‘/’
}