(下)Cordova + vue 搭建项目

一. Vue 项目的创建

创建 vue 项目，Vue2.x 和 Vue3.x 的版本目录区别

安装 vue 3.x 版本

//vue 3.x 版本的 Vue 脚手架 - 安装 vue-cli，如果已安装略过此步：
npm install -g @vue/cli 
//创建项目
vue create 项目名称

或者基于 ui 界面创建 Vue 项目，命令如下

vue ui
安装 vue 2.x 版本
$ vue init webpack vue-stu

这里使用 vue 2.x 版本为例，回到项目目录（与 platforms 同级目录）下，创建项目，命令输入完，选择完毕后，自动下载 vue 模版，这里演示项目如下图所示：

…
…

至此 vue 项目创建完成。

二. Vue 项目修改配置

这里为了后面开发调试方便，将 vue 项目编译代码的目录指向 cordova 的 www 目录，这样就可以实现项目整合了，vue 项目负责页面代码编写，cordova 项目负责打包和原生接口调用。

2.1 修改 index.js

这里将 vue 项目下的 config 文件夹下的 index.js 文件修改成如下图所示，对应的是 cordova 项目下的 www 文件路径。

这么操作以后，后面你在运行 npm run build 的时候，会发现编译出来的包内容都放入了 www 文件目录下。

2.2 修改 index.html

在 vue 项目的 index.html 页面引入 cordova.js，我们注意到 cordova 添加 iOS 之后， 在 iOS 项目的 www 目录下存在 cordova_plugins.js、cordova.js、plugins 等文件，不要手动删除（我们就不用再拷贝到 vue 项目里）。

在 index.html 页面引入 cordova.js。

<script src="cordova.js"></script>
// <script src="./static/cordova.js"></script> 自己拷贝到 static 目录下

2.3 修改 main.js

document.addEventListener('deviceready', function() {
   
   
    new Vue({
   
   
        router,
        el: '#app',
        render: h => h(App)
    });
}