Skip to content
On this page

安装

说明

TuniaoUI V3 是基于 uni-app 开发的跨平台 Vue3 组件库。

TuniaoUI V3 是使用 typescript 进行开发的,所以需要有 typescript 的环境。

图鸟在开发完 TuniaoUI V3 版本后进行打包后再发布到 npm 在部份端出现组件错误的问题,所以 TuniaoUI V3 的 npm 包是以源码的方式进行上传的而非进行二次打包压缩的版本

后续图鸟会继续进行研究发布打包版本的 npm 包,减少开发者的安装成本

node 安装

由于没有进行打包压缩,所以在安装 TuniaoUI vue3 npm 包时需要同时安装对应的依赖包

bash
npm install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
npm install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
bash
pnpm add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
pnpm add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
bash
yarn install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
yarn install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style

sass 环境的安装

TuniaoUI V3 是使用 sass 进行开发的,所以需要安装 sass 环境

bash
npm install sass sass-loader -D
npm install sass sass-loader -D
bash
pnpm install sass sass-loader -D
pnpm install sass sass-loader -D
bash
yarn install sass sass-loader -D
yarn install sass sass-loader -D

注意

使用 npm 方式进行安装的,需要对项目进行配置,具体配置请查看项目配置

tuniao-cli 方式进行安装

安装 tuniao-cli

注意

使用工具之前请先安装 nodejs 和 git,并且配置好环境变量

bash
npm install tuniao-cli -g
npm install tuniao-cli -g
bash
pnpm install tuniao-cli -g
pnpm install tuniao-cli -g
bash
yarn install tuniao-cli -g
yarn install tuniao-cli -g

创建项目模板

bash
tuniao create [存放项目的文件夹名称]
tuniao create [存放项目的文件夹名称]

windows 下使用 tuniao-cli

注意

如果在 windows 下使用 tuniao-cli 创建项目时

提示无法加载文件...因为在此系统上禁止运行脚本时,请在管理员模式下打开 powershell,然后执行以下命令

bash
set-ExecutionPolicy RemoteSigned
set-ExecutionPolicy RemoteSigned

如果不传递文件夹名称则在当前目录下进行创建

根据提示创建项目即可

tuniao-cli 创建项目注意事项

  1. 如果下载模板过慢,可以到githubgitee上直接clone模板下来。
github 地址
https://github.com/tuniaoTech/tuniaoui-vue3-uniapp-template
https://github.com/tuniaoTech/tuniaoui-vue3-uniapp-template
gitee 地址
https://gitee.com/TSpecific/tuniao-ui-vue3-uniapp-template
https://gitee.com/TSpecific/tuniao-ui-vue3-uniapp-template

uni_modules 方式安装

在插件市场中进行导入即可

uniapp 插件市场地址TuniaoUI vue3 uni_modules

注意

使用 uni_modules 方式进行安装的,需要对项目进行配置,具体配置请查看项目配置

Tuniao UI