首先说一下Vue框架吧,个人用了一段时间,一开始有点迷茫,后面逐渐认识清了,因为自己的课程里有基于node.js的Cordova移动开发课,发现Vue十分适合开发这种手机APP单页面的应用,故边学边实践,在这个过程中踩了很多坑,这里分享一下Vue和Cordova结合开发的步骤,废话不多说,开始"干"!
1、Vue框架搭建
-
在开发Vue之前肯定不能缺少的是Node.js了吧,Vue是依赖于Node.js运行的,进去Node.js官网
这个是英文版的官网,个人推荐多去英文网看,毕竟编程领域上报错等都是英文的,需要学会看英文,进去页面显示的是64位版的,如果是32位的,到DOWNLOADS那选择下载。
官网:https://nodejs.org/en/ -
下载完之后,进入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; -
新建一个项目,建议不要在C盘,如果你空间大的话可以忽略 vue init webpack project-name(你的项目名字)
下面会出现js语法检查选项都填No,接下里进入目录 cd project-name(你的项目名字),进行依赖安装,这个过程会比较久,依赖模块较多.
这个就已经安装完成了(√ All packages installed),接下来目录里就有文件了,可以开发你的项目了
2、Vue配置配置文件
-
在完成你的项目之后,需要结合Cordova进行模拟器调试,先引入cordova文件
拱写Cordova代码,封装起来,Cordova的插件方法几乎是异步的,封装的时候不要用return会拿不到数据,用个回调拿回数据就行了。 -
建议在main.js中添加监听事件,不然模拟器测试的时候,哪里错了都不知道。
-
修改config目录下的index.js、build目录下的utils.js文件
-
dos命令运行 npm run build 打包成文件,在项目文件下的dict中
-
接下来就可以放到Cordova的WWW目录下,替换调就行了,Vue要用的插件一定要提前安装好,不然肯定不能用。
接下来直接运行就行了。 -
运行效果图如下:
-
也可以直接将项目建立在WWW目录下,吧路径改为上一层就行了,每次Vue打包的时候index.html自动替换Cordova的index.html 就不用那么麻烦运行一下移动一下,但是我本人使用Android Studio 开发的,一开始载入文件、运行时候要运行半天就没这样做,有兴趣的小伙伴可以试试看,可能是我电脑烂(没钱买????)!!