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

时间:2024-05-30 18:26:52

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

1、Vue框架搭建

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

  2. 下载完之后,进入doc命令行,安装Vue脚手架 npm install --global vue-cli
    Vue框架搭建及Cordova结合Vue框架开发App步骤
    安装之前肯定要先检查一下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(你的项目名字)

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

2、Vue配置配置文件

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

  2. 建议在main.js中添加监听事件,不然模拟器测试的时候,哪里错了都不知道。
    Vue框架搭建及Cordova结合Vue框架开发App步骤

  3. 修改config目录下的index.js、build目录下的utils.js文件
    Vue框架搭建及Cordova结合Vue框架开发App步骤
    Vue框架搭建及Cordova结合Vue框架开发App步骤

  4. dos命令运行 npm run build 打包成文件,在项目文件下的dict中
    Vue框架搭建及Cordova结合Vue框架开发App步骤

  5. 接下来就可以放到Cordova的WWW目录下,替换调就行了,Vue要用的插件一定要提前安装好,不然肯定不能用。
    Vue框架搭建及Cordova结合Vue框架开发App步骤
    接下来直接运行就行了。

  6. 运行效果图如下:
    Vue框架搭建及Cordova结合Vue框架开发App步骤

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