uni-app-通过vue-cli命令行快速上手

news2024/9/21 2:46:27

环境安装

全局安装 vue-cli

npm install -g @vue/cli

创建uni-app

  • 使用正式版（对应HBuilderX最新正式版）

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

  • 使用alpha版（对应HBuilderX最新alpha版）

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

  • 使用Vue3/Vite版

    • 创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project
  • 创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee下载模板）
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

注意

  • Vue3/Vite版要求 node 版本 18+、20+
  • 如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
    • HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
    • HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node路径
自定义模板

选择自定义模板时，需要填写 uni-app 模板地址，这个地址其实就是托管在云端的仓库地址。以 GitHub 为例，地址格式为 userName/repositoryName，如 dcloudio/uni-template-picture 就是下载图片模板。

更多支持的下载方式，请参考这个插件的说明：download-git-repo

国内特殊情况

模板项目存放于 Github，由于国内网络环境问题，可能下载失败。针对此问题可以尝试如下措施：

  • 更换网络重试，比如使用 4g 网络
  • 在设备或路由器的网络设置中增加 DNS（如：8.8.8.8）
  • 在设备中增加固定的 hosts（如：140.82.113.4 github.com）
更新依赖到指定版本

可以使用 @dcloudio/uvm管理编译器的版本，此工具仅自动增加或更新 uni-app 编译器主要依赖，对于新增的编译命令（scripts）暂时不会自动处理，需手动参考新工程进行配置。

  • 更新到最新正式版 
    npx @dcloudio/uvm@latest
  • 更新到最新 Alpha 版 
    npx @dcloudio/uvm@latest alpha
  • 更新到正式版指定版本 
    npx @dcloudio/uvm@latest 3.2.0
    或 
    npx @dcloudio/uvm@latest 3.2.12.20211029
    复制代码
  • 更新到 Alpha 版指定版本 
    npx @dcloudio/uvm@latest 3.2.0-alpha
    或 
    npx @dcloudio/uvm@latest 3.2.14.20211112-alpha

运行、发布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

值平台
app-plusapp平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5H5
mp-alipay支付宝小程序
mp-baidu百度小程序
mp-weixin微信小程序
mp-toutiao抖音小程序
mp-lark飞书小程序
mp-qqqq 小程序
mp-360360 小程序
mp-kuaishou快手小程序
mp-jd京东小程序
mp-xhs小红书小程序
quickapp-webview快应用(webview)
quickapp-webview-union快应用联盟
quickapp-webview-huawei快应用华为

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档。

运行并发布快应用

快应用有两种开发方式，uni-app均支持：

  • 类小程序webview渲染方式：uni-app支持快应用-webview版，欢迎体验 - DCloud问答
  • 原生渲染方式：欢迎大家参与快应用vue原生渲染模式的适配共研 - DCloud问答
运行并发布快应用(webview)

HBuilderX 2.7.12+ 版支持

运行并发布快应用(webview)-华为

HBuilderX 2.7.10+ 版支持

华为快应用文档-小程序转快应用 文档中心

其他：

  • 目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。
  • dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；
  • build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
  • dev 和 build 模式的区别：
    1. dev 模式有 SourceMap 可以方便的进行断点调试；
    2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
    3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build 模式 process.env.NODE_ENV 的值为 production。

cli创建项目和HBuilderX可视化界面创建项目的区别

  • cli创建的项目，是传统的node项目结构。工程代码在src目录下，编译器在项目下，编译结果在dist目录下。
  • HBuilderX可视化创建的项目，是一种免node开发概念。工程代码在项目目录下，编译器在HBuilderX目录下而不是项目下，编译结果在项目的unpackage目录下。

有些习惯了cli的开发者，使用HBuilderX可视化模式时不适应。讲解下它们的差别以及为什么HBuilderX提供了多种方式。

cli创建的项目，也可以拖入HBuilderX编辑

首先HBuilderX作为通用编辑器，兼容传统的cli方式开发。不止uni-app的cli，其他框架的cli也可以拖入HBuilderX。

也就是HBuilderX里可以使用可视化界面创建项目，也可以使用cli命令行创建项目，都可以达到和uni-app更好协作的目的。比如pages.json跳转和提示、manifest可视化界面、条件编译、rpx等css单位...众多 for uni-app 的优化都可以使用。

这些是HBuilderX的特点，和项目结构无关。

如想用其他ide开发uni-app，只能使用cli模式

