TinyVue安装与配置指南

TinyVue安装与配置指南

tiny-vue TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue

1. 项目基础介绍

TinyVue 是一个企业级的 UI 组件库，由 OpenTiny 社区开发。它支持 Vue.js 2 和 Vue.js 3 两种版本，并且能够适应桌面和移动端的应用。TinyVue 提供了104个干净、易用且强大的组件，支持国际化、主题定制、配置开发等特性，适用于低代码平台。

主要编程语言：TypeScript、Vue、JavaScript、Less

2. 项目使用的关键技术和框架

• Vue.js：一个渐进式JavaScript框架，用于构建用户界面。
• TypeScript：JavaScript 的一个超集，添加了静态类型选项。
• Less：一种扩展了 CSS 的动态样式表语言。
• vxe-table：一个基于 Vue 的表格组件，支持丰富的特性。
• sortablejs：一个强大的拖放库，用于实现拖放排序功能。
• floating-ui：一个帮助创建浮动元素如工具提示、弹出框、下拉菜单等的轻量级库。

3. 安装和配置准备工作

准备工作

• 确保你的系统中已安装 Node.js。

• 安装 Vue CLI，如果尚未安装，可以使用以下命令安装：

  npm install -g @vue/cli
  # 或者
  yarn global add @vue/cli
  

安装步骤

1. 克隆项目

   使用 Git 将 TinyVue 项目克隆到本地：

   git clone https://github.com/opentiny/tiny-vue.git
   

2. 进入项目目录

   克隆完成后，进入项目文件夹：

   cd tiny-vue
   

3. 安装依赖

   使用 pnpm 安装项目依赖，Vue.js 3 项目使用以下命令：

   pnpm i
   # 或者，对于 Vue.js 2 项目使用以下命令：
   # pnpm i @vue/cli-plugin-babel @vue/cli-plugin-eslint @vue/cli-plugin-typescript
   

4. 启动开发服务器

   • 对于 Vue.js 3，运行以下命令启动开发服务器：

     pnpm dev
     

   • 对于 Vue.js 2，运行以下命令启动开发服务器：

     pnpm dev2
     

   启动后，你可以在浏览器中访问 http://127.0.0.1:7130/ 来查看效果。

5. 构建项目

   当你完成开发和测试后，可以使用以下命令构建项目：

   pnpm build
   

   构建产物会放在 dist 文件夹中。

以上步骤为TinyVue的基础安装和配置指南，适用于初次使用的小白用户。在安装和配置过程中，请确保遵循项目官方文档的指导。

tiny-vue TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue