专栏首页ionic3+Vue+Ionic4,知虎偏行(二)创建及配置项目

Vue+Ionic4,知虎偏行(二)创建及配置项目

创建Vue项目并运行

使用Vue来创建项目:

npm install -g @vue/cli
vue create envt-iot-overall

这是Vue很基础的东西,安装依赖并运行看下:

cd envt-iot-overall
npm i
npm run serve

此时可以看到项目能正常运行的,一般来说,应用都需要和路由打交道,所以添加下路由:

vue add router

安装Ionic依赖

安装ionic相关依赖(其中@ionic/core是组件部分,@ionic/vue是封装成Vue方式调用的接口部分):

npm i @ionic/core @ionic/vue

安装完成后,在main.js中添加配置:

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

再次运行,发现命令行会有告警提示:

warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js "export 'ICON_PATHS' was not found in 'ionicons/icons'

同时页面也会报错,显示空白页面,这是一个BUG(前期的版本是没有这个BUG的),我们需要安装ionicons,而且它对版本有要求,要在V4.5.10以下,所以执行:

npm i ionicons@4.5.9-1 -D

此时再次运行,没有告警也没有错误提示,但是还是空白页面,调试页面发现有这样一个样式:

html:not(.hydrated) body { display: none; }

我也不知道这是干嘛用的,改了再说:

html:not(.hydrated) body {
  display: block !important;
}

此时页面看到有东西了,那我们尝试下ionic的组件能不能用,在Home.vue页面添加一个按钮:

    <ion-button color="primary">测试</ion-button>

可以看到组件渲染出来了,我们再试试看事件能不能响应,改造一下:

<ion-button color="primary" @click="showLoading">测试</ion-button>
……
  methods: {
    async showLoading() {
      const loading = await this.$ionic.loadingController.create({
        spinner: 'hide',
        duration: 2000,
        message: 'Please wait...',
        translucent: true,
        cssClass: 'custom-class custom-loading'
      });
      loading.present();
    }
  }

运行,发现能正常使用的。

改造路由

@ionic/vue将Vue Router与Ionic Router Outlet捆绑在一起,使Ionic组件可以直接访问路由信息。作为回报,Ionic提供了令人赏心悦目的过渡效果。

为了支持Ionic的路由和使用其动画和样式,@ionic/vue里在vue-router的基础上做了封装,所以处理一下,打开router.js,修改一下(把Router替换为IonicVueRouter即可):

import Vue from 'vue'
import Home from './views/Home.vue'
// import Router from 'vue-router'
import { IonicVueRouter } from '@ionic/vue'

Vue.use(IonicVueRouter)

export default new IonicVueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

此时看到路由也是正常使用的。

修改模式

众所周知,Ionic默认是使用android/md(Material Design)模式的,如果想使用ios模式,在<html>上添加mode="ios",即:

<html lang="en" mode="ios">

手机风格约束

index.html添加meta项:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

至此,基本项目配置就完成了,后续再谈论更多细节。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue+Ionic4,知虎偏行(一)引言

    IT晴天
  • 【开发指南】(四)Ionic3快速上手并了解这些

    Ionic这几个网站是需要经常看的,应该了解过才执行后面步骤,其中强烈要求至少先撸一遍官网的组件和API文档。

    IT晴天
  • 【开发指南】(一)Ionic3开发环境配置常规ionic的环境搭建如下:

    工欲善其事,必先利其器,搭好环境是开发的前提,有时环境没弄好,不时报错往往很扎心。

    IT晴天
  • RabbitMQ实战4.发布与订阅交换机临时队列发布与订阅功能实现执行结果流程总结参考文档

    RabbitMQ并非直接将消息投递到队列中,而是要经过交换机,交换机再与队列绑定。那么,什么是交换机? 如何通过交换机与队列的绑定实现发布与订阅功能?

    章鱼喵
  • 为什么 Javascript 经常被黑?

    桃翁
  • LeetCode 16. 3Sum Closest题目分析代码

    给一个包含 n 个整数的数组 S, 找到和与给定整数 target 最接近的三元组,返回这三个数的和。

    desperate633
  • 环形缓冲区-Hadoop Shuffle过程中的利器

    这篇文章来自一个读者在面试过程中的一个问题,Hadoop在shuffle过程中使用了一个数据结构-环形缓冲区。

    王知无
  • 面试中的 ThreadLocal 原理和使用场景

    相信大家不管是在网上做题还是在面试中都经常被问过 ThreadLocal 的原理和用法,虽然一直知道这个东西的存在但是一直没有好好的研究一下原理,没有自己的知识...

    纯洁的微笑
  • (原创)七夜在线音乐台开发 第一弹

    七夜安全博客
  • OpenCV进行图像相似度对比的几种办法

    PSNR(Peak Signal to Noise Ratio),一种全参考的图像质量评价指标。

    用户1539362

扫码关注云+社区

领取腾讯云代金券