图鸟UI(Vue2) 开源项目安装与使用指南

图鸟UI(Vue2) 开源项目安装与使用指南

1. 项目目录结构及介绍

图鸟UI是一个基于uni-app开发的UI框架，旨在加速Web和小程序应用的界面开发。下面是其基本的目录结构及其简介：

.
├── App.vue                 # 全局入口文件，定义了应用程序的基本结构
├── components               # 组件目录，存放自定义的基础组件
├── store                    # Vuex状态管理文件夹
├── static                   # 静态资源文件夹，如图片、字体等
├── tuniao-ui                # 图鸟UI的核心组件库
│   ├── index.scss           # 主题SCSS文件，用于定制全局样式
│   └── ...                  # 其他组件和样式文件
├── uni.scss                 # 全局SCSS设置，可能包括导入图鸟UI样式
├── pages.json               # 页面路由配置文件
├── main.js                  # 应用程序的入口脚本，包含Vue实例的创建
├── ...                      # 其它配置文件或第三方依赖

• App.vue 是uni-app的主入口，负责整个应用的初始渲染。
• components 和 tuniao-ui 目录存储着各种可复用的UI组件。
• store 目录包含了Vuex的状态管理逻辑，用于跨组件共享状态。
• static 存放所有静态资源，这些资源通常在生产环境中直接访问。
• main.js 是项目启动的关键文件，初始化Vue应用并引入必要的依赖。

2. 项目的启动文件介绍

主要关注点在于main.js文件，这是图鸟UI集成的关键所在。在这个文件中，你需要执行以下操作来启动项目并接入图鸟UI的功能：

// 导入Vue
import Vue from 'vue'
// 引入图鸟UI框架
import TuniaoUI from 'tuniao-ui'
// 使用图鸟UI
Vue.use(TuniaoUI)

// 引入Vuex Store
import store from './store'

// 若有使用到图鸟UI的特殊配置或混入，则可能需要以下步骤：
// let vuexStore = require('@/store/$tn/mixin.js')
// Vue.mixin(vuexStore)

// 创建Vue实例
new Vue({
    store,
    render: h => h(App)
}).$mount()

通过以上步骤，图鸟UI的全局功能就被激活，并且应用程序能够使用其中的所有组件和服务。

3. 项目的配置文件介绍

pages.json

• 重要配置: 此文件主要用于管理和配置uni-app的页面路由。在这里，你也可以指定easycom规则以自动化加载图鸟UI组件，确保每次引入组件时不需要手动导入每个组件。

  {
      "easycom": {
          "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"
      },
      "pages": [
          // 其他页面配置...
      ]
  }
  

.gitignore

• 忽略文件: 这个文件列出了在提交到Git仓库时不希望被跟踪的文件类型或特定文件名，例如一些本地配置或生成的文件，保持仓库干净有序。

通过以上指南，你可以快速理解和设置图鸟UI项目，有效地利用其丰富的组件库和模板，加快你的uni-app开发进程。记得在实际开发过程中，根据官方文档进行详细配置以充分利用所有特性和功能。