首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vscode开发小程序配置uniapp组件的方式

vscode开发小程序配置uniapp组件的方式

原创
作者头像
挥刀北上
发布于 2025-01-15 08:16:17
发布于 2025-01-15 08:16:17
1860
举报

文档地址:https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85

主要需要两个步骤:

第一个步骤:需要npm安装:

代码语言:txt
AI代码解释
复制
npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

第二个步骤:

代码语言:txt
AI代码解释
复制
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

文档中说的不是很清楚,如果是用cli直接创建的小程序项目,不用配置vue.config.js,直接配置商量两个步骤即可,cli创建uniapp小程序项目的指令是:

代码语言:txt
AI代码解释
复制
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

之后会出现如下界面:

选取模版即可。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、以及各种小程序。深受广大前端开发者的喜爱。uniapp官方也提供了自己的IDE工具HBuilderX,可以快速开发uniapp项目。但是很多前端的同学已经比较习惯使用VSCode去开发项目,为了开发uniapp项目再去切换开发工具,而且对新的开发工具也要有一定的适应过程,大多数前端的同学肯定是不愿意的。下面我们就看看用VSCode如何搭建uniapp项目。
小忽悠
2024/09/10
6370
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
uniapp开发笔记,持续记录
新手上路,记录一下一些细节 1. 字体图标引入:https://uniapp.dcloud.io/frame?id=%e5%ad%97%e4%bd%93%e5%9b%be%e6%a0%87 2. 条件
房东的狗丶
2023/02/17
1.3K0
vite+vue3搭建uniapp开发环境
最近想搞个移动端或小程序的 Vue3 项目,所以选择跨端开发平台就显得十分重要。在业内主要有两个跨端开发平台,Taro 与 uniapp,但 uniapp 貌似对 vue3 的支持不是特别友好。所以让我在 Taro 和 uniapp 之间抉择了一段时间,最终还是尝试选择相对熟悉的 uniapp 来进行开发。
愧怍
2022/12/27
3.3K0
vite+vue3搭建uniapp开发环境
2. 集成 uni-ui 组件库
使用 npm 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom
HelloWorldZ
2024/05/28
2120
2. 集成 uni-ui 组件库
uniapp-cli工程
除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。
阿超
2024/11/14
1280
springboot第9集:基础项目功能简介带你入门挖坑
开启IDEA的目录注释,增加源码的阅读效率 treeinfotip 安装操作: File -> Settings -> Plugins -> Marketplace
达达前端
2023/10/08
3570
uniapp小程序迁移到TS
我一直在做的小程序就是 山科小站 也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能都是比较简单的功能,但是这好不容易实习学到的东西得学以致用,那就继续在小程序上动手吧哈哈。这次实习收获最大倒不是怎么迁移到TS,而是一些组件设计的概念以及目录结构设计上的东西,不过这都是在之后重写组件的时候要做的东西了。回到正题,小程序是用uniapp写的,毕竟还是比较熟悉Vue语法的,这次迁移首先是要将小程序从HBuilderX迁移到cli版本,虽然用HBuilderX确实是有一定的优点,但是拓展性比较差,这些东西还是得自己折腾折腾,迁移到cli版本完成后,接下来就是要慢慢从js过渡到ts了,虽然是Vue2对ts支持相对比较差,但是至少对于抽离出来的逻辑是可以写成ts的,可以在编译期就避免很多错误,另外自己使用cli创建可以搞一些其他功能,毕竟只要不操作DOM的话一般还是在用常用的js方法,例如可以尝试接入Jest单元测试等。
WindRunnerMax
2021/10/15
1.6K0
uni-app基础教程 环境配置【uniapp 专题 01】
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。当然uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。
徐建国
2022/03/29
2.2K0
uni-app基础教程 环境配置【uniapp 专题 01】
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
https://cdn.jsdelivr.net/gh/Qiu-JW/NotePicture/2024/08/image-20240806215014105.png
Qiuner
2024/11/21
720
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
easycom模式使vue组件无需引入即可使用
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。如下:
用户10106350
2022/10/28
1.3K0
黑马程序员uni-app 小兔鲜儿 项目及bug记录(上)
https://blog.csdn.net/qq_42880714/article/details/126509087
Qiuner
2024/07/20
6080
黑马程序员uni-app 小兔鲜儿 项目及bug记录(上)
uniapp项目实践第一章:如何创建uniapp项目
打开命令窗口输入npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
GeekLiHua
2025/01/21
2220
uniapp项目实践第一章:如何创建uniapp项目
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
本篇将为您介绍微信支付在小程序 Uniapp 端的全新篇章。微信支付作为移动支付领域的先驱之一,不断演进与创新,为用户和开发者提供更便捷、安全的支付体验。在本文中,我们将深入探讨微信支付在小程序 Uniapp 端的应用与优势。
杨不易呀
2023/09/22
2.2K2
从零玩转系列之小程序微信支付UniApp实战基础项目搭建
uni-app(优医咨询)项目实战 - 第1天
在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
陶然同学
2024/04/30
2710
uni-app(优医咨询)项目实战 - 第1天
[保姆级教程]在uniapp中使用vant框架
在你的 uni-app 项目根目录下,使用 npm 或 yarn 来安装 Vant。
肥晨
2024/06/22
5.3K0
uni-app 简介
uni-app 简介 官网:https://uniapp.dcloud.io/ 1. uni-app 是什么 ? uni-app 是一个使用 Vue.js 开发跨平台前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、H5、小程序等多个平台。 那么哪里可以体现 uni-app 可以实现 “一套代码,多端发行”呢?从常用的 uni-app 开发工具 HBuilder 可以看出该特点。 2. 为什么选择 uni-app ?(uni-app 的优点) 1. 跨平台发行,运行体验更好 与小程序
繁依Fanyi
2023/05/07
9230
uni-app 简介
uniapp项目实践第四章:如何安装uni-ui组件库
这个是组件库的官网:https://uniapp.dcloud.net.cn/component/
GeekLiHua
2025/01/21
8470
uniapp项目实践第四章:如何安装uni-ui组件库
从0到1!萌新跟着操作也能学会的保姆级全栈项目开发实录一:项目初始化配置
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
Qiuner
2024/10/22
2240
从0到1!萌新跟着操作也能学会的保姆级全栈项目开发实录一:项目初始化配置
uni-app基础 1.2.1-引入uView
组件简介以及组件库推荐 点击查看视频教程跳到b站 课程文档地址 练习使用可以创建模板来观察官方如何使用 uni-ui 建议模板直接引入 单个使用的话插件市场引入 引入uView-ui 1.插件市场引入 App.vue <style lang="scss"> /*每个页面公共css */ @import "@/uni_modules/uview-ui/index.scss"; </style> main.js import uView from '@/uni_modules/uview-ui' V
代码哈士奇
2022/04/13
5720
uni-app使用easycom自动引入组件
注意需要在pages.json中增加如下配置,下图是uni-ui的规则,也可以自定义别的规则。
零云
2023/07/24
9810
相关推荐
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档