创建可以离线打包开发的uniapp H5项目

安装node环境

安装vue脚手架,在线

npm install -g @vue/cli

PS:vue-cli已进入维护模式,vue3最新脚手架使用npm init vue@latest安装,安装后使用create-vue替换vue指令,create-vue底层使用vite提升前端开发效率(Note16.0+)

使用命令创建一个uniapp项目,在线

默认使用的https://registry.npmmirror.com作为镜像源

vue create -p dcloudio/uni-preset-vue my-project

选择一个模板

如果下载不下来,可以用离线模式,指定使用的模板位置为本地

下载uniapp离线模板,在线

gitee仓库:

https://gitee.com/dcloud/uni-preset-vue/tree/vite

https://gitee.com/dcloud

uni-preset-vue-master.zip

uni-preset-vue-vite.zip

创建uniapp离线版的h5项目 离线

vue create -p D:/uni-preset-vue-master my-project

这里可以指定模板目录为D:/uni-preset-vue-master

默认下载之后就有依赖了,如果没有初始化依赖,使用以下命令初始化模块依赖:

npm install

文件结构:

运行

打开控制台,进入根目录

使用命令运行:

npm run serve

默认访问地址:http://localhost:8080/#/

使用HBuilderX运行

打包npm run build

相关推荐
游戏开发爱好者812 小时前
抓包工具有哪些?代理抓包、数据流抓包、拦截转发工具
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理16 小时前
技术解析:如何打造适应多国市场的海外跑腿平台
java·开发语言·javascript·mysql·spring cloud·uni-app·php
前端 贾公子16 小时前
uniapp之实现拖拽排序
uni-app
一室易安17 小时前
uniapp vue3 小程序中 手写模仿京东淘宝加入购物车红点曲线飞入样式效果 简化版代码
小程序·uni-app
00后程序员张17 小时前
混合 App 怎么加密?分析混合架构下常见的安全风险
android·安全·小程序·https·uni-app·iphone·webview
2501_9159214319 小时前
Flutter App 到底该怎么测试?如何在 iOS 上进行测试
android·flutter·ios·小程序·uni-app·cocoa·iphone
2501_9159090619 小时前
如何在 Windows 上上架 iOS App,分析上架流程哪些是不用mac的
android·macos·ios·小程序·uni-app·iphone·webview
旧梦吟20 小时前
脚本网页 C与汇编详解
c语言·css3·html5
2501_9159214320 小时前
分析 iOS 描述文件创建与管理中常见的问题
android·ios·小程序·https·uni-app·iphone·webview
Aftery的博客20 小时前
Uniapp-vue实现语言功能切换(多语言)
javascript·vue.js·uni-app