基于 Vue3 的 Uniapp 移动端跨平台开发脚手架

已于 2023-10-24 13:30:27 修改
阅读量1.2k 收藏 4
点赞数
分类专栏： Odoo 大前端 软件工程 文章标签： typescript uni-app 前端 1024程序员节
于 2023-02-27 10:39:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LifeRiver/article/details/129236821
版权
Odoo 同时被 3 个专栏收录
14 篇文章 1 订阅 ¥39.90 ¥99.00
订阅专栏 超级会员免费看
大前端
5 篇文章 1 订阅
订阅专栏
软件工程
5 篇文章 0 订阅
订阅专栏

Uniapp Starter

基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架

在这里插入图片描述

技术选型

  • Vue3 Web 前端框架，组合式 API <script setup lang="ts">
  • Typescript 在 JavaScript 的基础上添加静态类型。
  • Vite3 前端工具链
  • vk-uview-ui 支持 Vue3 的 uview 组件库
  • Pinia 状态管理
  • VueUse 基于 Composition API的实用函数集合、hooks。
  • UnoCSS 即时按需原子CSS引擎
  • ucharts
了解本专栏 订阅专栏 解锁全文 超级会员免费看
AaronZZH
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
01uni-app 基础教程 环境配置【uniapp 专题 1】
2401_84091110的博客
04-06 1022
选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为，如就是下载图片模板。由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
uniapp:使用 Vue.js 开发跨平台应用的前端框架
最新发布
06-03
其次，uniApp基于Vue.js，这意味着开发者可以充分利用Vue的响应式数据绑定、组件化开发等特性。Vue.js的轻量级和易上手特性，使得开发人员能快速上手uniApp。同时，Vue.js的生态系统也能够为uniApp的开发提供丰富的...
基于 Uniapp + Vue3 + Typescript 的移动端跨平台快速开发脚手架
02-27
Vue3 前端框架，组合式 API <script setup lang="ts"> Typescript 在 JavaScript 的基础上添加静态类型。 Vite3 前端工具链 vk-uview-ui 支持 Vue3 的 uview 组件库 Pinia 状态管理 VueUse 基于 Composition API的实用函数集合、hooks。 UnoCSS 即时按需原子CSS引擎 ucharts 跨平台图表 unplugin-vue-components 自动本地导入组件 Auto import 自动导入常用 API，无需显式 import { computed, ref } from 'vue' ESLint 支持保存自动代码格式化 Fastify 使用 fastify 作为 mock api husky Git 提交 hooks, 自动执行脚本 lint-staged 提交时仅检查暂存区代码，代码检查通过才能提交 commit
uni-app基础框架搭建（vue3+ts+vite）
LB_bei的博客
05-29 2033
uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创安装node、hbuilder安装pnpm，相比于npm他的优点是：显著提升了包安装的速度和磁盘空间利用率，同时避免了依赖冲突和重复安装的问题；创建uniapp vue3+ts项目。
uniapp 小程序 使用vue3+ts运行项目
weixin_71403100的博客
07-18 4725
下载完模板后进行解压，利用vscode打开文件，会发现报这样的错误👇主要原因是没有下载依赖。注意：若不能直接使用命令下载，可去gitee下载模板使用。其中dist里面的dev文件就是小程序打包生成的文件👇。解决以上错误：使用npm i 下载全部依赖即可。第一种：通过HBuilderX可视化界面创建。第二种：通过vue-cli命令行。此时终端会提示操作步骤👇。
前端VUE3+Vite +UniAPP-- 框架搭建
寿春
06-08 5268
除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。全局安装 vue-cli配置tailwindcss插件在 tailwind.config.js 配置文件中添加所有模板文件的路径。将加载 Tailwind 的指令添加到你的 CSS 文件中在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。安装 pinia安装防抖增加请求安装 uniui组件库uview 组件库地址。
uni-app(vue3)封装楼层组件
m0_61919101的博客
12-13 440
用它来将名称转成拼音，就可以通过字符串截取取出拼音首字母，这样就可以进行首字母排序了。从接口请求回来的数据只有名称，没有进行排序，前端在搭建页面和实现排序有些麻烦，如果后台数据不全，setArr方法未排除空数据，会出现这种情况。老规矩，废话不多说，直接上代码(cv即可使用)基于vant+js-pinyin封装楼层组件。具体看个人需求，做单独修改...template模块。
vue3+uniapp起步
qq_41972562的博客
04-06 345
1.接口封装在根目录创建request/index.js具体使用2 跨域//vue3中 manifest.json配置不起作用在根目录创建vite.config.js,配置ip重写地址3.pc模拟器请求没问题，真假报错。
uniapp 基于 vue3 开发的【验证码输入框】
04-11
概要：uniapp 基于 vue3 开发的【验证码输入框】，输入值的输入框切换和光标是否自动聚焦等； 使用人群：使用 uniapp 基于 vue3 开发的应用，需要用到输入验证码； 使用场景：短信验证码登录、短信验证码验证身份、...
基于Vue和Uniapp的芋道商城全功能设计源码
04-11
本源码提供了一个基于Vue和Uniapp的芋道商城全功能设计。项目包含537个文件，其中包括221个Vue文件、103个JavaScript文件、73个Markdown文档、60个JSON文件、41个SCSS样式文件、27个PNG图片、3个TTF字体文件、2个...
基于Vue2的移动端开发环境搭建详解
11-29
下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤，下面来一起看看吧。 一、vue-cli 首先还是介绍我们的脚手架工具，因为它能让我们省去大部分的配置时间，这里只给出简单步骤，保证你的命令...
lanren-uni-app:多家标准懒人lanren-uni-app脚手架，简单易用，支持H5，微信小程序，安卓，IOS，最接近原生的tabar
03-25
lanren-uni-app:多家标准懒人lanren-uni-app脚手架，简单易用，支持H5，微信小程序，安卓，IOS，最接近原生的tabar
uniapp-脚手架(uview2.0+请求封装+vuex)
03-15
uniapp_脚手架(uview2.0+请求封装+vuex)
从零搭建uniapp app,适合小白,傻瓜化,页面搭积木可视化创建
u013931283的博客
10-27 2202
分享一: 从零搭建uniapp app 分享二: 一个 uniapp uview ui 可视化,完全自由拖拽,一键生成flex代码网站: http://aicode.shagua.wiki/uni/index.html#/ 十大特性 1.可视化,自由拖拽,推导出flex布局,尽可能兼容多端(h5,微信小程序) 2.支持uviewui内置所有图标,也可以使用阿里图标库160万+图标(需填写网络路径) 3.支持在遮罩mask,弹窗Popup,modal 等组件,直接拖拽,绘制 4.对于常用的表单组件,可直接帮你
uni-app从入门到一 （二）uni-app脚手架搭建项目
wuhui2100的博客
07-03 4936
uni-app两种开发方式 第一种：使用DCloud公司提供的HbuilderX编辑工具，我们只需要点击基本的创建按钮，就可以创建一个初步项目了 第二种：就是使用uni-app脚手架开快速搭建项目与开发，该方式是使用传统的node脚手架方式来开发，使用脚手架搭建项目是一名前端工程师的基本功，那么接下来就让我们一起来学习uni-app脚手架的项目搭建吧！ 第一步 配置全局安装工具 1、首先安装node，进入node官网下载相应的版本，我这里使用的是最新版本 ...
使用脚手架搭建uniapp项目
m0_61096379的博客
05-26 448
1.全局安装 npm install -g @vue/cli 2.创建项目 vue create -p dcloudio/uni-preset-vue '项目名称' 3.启动项目(微信小程序) npm run dev:mp-weixin 4.微信开发者工具导入项目(导入mp-weixin文件夹)
uni-app爬坑之旅（一）
牧野静风的技术人生
01-28 5442
什么是uni-app uni-app 是Dcloud旗下 最新的 一个使用 Vue.js 为基础的 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。 Dcloud：目前中国做的最好IDE开发商以及跨平台移动应用专家 什么样的项目用uni-app 跨平台的移动应用，特别是当你还需要小程序端的时候 需要什么基础 1、需要懂一些Vue.js 2、最好...
uni-app使用element ui开发H5(跨端可推荐uview ui )
热门推荐
代码哈士奇的博客
03-15 1万+
建议h5端开发使用 app/小程序可以使用uview ui 安装 在uni-app项目根目录 执行 npm install npm i element-ui -S 进入根目录可以通过右键项目文件夹 在这里输入 cmd即可快速打开cmd 执行 npm install npm i element-ui -Sr安装即可 引入 import Vue from 'vue' import App from './App' import ElementUI from 'element-ui'; import 'e.
uniapp vite + vue3移动端项目踩坑记录
qq_37993468的博客
04-23 3615
uniapp vite + vue3移动端项目踩坑记录使用uniapp vue3开发移动端App项目创建与运行UI库的使用项目目录uni-push推送的使用WebSocket的使用自己封装的组件 使用uniapp vue3开发移动端App vue3出了很长一段时间了，平时上下班的路上看了看一些公众号分享的使用经验，于是在近期的一个新项目中就打算实际上手用用。公司要求开发一款Android App，遂选用了uniapp，以防后期客户要求在h5与公众号中使用。附（本人小白一枚，写博客主要为了记录与分享一些问题，
uniapp脚手架启动失败
08-02
引用[1]中提到，当从svn把主包下载下来后，安装依赖报错，报错信息为"uniapp no such file or directory"。这个问题可能是由于缺少依赖或者依赖路径配置错误导致的。你可以尝试以下解决方法： 1. 确保你已经正确安装了npm和node.js，并且版本符合uniapp的要求。 2. 在项目根目录下运行命令npm install，以安装项目所需的依赖。 3. 如果安装依赖时报错，可以尝试使用强制安装命令npm install -g n --force来解决依赖安装问题。这个命令会强制安装最新版本的node.js。 4. 如果以上方法都没有解决问题，你可以尝试检查项目的配置文件，特别是manifest.json文件和pages.json文件，确保依赖路径配置正确。 引用[2]中提到，你还可以尝试配置代理来解决跨域问题。在项目根目录的manifest.json文件中，找到源码视图，添加h5跨域配置项，然后重启uniapp服务并清除浏览器缓存。这样可以解决一些与后端接口交互的问题。 引用[3]中提到，uni-app的页面路由需要在pages.json文件中配置每个路由页面的路径及页面样式。确保你已经正确配置了页面路由，遵循uni-app的路由用法。 如果以上方法都没有解决问题，你可以尝试搜索uniapp脚手架启动失败的具体错误信息，或者向uniapp的官方论坛或社区提问，寻求更专业的帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AaronZZH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值