uniapp之通过vue-cli命令行创建Vue3/Vite版，JavaScript开发，引入uni-ui扩展组件

最新推荐文章于 2025-06-04 13:08:12 发布

慕木^_^

最新推荐文章于 2025-06-04 13:08:12 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： vue.js javascript uni-app

本文链接：https://blog.youkuaiyun.com/qq_37273844/article/details/130153417

uniapp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue3和Vite环境下，如何配置高版本node，使用HBuilderX进行项目运行。同时，详细讲解了创建javascript工程、安装uni-ui、配置easycom以及处理组件导入问题的步骤。强调uni-ui是uni-app的基础组件补充，推荐按需引入。

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

注意：

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）

HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径

环境安装
1.全局安装 vue-cli

npm install -g @vue/cli

2.创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

3.准备 sass

 npm i sass -D   或   yarn add sass -D

4.安装 sass-loader

npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D

5.安装 uni-ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

6.配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

注意

uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题
使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件，导致条件编译失效，需要通过配置 vue.config.js 解决：

// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
   transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 无需添加配置

uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。
uni-ui 不支持使用 Vue.use() 的方式安装