很好理解。因为其他ide没有内置uni-app的编译器，所以其他ide开发uni-app，只能把编译器安装在项目下，也就是cli创建的项目格式。

cli项目可以使用多种ide开发，但ide之间有区别：

  • HBuilderX为uni-app做了大量优化，其他ide搭配uni-app使用也可以用，但没有为uni-app优化过
  • 其他ide没有uni-app的app和uniCloud的运行、调试工具。这些工具在HBuilderX里。如开发app和uniCloud，必须使用HBuilderX。

可视化方式的区别

HBuilderX可视化创建、运行、发布项目，底层调用的也是npm的run、build等命令。只是编译器不在项目下，而是在HBuilderX的目录下。

为什么要提供HBuilderX可视化模式

  • 为了提升易用性，降低门槛

很多开发者对node不熟悉、对命令行有心理抵触。不要想当然认为所有开发者都会node，HBuilder有几百万开发者，其中掌握node的开发者连一半都占不到。

  • npm、github网络经常出问题

使用cli创建项目时，cli需要从npm安装，预置的项目模板选择从github下载，这些经常因为网络问题卡壳。可视化创建项目不存在这个问题。

  • 每个uni-app项目下都有一套编译器太麻烦

一个HBuilderX的开发者有非常多个uni-app项目，如果每个项目下放一套编译器，会有很多不合理： - 创建项目会非常慢 - 非常占用磁盘空间（uni-app的编译器有数万个文件） - 升级麻烦，兼容性问题多。cli项目下的编译器不会跟随HBuilderX升级而升级，只能开发者手敲npm命令升级。当HBuilderX升级后，有的uni-app项目的编译器未升级，有的升级了，报错时开发者很容易懵圈，给DCloud报bug时DCloud也懵圈。让ide版本、编译器版本、uni-app运行时这3者的版本保持一致，会减少非常多的问题。

把编译器内置到HBuilderX中，开发者创建项目时只需关心自己的业务代码，工程结构干净清爽。

各家小程序也都是这么做的，编译器在小程序开发工具里，创建项目时不会在项目下带一套编译器（小程序也是要把wxml等编译为js的）。

  • less、scss、ts等编译器的自动安装
    • 如果使用cli项目，那么less、scss、ts等编译器需要自己手动敲npm命令安装。由于DCloud官方不会和每种预编译器的每个版本都做兼容性测试，如果你使用了较低的预编译器版本，可能会无法正常运行，这需要你自己排查
    • 如果使用HBuilderX可视化创建项目，这些编译器会按需自动安装，并且是DCloud官方测试过版本兼容性的。开发者只需在你的代码中使用这些预编译技术，剩下的HBuilderX会自动搞定。
  • 可视化更高效

HBuilderX提供的免node开发，除了易用，还更高效。

  •  新建项目：Ctrl+N
  • 运行项目：Ctrl+R
  • 发行项目：Ctrl+U

这比启动终端，移动焦点到终端窗口，敲命令快多了。

在uni-app中，终端命令比传统web开发要多、要长，还要敲运行平台参数的，选择你要运行到web还是app或某家小程序。

综上，

如果你习惯node，也能接受和管理好每个项目下一套编译器的方式，清楚上述利弊，那你可以选择cli创建项目。

至于ide，肯定还是HBuilderX搭配uni-app开发更高效。

如果你习惯其他ide，开发uni-app低效也无所谓，那也可以用其他ide。但注意至少运行调试app和uniCloud时，还得把HBuilderX开着，就像开着微信小程序工具调试那样。

在DCloud内部，uni-app和HBuilderX是不同的团队。

  • 对于uni-app来说，它面对所有ide一视同仁。它兼容node生态，支持d.ts语法提示
  • 对于HBuilderX来说，uni-app是一等公民。HBuilderX为uni-app做了很多优化

其他注意事项

 

关于优联前端

        武汉优联前端科技有限公司由一批从事前端10余年的专业人才创办，是一家致力于H5前端技术研究的科技创新型公司，为合作伙伴提供专业高效的前端解决方案，合作伙伴遍布中国及东南亚地区，行业涵盖广告，教育， 医疗，餐饮等。有效的解决了合作伙伴的前端技术难题，节约了成本，实现合作共赢。可进行Web前端，微信小程序、小游戏，2D/3D游戏，动画交互与UI广告设计等各种技术研发。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2147020.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ARMxy车辆数据采集Linux智能控制器

ARMxy车辆数据采集Linux智能控制器

