ionic5+vue3搭建第一个app项目

最新推荐文章于 2023-10-26 11:09:24 发布

明知山_

最新推荐文章于 2023-10-26 11:09:24 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ionic

本文链接：https://blog.csdn.net/AK852369/article/details/115046956

Ionic 专栏收录该内容

3 篇文章

订阅专栏

本文档详细介绍了如何全局安装Ionic脚手架并使用它创建一个基于Vue的应用项目。此外，还提供了将TypeScript项目转换为JavaScript项目的步骤，并推荐了一些重要的资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局安装ionic脚手架

npm install -g @ionic/cli

创建一个app项目 myApp为项目名

ionic start myApp tabs --type vue

项目启动

npm run serve

ionic5是和Vue3搭配的，这里需要提前学习Vue3的语法
项目文件名是为Ts，目前只会Js.我们把项目改为JS语法
用Js来写文档更改方法

删除掉Ts依赖

npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript

router/index.ts和main.ts把ts文件名改为js

从. eslintrc.js中删除@vue/typescript/recommended和@typescript-eslint/no-explicit-any: ‘off’

从router/index.js中删除Array < routerecordraw >

删除shims-vue. d.ts 文件

任何具有lang = “ ts”的 Vue 组件的脚本标记中删除 lang = “ ts”

在这里插入图片描述
接下来需要用到的文档
ionic+vue搭建文档
 ionic组件
 ionic图标

之后的ionic练习代码会放到github

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

明知山_

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

从零开始学习网络安全渗透测试之基础入门篇——（三）APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter

love6a6的博客

07-27

1052

vue-cli3 + cordova搭建app

路遇惊喜

03-25

4029

概要 1、首先先到各个开放平台申请开发者账号先申请，审核通过还需要一定时间微信开放平台 https://open.weixin.qq.com/ 腾讯开放平台 http://open.qq.com/ 新浪微博开放平台 http://open.weibo.com/ 2、添加对应的cordova插件 QQ：https://github.com/iVanPan/Cordova_QQ.git 微...

参与评论您还未登录，请先登录后发表或查看评论

基于vue3+ionic6+capacitor的图书借阅app

06-30

前些时候，水壶哥使用vue开发了一套《图书管理系统》，这套系统只有pc端，联想到当前社会是智能社会，任何系统基本都配有移动端，所以本着再次让大家学到新技术的目的，水壶哥又开发了一套《图书管理系统》的移动端，这套系统采用vue+ionic+capacitor框架，是一套基于vue和ionic的入门系统，虽然是入门，但所用到的技术绝对是当今主流，后台依然采用《图书管理系统》的后台，没有任何变化。本资源包包含：图书借阅app的vue源码、图书管理系统springboot后台server源码（该后台基于springboot+mysql+jpa+mybatis技术）、nvm（nodejs管理工具）、nodejs、jdk1.8、打包后的apk（可以直接装在手机上）以及图书借阅app的说明文档。详细说明请参看：https://blog.csdn.net/leonMary/article/details/125507990

ionic-vue 开发app移动端

l576754326的博客

11-11

3508

安装nodejs 安装ionic npm install -g @ionic/cli 创建vue项目 ionic start myApp blank --type vue app组件库添加平台: ionic integrations enable capacitor ionic build ionic cap add android ionic cap open android

ionic5+vue3移动端开发Tips

wu_____的博客

11-04

1346

转载自移动云开发者社区一. ionic已经更新到5.4.0了，支持了最新的vue 3.4.2版本，最近体验了一把ionic5+vue3的组合开发，在此记录下心得体会。 1. 常规操作，创建项目 ionic start myApp blank --type vue 2.安装官方文档ionic serve就可以运行项目了。二. 开发中遇到的问题 1.调用cordova插件随着typescript的流行，ionic默认创建项目为ts的，调用cordova的插件安装之前的写法会有报错这里.

【ionic】ionic的安装和创建一个新的项目

李光未来科技

04-18

624

一、ionic的安装 1、安装node.js 下载地址：https://nodejs.org/en/ 如下图下载左边的即可 2、修改下载源的地址（改成国内的源） npm config set registry http://registry.npm.taobao.org/ 注意：在dos环境下运行即可 3、安装cordova和ionic cnpm install -g cordova ionic...

ionic5+vue3使用menu组件弹窗

明知山

03-25

485

<template> <ion-page> <ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-menu-button color="primary"></ion-menu-button> </ion-buttons> <ion-title>m.

ionic-vue-getting-started:Ionic + Vue YouTube入门视频的源代码-vue source code

03-24

1. **项目结构**：典型的Vue项目结构，包括`src`目录下的`main.js`入口文件、`App.vue`根组件、`components`目录下的自定义组件等。 2. ** Ionic组件**：在Vue组件中使用Ionic的UI元素，如`ion-button`, `ion-input...

将插件Background Geolocation安装到ionic+vue+capacton

最新发布

03-27

好的，我现在需要帮助用户将Background Geolocation插件集成到他们的Ionic + Vue + Capacitor项目中。首先，我需要回忆一下相关的步骤和可能的依赖项。用户提到的技术栈是Ionic、Vue和Capacitor，所以首先应该考虑...

vue3+element+ionic6+capacitor+springboot+mysql图书系统多端开发教程

资源摘要信息:"基于vue3+element+ionic6+capacitor+springboot+mysql图书管理系统pc端+app端合集" 1. 技术栈解析 - Vue.js: Vue.js 是一套用于构建用户界面的渐进式JavaScript框架。Vue 3 是最新版本，提供了更多...

vue仿微信app开发

06-11

该app是vue全家桶开发，nodejs搭建的本地服务器后台，

vue-ionicons-Ionic Team的Vue图标集组件。-Vue.js开发

05-27

:snowman_without_snow:Vue Ionicons Ionic Team Design的Vue图标集组件来自Ionicons项目。 :party_popper:演示https://mazipan.github.io/vue-ionicons:snowman_without_snow:Vue Ionicons Ionic Team的Vue图标集组件设计源于Ionicons项目。 :party_popper:演示https://mazipan.github.io/vue-ionicons:rocket:入门安装软件包＃NPM npm install --save vue-ionicons＃纱线yarn add vue-ionicons导入图标，并将其声明为本地组件：从'vue-ionicons / dist / ios-alert.vue'导入AlertIcon // //或使用转译的js版本//从'vue-ionicons / dist / js / ios-alert'组件导入AlertIcon：{

Vue和Ionic前车之鉴

myfirst_web的博客

11-15

6235

Vue和Ionic前车之鉴开门见山，Vue是最近很流行的前端H5框架，基于node.js，当前较为流行的还有ionic框架，基于weex。下面我针对几点对比优劣以供参考： 1、入手难易分析，vue是一个轻量级的H5框架，入手相对容易，现在有很多插件库，可以通过导包并且在js引入即可使用这些插件库，最为流行的当属elment（饿了么）、vux等，其插件齐全程度完全可以拼凑任意一个项目。Ionic是较为

Vue、Ionic 部署到服务器端随笔

菜鸟学编程

12-15

1734

================== Vue 部署 =================== 1.构建该项目源码 /* 到项目路径下执行 */ cnpm run build 在项目根目录下执行以上命令，会在项目根目录下生成 dist 文件夹。 2.部署编译后文件将项目目录复制到服务器的Nginx、Tomcat、IIS、Apache等工作目录下 3.访问Web服务器端...

使用Vue构建Ionic混合APP系列教程（二）：导航