Vue框架搭建及Cordova结合Vue框架开发App步骤

首先说一下Vue框架吧，个人用了一段时间，一开始有点迷茫，后面逐渐认识清了，因为自己的课程里有基于node.js的Cordova移动开发课，发现Vue十分适合开发这种手机APP单页面的应用，故边学边实践，在这个过程中踩了很多坑，这里分享一下Vue和Cordova结合开发的步骤，废话不多说，开始"干"！

1、Vue框架搭建

1. 在开发Vue之前肯定不能缺少的是Node.js了吧，Vue是依赖于Node.js运行的，进去Node.js官网
   这个是英文版的官网，个人推荐多去英文网看，毕竟编程领域上报错等都是英文的，需要学会看英文，进去页面显示的是64位版的，如果是32位的，到DOWNLOADS那选择下载。
   官网：https://nodejs.org/en/

2. 下载完之后，进入doc命令行，安装Vue脚手架 npm install --global vue-cli
   
   安装之前肯定要先检查一下Node.js是否安装成功
   接下来输入指令 npm install --global vue-cli 就可以安装了，如果嫌慢可以使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具： npm install -g cnpm --registry=https://registry.npm.taobao.org；

3. 新建一个项目，建议不要在C盘，如果你空间大的话可以忽略 vue init webpack project-name(你的项目名字)

   下面会出现js语法检查选项都填No，接下里进入目录 cd project-name(你的项目名字)，进行依赖安装，这个过程会比较久，依赖模块较多.
   
   这个就已经安装完成了(√ All packages installed)，接下来目录里就有文件了，可以开发你的项目了
   

2、Vue配置配置文件

1. 在完成你的项目之后，需要结合Cordova进行模拟器调试，先引入cordova文件
   
   拱写Cordova代码，封装起来，Cordova的插件方法几乎是异步的，封装的时候不要用return会拿不到数据，用个回调拿回数据就行了。
   

2. 建议在main.js中添加监听事件，不然模拟器测试的时候，哪里错了都不知道。
   

3. 修改config目录下的index.js、build目录下的utils.js文件
   
   

4. dos命令运行 npm run build 打包成文件，在项目文件下的dict中
   

5. 接下来就可以放到Cordova的WWW目录下，替换调就行了，Vue要用的插件一定要提前安装好，不然肯定不能用。
   
   接下来直接运行就行了。

6. 运行效果图如下：
   

7. 也可以直接将项目建立在WWW目录下，吧路径改为上一层就行了，每次Vue打包的时候index.html自动替换Cordova的index.html 就不用那么麻烦运行一下移动一下，但是我本人使用Android Studio 开发的，一开始载入文件、运行时候要运行半天就没这样做，有兴趣的小伙伴可以试试看，可能是我电脑烂(没钱买)！！