大屏项目记录

刘双狗

已于 2023-10-19 15:38:14 修改

阅读量752

点赞数

分类专栏： vue 文章标签： vue 数据可视化

于 2020-12-11 17:38:31 首次发布

本文链接：https://blog.csdn.net/qq_33218955/article/details/110438058

版权

本文记录了一个Vue大屏项目的适配过程，包括移动端适配步骤、配置px弹性适配、安装与配置Sass、解决Highcharts报错及引入更多图表形状。同时介绍了使用vue-seamless-scroll实现滚动效果和翻盘效果。

摘要由CSDN通过智能技术生成

建项

vue 报错暴力解决 npm install -g @vue/cli --force

vue init webpack data-sharing

npm install

npm run dev

参考lib-flexible适配大屏方案（附移动端适配） - 简书

2. 移动端适配步骤

一般而言，lib-flexible并不独立出现，而是搭配px2rem-loader一起做适配方案，目的是自动将css中的px转换成rem。以下为它在vue中的使用。

2.1 安装 lib-flexible
npm install lib-flexible --save-dev
2.2 引入 lib-flexible

在main.js中引入lib-flexible
// px2rem 自适应
import 'lib-flexible'
2.3 安装 px2rem-loader
npm install px2rem-loader --save-dev

配置px弹性适配（参考使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem - 吃火鸡的馒头 - 博客园）

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

在main.js中

import 'amfe-flexible'

vue-cli2在.postcss.js文件中的plugins下新增postcss-pxtorem的配置（ vue3没有这个文件就新增一个）

module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 192, // 根据设计图尺寸写，设计图是1920，就写192
propList: ['*'], // 需要被转换的属性
selectorBlackList: [] // 不进行px转换的选择器
}
}
}

安装sass（参考Vue中安装sass依赖,style引用出现报错。sass-loader高版本的坑 - dream00 - 博客园）

我安装sass就没有一次成功过得时候，总结经验报错原因是sass版本过高导致的编译报错。（webpack报错：Unhandled promise rejections are deprecated. ）

npm install --save-dev sass-loader@7.0.3 --save-dev

（为了避免报错在这一步最好指定版本例 npm install sass-loader@7.0.3 --save-dev）
//sass-loader依赖于node-sass
npm install --save-dev node-sass@6.0.1
解决办法
npm uninstall sass-loader࿰