大数据展示项目教程-优快云博客

大数据展示项目教程

Big-Data-Demo 基于Vue、three.js、echarts，数据可视化展示项目，包含三维模型导入交互、三维模型标注等功能项目地址: https://gitcode.com/gh_mirrors/bi/Big-Data-Demo

1. 项目的目录结构及介绍

项目的目录结构如下：

Big-Data-Demo/
├── 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

public: 包含公共资源，如第三方库和不受打包影响的资源。
src: 源代码目录，包括所有项目相关的代码。
- api: 存放所有与请求相关的代码。
- assets: 包含静态资源，这些资源在打包时会被处理。
- common: 存放通用配置、工具函数和mixins。
- components: 全局公用组件。
- mock: 模拟服务器数据。
- plugin: 自定义插件，注入指令和全局mixin。
- router: Vue路由配置。
- store: Vuex状态管理。
- views: 视图层，包括错误页面、布局和登录页面。
- App.vue: 入口页面组件。
- main.js: 入口文件，负责加载组件和初始化操作。
.eslintrc.js: ESLint配置文件。
.gitignore: Git忽略文件列表。
babel.config.js: Babel配置文件。
vue.config.js: Vue CLI 3的集成配置项。
package.json: 包含项目的依赖和配置。

2. 项目的启动文件介绍

项目的启动文件是src/main.js。以下是该文件的主要功能：

引入Vue框架和App.vue组件。
引入Vue路由配置和Vuex状态管理。
挂载Vue实例到#app元素。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')