在当今科技日新月异的时代，高效智能的边缘计算设备在众多领域发挥着关键作用。我们的 ARM 边缘计算机，凭借其卓越的性能和广泛的适用性，成为车队管理智能化的核心力量。 一、强大硬件配置，完美适配车队管理需求 ARM 边缘计算机支…
阅读更多...
2024 全新利器：API 微查接口登场

2024 全新利器：API 微查接口登场

在信息时代的浪潮中，数据查询和核验成为了人们生活中必不可少的一部分。然而，为了满足各种不同的查询需求，开发和维护一个高效、全面的查询系统对于个人或者小团队来说往往是一项不小的挑战。好在现在有了全新的利器：API 微查接口…
阅读更多...
CTF 技能树 LOG -GIT泄露 笔记

CTF 技能树 LOG -GIT泄露 笔记

log 使用虚拟机kali操作 python2 安装 apt-get install python2 进入root用户，下载克隆git hack库 git clone https://github.com/BugScanTeam/GitHack sudo passwd root 修改root 命名密码为root 切换登录 su root 终端进入home/kali/GitHack/ python GitH…
阅读更多...
【模板进阶】类型参数的推断

【模板进阶】类型参数的推断

一、使用 B o o s t Boost Boost库来借助推断 通常，我们可以使用 t y p e i d ( ) typeid() typeid()来推断一个类型，但是有时候 t y p e i d typeid typeid不够准确，因此，我们借助 B o o s t Boost Boost库里面的 t y p e _ i d…
阅读更多...
yolo车位数据集

yolo车位数据集

停车场车位检测数据集是一个非常有价值的数据资源，它对于开发和训练能够自动识别停车位是否被占用的计算机视觉系统至关重要。以下是对这样一个数据集的详细介绍，以及如何使用这个数据集来训练YOLO（You Only Look Once）这样的目标…
阅读更多...
springcloud整合nacos、sentinal、springcloud-gateway,springboot security、oauth2总结

springcloud整合nacos、sentinal、springcloud-gateway,springboot security、oauth2总结

源码地址:下载地址 使用该架构的项目地址:下载地址 下面教大家整合nacos、sentinal、springcloud-gateway,springboot security、oauth2做一个分布式架构 1、第一步整合nacos 1、下载alibaba的nacos 下载地址，然后使用单机模式启动nacos sh startup.sh -m standalon…
阅读更多...
游戏如何检测加速外挂

游戏如何检测加速外挂

在游戏面临的众多外挂风险中，除了常见的内存修改挂、注入挂等作弊手段，黑灰产还常用「加速」手段实现作弊。 游戏安全风险分布占比图 「加速」顾名思义是指改变游戏内的速度。游戏在运行中需要以帧为单位播放画面，而计算每帧动画播放所需时间…
阅读更多...
游戏如何应对云手机刷量问题

游戏如何应对云手机刷量问题

云手机的实现原理是依托公有云和 ARM 虚拟化技术，为用户在云端提供一个安卓实例，用户可以将手机上的应用上传至云端，再通过视频流的方式，远程实时控制云手机。 市面上常见的几款云手机 原本需要手机提供的计算、存储等能力都改由…
阅读更多...
深度图变换器的新突破：DeepGraph

深度图变换器的新突破：DeepGraph

人工智能咨询培训老师叶梓 转载标明出处 在图变换器领域，尽管其全局注意力机制在图结构数据处理上显示出了巨大潜力，但现有的图变换器模型却普遍较浅，通常不超过12层。这一现象引发了学者们对于“增加层数是否能进一步提升图变换器性能”的深…
阅读更多...
Vue3 多组复选框重置（v-if 强制刷新组件）

Vue3 多组复选框重置（v-if 强制刷新组件）

通过v-if指令强制刷新&#xff0c;当v-if的值发生变化时&#xff0c;组件都会被重新渲染一遍。因此&#xff0c;利用v-if指令的特性&#xff0c;可以达到强制刷新组件的目的。 先用个简单例子 --> 项目中使用 <template><comp v-if"refresh"></c…
阅读更多...
普罗米修斯监控

普罗米修斯监控

目录 概念 部署方法 1. 二进制&#xff08;源码包&#xff09; 2. 部署在k8s集群当中&#xff0c;用pod形式部署 概念 prometheus是开源的系统监控和告警。在k8s分布式的容器化管理系统当中&#xff0c;一般都是搭配prometheus来进行监控。它是服务监控系统&#xff0c;也…
阅读更多...
运动规划第二节【深蓝学院，高飞】笔记

