前言:环境搭建参考 本人的另一篇文章 https://blog.csdn.net/weixin_37852133/article/details/103063682
一、项目框架搭建:
1、如果没有全局安装vue插件的,cmd请执行
npm install -g @vue/cli
2、初始化一个vue项目 ,项目文件夹自定义(这里定义项目名称demo)
vue create demo
这时候会让你选择一个模板,这里根据自己的偏好就行
3、初始化项目完成后,启动项目查看一下,执行
cd demo
npm run serve
默认端口是8080,直接在浏览器访问查看效果。
这里退出服务按 ctrl+c;
4、接下来我们为项目添加 Vue Router
和 Ionic
框架
vue add router
npm install @ionic/vue
安装vue router 会让你选择
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
这里建议选择 no;
添加ionic框架
npm i @ionic/vue
5、建议使用vscode开发工具进行开发
6、打开项目,首先打开 src/main.js
, 添加下面三行代码
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
Vue.use(Ionic);
7、接下来修改src/index.js
:
import Vue from 'vue'
import Home from '../views/Home.vue'
import { IonicVueRouter } from '@ionic/vue';
Vue.use(IonicVueRouter);
export default new IonicVueRouter({
mode: 'history',
base: process.env.BASE_URL,
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的组件了,如下修改Home.vue的代码。
<template>
<div class="home">
<div class="ion-page">
<ion-header>
<ion-toolbar>
<ion-title>Hello World</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Welcome To @ionic/vue</h1>
<img alt="Vue logo" src="../assets/logo.png">
</ion-content>
</div>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
服务启动中遇到的问题:
warning in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'
执行
npm i ionicons@4.5.9-1 -D
项目初始化为ionic项目,执行
ionic init
控制台异常信息
http://localhost:8080/sockjs-node/info?t=1574128701462 net::ERR_CONNECTION_REFUSED
这里直接修改依赖文件
node_modules\sockjs-client\dist\sockjs.js
1606 行代码 注释掉 ok;
执行项目启动命令
npm run serve
查看项目是否可以正常运行以及控制台是否存在异常信息;如果一切正常说明ionic+vue项目架构已经完成了,嘻嘻!!!!!
二、项目测试发布
1、首先借助 ionic
开发的 capacitor
,他是一个类似于 cordova
的可以提供本机接口的工具,同时它也兼容很多现有的 cordova
插件
该项目中安装capacitor,执行
npm install --save @capacitor/core @capacitor/cli
2、初始化 capacitor
,App name
和 App Package ID
根据你自己的项目去进行填写
npx cap init
3、我们需要改一下 capacitor.config.json
里的 webDir
,改成 dist
,因为vue项目的构建目录为dist,这样可以省的我们去复制代码到 www
目录(并且我们也没有创建 www
目录)。
"webDir": "dist"
4、构建我们的项目
npm run build
5、我们使用 capacitor
添加对Android平台的支持,并将构建的代码拷贝到Android项目库里
npx cap add android
npx cap copy android
这个时候你会看到你项目多出一个android项目文件夹,其实这里将你的的项目编译为一个android项目,你直接用android studio就可以打开
6、我们就可以使用Android Studio打开项目,使用模拟器运行项目,或是构建app。
也可以直接使用 capacitor
启动Android Studio,运行
npx cap open android
这里可能打开你电脑上的android studio 软件会慢,请耐心等待!!!!!!!!!!!!!!!!
7、打开android studio 既可以配置模拟器预览也可以直接真机测试
8、项目打包app跟android 项目一样发布流程。这里就不追叙了,请参考
https://www.cnblogs.com/lsdb/p/9337342.html
至此,项目整体架构以及发布测试流程,描叙完毕,如果对你有帮助,请给我个关注,谢谢!!!!!