cordova與vue2集成

1.如何安裝cordova開發環境

1)先要安裝Node.js. 鏈接:https://nodejs.org/en/
2)安裝cordova. 鏈接:http://cordova.apache.org/
終端步驟:

$ npm install -g cordova

2.如何構建cordova的工程

1)創建cordova的project

$ cordova create testapp

2)為cordova項目添加platform project

$ cd testapp 
$ cordova platform add ios //加入ios開發平臺
$ cordova platform add android //加入android開發平臺

3)在相關平臺運行app

$ cordova run ios //運行ios
$ cordova run android //運行android

4)用指定模擬器運行cordova工程

$ cordova emulate ios --target iPhone-6s

3.通過vue-cli構建vue項目

1)安裝vue-cli

$ npm install -g vue-cli

2)創建工程

$ vue init webpack-simple vue-project-name

*兩個創建的工程放在平級

屏幕快照 2017-08-11 上午10.09.48.png

3)安裝vue依賴包

$ cd vue-project-name
$ npm install

4)安裝Vue-router,Vuex和Mint-ui

$ npm install vue-router vuex --save
$ npm install mint-ui --save

5)修改webpack.config.js

...
output: {
    path: path.resolve(__dirname, '../testapp/www/js'),
    publicPath: 'js/',
    filename: 'build.js'
  },
...

path指的是我們cordova里的www/js目錄,因為打包的時候會把所有js文件放到cordova工程的js目錄下。
publicPath是指的一些公共資源(如圖片,css文件)的加載路徑。

6)最后修改cordova工程的www下的index.html文件

  <body>
        <!-- <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div> -->
        <div id="app"></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/build.js"></script>
   </body>

加入一個<div id="app"></div>和<script type="text/javascript" src="js/build.js"></script>
這里面就是vue生成的js
直接運行cordova run ios就可以看到效果了,我們已經將vue生成的文件運行了。

屏幕快照 2017-08-11 上午11.33.53.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容