运动规划第二节【深蓝学院，高飞】笔记

文章目录 Graph Search BasisConfiguration SpaceConfiguration Space ObstacleWorkspace and Configuration Space Obstacle Graph and Search MethodGraph Search OverviewGraph TraversalBreadth First Search (BFS)Depth First Search (DFS)versus Heuristic SearchGreedy …
阅读更多...
武汉大学：如何做好高校电子邮件账号安全防护

武汉大学：如何做好高校电子邮件账号安全防护

上个世纪七十年代&#xff0c;电子邮件占据了互联网的前身ARPANET上流量的75%&#xff0c;是最主要的应用。随着互联网的发展&#xff0c;电子邮件在全面普及后&#xff0c;被各种各样的即时通讯软件抢走了不少风头。然而&#xff0c;其始终还是被社会所认可的主流网络通讯渠道…
阅读更多...
网络高级day01（Modbus 通信协议）

网络高级day01（Modbus 通信协议）

目录 1》modbus分类 1> Modbus RTU 2> Modbus ASCLL 3> Modbus TCP 2》Modbus TCP的特点 3》Modbus TCP协议 1> 报文头&#xff08;一共7个字节&#xff09; 2> 寄存器 3> 功能码 4> 数据 01H 功能码分析 05H 功能码分析 0FH 功能码分析 1》modbus…
阅读更多...
git reflog 和 git log 的详解和区别

git reflog 和 git log 的详解和区别

文章目录 1. git log 介绍基本用法&#xff1a;输出内容&#xff1a;常见选项&#xff1a;git log 的局限性&#xff1a; 2. git reflog 介绍基本用法&#xff1a;输出内容&#xff1a;git reflog 输出字段&#xff1a;常见选项&#xff1a;主要用途&#xff1a;示例&#xff1…
阅读更多...
Rasa对话模型——做一个语言助手

Rasa对话模型——做一个语言助手

1、Rasa模型 1.1 模型介绍 Rasa是一个用于构建对话 AI 的开源框架&#xff0c;主要用于开发聊天机器人和语音助手。Rasa 提供了自然语言理解&#xff08;NLU&#xff09;和对话管理&#xff08;DM&#xff09;功能&#xff0c;使开发者能够创建智能、交互式的对话系统。 1.2…
阅读更多...
JavaScript 基础 - 第20天_Node.js模块化

JavaScript 基础 - 第20天_Node.js模块化

文章目录 Day02_Node.js模块化目录学习目标01.模块化简介目标讲解小结 02.ECMAScript标准-默认导出和导入目标讲解小结 03.ECMAScript标准-命名导出和导入目标讲解小结 04.包的概念目标讲解小结 05.npm软件包管理器目标讲解小结 06.npm安装所有依赖目标讲解小结 07.npm全局软件…
阅读更多...
计算机领域CCF推荐期刊A/B/C类全目录

计算机领域CCF推荐期刊A/B/C类全目录

计算机领域CCF推荐期刊 最新在检的【自动化与控制系统】的64本SCI期刊最新影响因子、期刊分区、自引率 CCF-A类 CCF-B类 CCF-C类 更多期刊解析干货&#xff0c;移步公众号【Unionpub学术】 计算机领域CCF推荐期刊A/B/C类全目录&#xff08;附excel下载&#xff09;
阅读更多...
3.使用 VSCode 过程中的英语积累 - Selection 菜单（每一次重点积累 5 个单词）

3.使用 VSCode 过程中的英语积累 - Selection 菜单（每一次重点积累 5 个单词）

前言 学习可以不局限于传统的书籍和课堂&#xff0c;各种生活的元素也都可以做为我们的学习对象&#xff0c;本文将利用 VSCode 页面上的各种英文元素来做英语的积累&#xff0c;如此做有 3 大利 这些软件在我们工作中是时时刻刻接触的&#xff0c;借此做英语积累再合适不过&a…
阅读更多...
多线程篇六

多线程篇六

多线程篇六 如笔者理解有误欢迎交流指正~⭐ 什么是单例模式&#xff1f; 单例模式是最常见的 设计模式. 顾名思义&#xff0c;单例模式指的就是单个实例的模式.&#xff08;针对某些类只能使用一个对象的场景【如MySQL、JDBC、DataSource】&#xff09; 设计模式 设计模式是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023