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">至此，基本项目配置就完成了，后续再谈论更多细节。