大数据展示项目```如果对您有用，烦请点个star，万分感谢。fork的大佬们，顺手点个star，谢谢。```font size=18 color=333/font最新版： [](https://imgtu.com/i/OGdJXT) 初版：升级版：修改：在vue3基础上，进行改写，应用vite在ts_version_base分支上，开发基础套用框架。新方向：webgl应用组件开发，引入shader贴图渲染。[预览 v1.0.0 版本（可预览）](https://mario4420.gitee.io/big-data-demo-dist-master)[预览 v1.0.1 版本（可预览）](http://mario4420.gitee.io/big-data-demo-dist/dist_v1.0.1//home)[预览 v1.0.2 版本（可预览）](http://mario4420.gitee.io/big-data-demo-dist/dist_v1.0.2//home)[预览 v1.0.3 版本（可预览）](http://mario4420.gitee.io/big-data-demo-dist/dist_v1.0.3//home)基于vue-cli编写开发 目录结构整个项目的目录结构如下，具体包含内容后续会进行详细介绍和解释 ├── public // 公共资源，第三方,不打包资源 ├── src // 源代码 │ ├── api // 所有请求相关资源 │ ├── assets // 静态资源，会打包的资源 │ ├── common // 通用配置，工具，mixins │ ├── components // 全局公用组件 │ ├── mock // mock server 数据 │ ├── plugin // 自定义插件，注入指令，全局mixin │ ├── router // 路由 │ ├── store // 全局 store │ ├── views // views 视图显示（错误页面，布局，登录） │ ├── App.vue // 入口页面 │ └── main.js // 入口文件 加载组件 初始化等 ├── .eslintrc.js // eslint 配置项 ├── .gitignore // git 忽略项 ├── babel.config.js // babel 配置项 ├── vue.config.js // vue-cli3集成配置项 └── package.json // package.json 安装```bash 克隆项目git clone https://github.com/***.git 安装依赖yarn install 本地开发 启动项目yarn run serve OR vue ui 图形化界面启动vue ui``` Vue项目中的文件/文件夹命名规范文件或文件夹的命名遵循以下原则：- index.js 或者 index.vue，统一使用小写字母开头的(kebab-case)命名规范- 属于组件或类的，统一使用大写字母开头的(PascalCase)命名规范- 其他非组件或类的，统一使用小写字母开头的(kebab-case)命名规范 文件夹命名规范**属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格**1. 全局通用的组件放在 /src/components下2. 其他业务页面中的组件，放在各自页面下的 ./components文件夹下3. 每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或index.js，其他.vue文件统一大写开头（Pascal case），components下的子文件夹名称统一大写开头（PascalCase）**其他文件夹统一使用kebab-case的风格****全局公共组件：/src/components示例**``` - [components] - [Breadcrumb] - index.vue - [Hamburger] - index.vue - [SvgIcon] - index.vue```**业务页面内部封装的组件：以 /src/views/layout/components示例**```-[src] - [views] - [layout] - [components] - [Sidebar] - index.vue - Item.vue - SidebarItem.vue - AppMain.vue - index.js - Navbar.vue````index.js 中导出组件方式如下：```javascriptexport { default as AppMain } from './AppMain'export { default as Navbar } from './Navbar'export { default as Sidebar } from './Sidebar'`````` 看index.js中最后一行代码，不难发现，为什么components下的子文件夹要使用PascalCase命名： export { default as Sidebar } from './sidebar' // 使用kebab-case命名的文件夹 export { default as Sidebar } from './Sidebar' // 使用 PascalCase命名的文件夹 对于组件的导出/导入，我们一般都是使用大写字母开头的PascalCase风格， 以区别于.vue组件内部的其他camelCase声明的变量， [Sidebar]作为【侧边栏组件】的一个整体被导出，文件夹的命名也采用PascalCase， 有利于index.js中export时的前后统一，避免很多情况下不注意区分大小写``` 文件命名规范 *.js文件命名规范1. 属于类的.js文件，除index.js外，使用PascalBase风格2. 其他类型的.js文件，使用kebab-case风格3. 属于Api的，统一加上Api后缀 *.vue文件命名规范1. 除index.vue之外，其他.vue文件统一用PascalBase风格总结一下：**文件夹：**1. 属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格，且最多一层2. 其他文件夹统一使用kebab-case的风格3. 如组件包含私有的组件、指令、mixin等则需要设置一个和组件名相同的文件夹，并将组件设置为index.vue，私有组件放置于当前文件夹**文件：**1. 除index.vue之外，其他.vue文件统一用PascalBase风格2. 属于类/组件的.js文件，除index.js外，使用PascalBase风格2. 其他类型的.js文件，使用kebab-case风格3. 属于Api的，统一加上Api后缀**style样式文件：**1. 统一使用kebab-case风格命名2. 内部类也统一用-连字符 数据结构系统概况 数据格式：```json{ code: 0, data: { label: this is mock value } }```