一般Ionic项目创建可以使用ionic-cli命令，即：
然而查看该命令说明和源码是没有Vue的项目模版的（见 STARTER_TEMPLATES中的projectType ）。
所以使用Vue来创建项目：
这是Vue很基础的东西，安装依赖并运行看下：
此时可以看到项目能正常运行的，一般来说，应用都需要和路由打交道，所以添加下路由：
对Ionic集成，安装ionic相关依赖（其中@ionic/core是组件部分，@ionic/vue是封装成Vue方式调用的接口部分）：
安装完成后，在mainjs中添加配置：
再次运行，发现命令行会有告警提示：
同时页面也会报错，显示空白页面，这是一个BUG（前期的版本是没有这个BUG的），我们需要安装ionicons，而且它对版本有要求，要在V4510以下，所以执行：
此时再次运行，没有告警也没有错误提示，但是还是空白页面，调试页面发现有这样一个样式：
我也不知道这是干嘛用的，改了再说：
此时页面看到有东西了， 那我们尝试下ionic的组件能不能用 ，在Homevue页面添加一个按钮：
可以看到组件渲染出来了，为了和ionic的dom结构保持一致，把Appvue稍微改动一下，变为如下：
我们再试试看事件能不能响应，页面稍微改一下：
运行，发现能正常使用的。
为了支持Ionic的路由和使用其动画和样式，@ionic/vue里在vue-router的基础上做了封装，所以处理一下，打开routerjs，修改一下（把Router替换为IonicVueRouter即可）：
此时看到路由也是正常使用的。
众所周知，Ionic默认是使用android/md（Material Design）模式的，如果想使用ios模式，在<html>上添加mode="ios"，即：
indexhtml添加meta项：
至此，基本项目配置就完成了，后续再谈论更多细节。
Vue是前端快速开发框架，Javascript+手机UI，就可以迅速开发网页应用（WebApp）一般情况下，作为演示网站、微信后台等等，也够用了
Weex作为一次开发，三端可用（Web、安卓、IOS），应该不错，不过现在还没正式版
偶尔碰到HBuilder这个国人工具，能直接将WebApp（HTML+CSS+javascript），打包成原生安卓App，那就试试吧
Web应用打包成手机App，重点考查：
流畅程度
功能完善度
开发便捷度
。。。
步骤如下：
开发Vue WebApp
HBuilder引入第一步的WebApp
真机调试
打包成原生App
App安装到手机1、新建html文档，在head标签中引入vue的js文件。
2、在body标签中添加一个id为“app”的div标签。
3、在这个div标签中再添加一个div标签，在vue中添加一个变量数据。
4、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）