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

这篇具有很好参考价值的文章主要介绍了uniapp之通过vue-cli命令行创建Vue3/Vite版，JavaScript开发，引入uni-ui扩展组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

注意：

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 解决：文章来源地址https://www.toymoban.com/news/detail-525284.html

// 在根目录创建 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() 的方式安装

到了这里，关于uniapp之通过vue-cli命令行创建Vue3/Vite版，JavaScript开发，引入uni-ui扩展组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！