前言：環境搭建參考 本人的另一篇文章 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 [email protected] -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
至此，項目整體架構以及發佈測試流程，描敘完畢，如果對你有幫助，請給我個關注，謝謝！！！！！