一种搭建区块数据展示移动端软件的方法技术

本申请公开了一种搭建区块数据展示移动端软件的方法

【技术实现步骤摘要】
一种搭建区块数据展示移动端软件的方法、设备及介质


[0001]本申请涉及软件开发
，尤其涉及一种搭建区块数据展示移动端软件的方法
、
设备及介质
。

技术介绍

[0002]基于区块链技术的蓬勃发展，区块链快速运用到各行业，区块链的数据展示是一个可以直观看到区块链过程的展示，目前大多区块链数据展示都是通过
PC
端网页搭建区块链浏览器或者区块链大屏，但
PC
端存在不能随时浏览，展示不便的缺陷
。
[0003]因此，如何搭建一套可以在移动端进行区块数据展示的软件成为亟待解决的技术问题
。

技术实现思路

[0004]本申请实施例提供了一种搭建区块数据展示移动端软件的方法
、
设备及介质，用以解决如下技术问题：如何搭建一套可以在移动端进行区块数据展示的软件
。
[0005]第一方面，本申请实施例提供了一种搭建区块数据展示移动端软件的方法，方法包括：基于前端构建工具
vite
，创建
vue3
项目；创建环境变量文件，并基于前端构建工具
vite
的预置配置文件，使
web
页面文件能够使用环境变量文件；下载
CSS
预处理器
SASS
，并基于
CSS
预处理器
SASS
，编写移动端软件样式；基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件；对
vue3
项目进行打包上线
。
[0006]在本申请的一种实现方式中，基于
CSS
预处理器
SASS
，编写移动端软件样式，具体包括：在
vue3
项目的源代码文件下创建样式文件夹；在样式文件夹中创建公共样式文件夹与自定义样式文件夹，用于放置移动端软件公共样式与自定义样式；在预置配置文件中分别添加公共样式文件夹与自定义样式文件夹的绝对路径，以使移动端软件公共样式与自定义样式中定义的变量能够全局使用
。
[0007]在本申请的一种实现方式中，基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件，具体包括：在
vue3
项目的根目录下创建
CSS
代码转换插件的配置文件；在项目入口文件以及
CSS
代码转换插件的配置文件中引入
rem
动态布局适配文件；下载
rem
单位生成插件
postcss
‑
pxtorem
，并在根目录中创建
PostCSS
配置文件，以将
rem
单位生成插件
postcss
‑
pxtorem
引入
vue3
项目
。
[0008]在本申请的一种实现方式中，在基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，方法还包括：添加
Vue Router
路由功能，具体包括：下载
Vue Router
依赖包；在
vue3
项目的源代码文件下创建
router
文件夹，并在
router
文件夹下创建
index.js
文件来配置路由信息；在
index.js
文件中引入路由创建方法
creatRouter
；根据对应的软件开发需求，建立对应的页面路径；在项目入口文件中引入
router
，并在对应页面配置对应页面出口
。
[0009]在本申请的一种实现方式中，在基于前端构建工具
vite
的
CSS
代码转换插件，应用
配置
rem
动态布局适配文件之后，方法还包括：配置
Pinia
状态管理库，具体包括：安装
Pinia
状态管理库；在
vue3
项目的源代码文件下创建
store
文件夹，并在
store
文件夹下创建
index.js
文件；在
index.js
文件中引入
Pinia
创建方法
cretePinia
，以通过
Pinia
创建方法
cretePinia
创建
Pinia
并导出
Pinia
；在项目入口文件中引入
store
，以实现挂载；在
store
文件夹下创建
modules
文件夹，并根据预设的数据保存需求在
modules
下创建对应数据模块；在页面需要使用数据模块的数据时，基于数据调用指令调用数据模块中的数据
。
[0010]在本申请的一种实现方式中，在基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，方法还包括：配置
axios
网络请求库，具体包括：安装
axios
网络请求库；在
vue3
项目的源代码文件下创建
utils
文件夹来存储工具类文件，并在
utlis
文件夹下创建请求文件
request.js
；在
utils
文件夹中创建
axios
实例，并根据后端接口来定义
requset
拦截器和响应拦截器；在
vue3
项目的源代码文件下创建
api
文件夹存储后端接口
。
[0011]在本申请的一种实现方式中，在基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，方法还包括：配置图形可视化插件
echarts
，具体包括：安装图形可视化插件
echarts
；在开发页面通过图形可视化插件调用指令，引入图形可视化插件
echarts。
[0012]在本申请的一种实现方式中，在基于前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，方法还包括：在
vue3
项目的源代码文件下创建
view
文件夹，并本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种搭建区块数据展示移动端软件的方法，其特征在于，所述方法包括：基于前端构建工具
vite
，创建
vue3
项目；创建环境变量文件，并基于所述前端构建工具
vite
的预置配置文件，使
web
页面文件能够使用所述环境变量文件；下载
CSS
预处理器
SASS
，并基于所述
CSS
预处理器
SASS
，编写移动端软件样式；基于所述前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件；对所述
vue3
项目进行打包上线
。2.
根据权利要求1所述的一种搭建区块数据展示移动端软件的方法，其特征在于，基于所述
CSS
预处理器
SASS
，编写移动端软件样式，具体包括：在所述
vue3
项目的源代码文件下创建样式文件夹；在所述样式文件夹中创建公共样式文件夹与自定义样式文件夹，用于放置移动端软件公共样式与自定义样式；在所述预置配置文件中分别添加所述公共样式文件夹与所述自定义样式文件夹的绝对路径，以使所述移动端软件公共样式与自定义样式中定义的变量能够全局使用
。3.
根据权利要求1所述的一种搭建区块数据展示移动端软件的方法，其特征在于，基于所述前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件，具体包括：在所述
vue3
项目的根目录下创建
CSS
代码转换插件的配置文件；在项目入口文件以及所述
CSS
代码转换插件的配置文件中引入所述
rem
动态布局适配文件；下载
rem
单位生成插件
postcss
‑
pxtorem
，并在根目录中创建
PostCSS
配置文件，以将所述
rem
单位生成插件
postcss
‑
pxtorem
引入所述
vue3
项目
。4.
根据权利要求1所述的一种搭建区块数据展示移动端软件的方法，其特征在于，在基于所述前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，所述方法还包括：添加
Vue Router
路由功能，具体包括：下载
Vue Router
依赖包；在所述
vue3
项目的源代码文件下创建
router
文件夹，并在所述
router
文件夹下创建
index.js
文件来配置路由信息；在所述
index.js
文件中引入路由创建方法
creatRouter
；根据对应的软件开发需求，建立对应的页面路径；在项目入口文件中引入
router
，并在对应页面配置对应页面出口
。5.
根据权利要求1所述的一种搭建区块数据展示移动端软件的方法，其特征在于，在基于所述前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，所述方法还包括：配置
Pinia
状态管理库，具体包括：安装
Pinia
状态管理库；在所述
vue3
项目的源代码文件下创建
store
文件夹，并在所述
store
文件夹下创建
index.js
文件；在所述
index.js
文件中引入
Pinia
创建方法
cretePinia
，以通过所述
Pinia
创建方法
cretePinia
创建
Pinia
并导出
Pinia
；在项目入口文件中引入
store
，以实现挂载；在
store
文件夹下创建
modules
文件夹，并根据预设的数据保存需求在
modules
下创建对应数据模块；在页面需要使用所述数据模块的数据时，基于数据调用指令调用所述数据模块中的数据
。6.
根据权利要求1所述的一种搭建区块数据展示移动端软件的方法，其特征在于，在基于所述前端构建工具
vite
的
CSS
代码转换插件，应用配置
rem
动态布局适配文件之后，所述方法还包括：配置
axios
网络请求库，具体包括：安装
axios
网络请求库；在所述
vue3
项目的源代码文件下创建
util...

【专利技术属性】
技术研发人员：李凌峰，肖雪，商广勇，李程，马振，
申请(专利权)人：浪潮云洲工业互联网有限公司，
类型：发明
国别省市：