基于idea实现vuecli4的屏幕自适应

最新推荐文章于 2024-03-20 08:30:00 发布
最新推荐文章于 2024-03-20 08:30:00 发布
阅读量233 收藏
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45228330/article/details/115262719
版权

基于idea实现vuecli4的屏幕自适应

1.安装amfe-flexible模块

amfe-flexible：是rem的适配插件。
由于直接用npm安装老是出错，于是我用了淘宝镜像安装

1.1淘宝镜像

打开idea终端Terminal输入下面的代码进行安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完后使用 cnpm i xxx 代替 npm install xxx就可以了

1.2安装模块

一、安装模块

cnpm install amfe-flexible postcss-
最低0.47元/天 解锁文章
雾横
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Intellij IDEA搭建vue-cli项目的方法步骤
12-12
vue-cli对于node和npm的版本是有要求的。 可以通过 node -v （npm -v）查看当前版本，通过 where node （where npm）查看安装路径。 如果node版本不符合vue-cli的要求，那么可以在node官网下载稳定版本并安装。 ...
高分屏使用IDEA的缩放优化
cflsup的博客
12-24 1988
关于4K屏下IDEA的显示太小的解决方案。
vue 实现自适应屏幕
m0_58405110的博客
01-28 3559
vue 实现自适应屏幕
网页图像的自适应问题（实验室）
starspicking的博客
07-27 75
1.插件（px2rem） 在idea的设置里下载 用途是将原本固定的px单位变成随根节点大小可变的rem单位 使用alt+D的快捷键 最后需要在设置里修改 图像所需分辨率的长与宽 并根据另一函数的写跟节点的大小（一般为宽/10） 2.插件 在package.js里写入插件 “ lib-flexible ” 并加上版本号。在main.js里调用就可以了 用途是改变根节点的大小 ...
idea开发SSM框架的高校大学学生社团管理网站bootstrap自适应响应式前端(javaweb-php-asp.netC#-j2ee)包含公告管理-社团活动管理-社团申请管理-社团审核-活动报名
计算机程序开发设计
12-31 645
目录 0、效果展示 1、概述 2、社团管理网站搭建环境 3、数据表结构 ​4、后端代码示例 5、前端代码示例 0、效果展示 1、概述 高校学生社团是高校学生依据兴趣爱好自愿组成，按照章程自主开展活动的学生组织。学生社团是高校校园文化的重要载体，是高校第二课堂的重要组成部分，参与学生社团，是学生丰富校园生活，培养兴趣爱好，扩大求知领域，增加交际范围，充实内心世界的重要方式。它既是学生思想政治工作的一个渠道，又是高校育人的有效途径；它对于...
IntelliJ IDEA在vue-cli4下，以@开头的文件路径，按ctrl+鼠标左键的跳转的方案
weixin_42471170的博客
04-28 1490
1.在项目的根目录下，新建webpack.config.js文件 编写代码： const path = require('path') module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src') } } } 2.在编辑的file>setting>languages&Frameworks菜单下，配置javascript的Webpack的配置文件路径为，第一步所创
基于vue-cli脚手架整合echarts5创建的水球图案例
07-19
在本文中，我们将深入探讨如何基于Vue CLI搭建的项目中整合ECharts5并实现水球图的案例。Vue CLI是一个强大的脚手架工具，用于快速搭建Vue.js项目，而ECharts5则是一款优秀的数据可视化库，它提供了丰富的图表类型，...
从0搭建vue-cli4脚手架
11-20
Vue CLI 4 是其最新的稳定版本，提供了许多自动化构建功能，如项目模板、配置管理、代码生成等，极大地提高了开发效率。 首先，搭建 Vue CLI 4 脚手架之前，你需要确保已经安装了 Node.js。Node.js 是一个基于 ...
idea打开vue项目卡.doc
最新发布
03-20
idea打开vue项目卡.doc
ideapx2rem:想法xxxpx-> xxxrem
05-01
ideapx2rem 最近在切图 每次都要手动计算px转rem很麻烦 找了webpack的px2rem插件发现配置很麻烦 一不小心就把一些ui的样式也转了 所以就动手写了个这个东西 #食用 1打开idea 连击shift在搜索框中搜索plugins 2在搜索框搜索ideapx2rem安装 3在写移动端样式的时候书写150px 并且选中 然后点击按alt+d会自动变成2rem #更新调试方法 git clone 项目之后 project structure 点击加号 重新设置一下classpath 然后选择选择一个out目录就可以挑食了 #pis 原来写了插件真的会有人用会有人看... 今天有个兄弟加我qq问我插件的问题 突然来了一股成就感 这周末一定要抽空把配置项添加到idea窗口里 #后续开发规划 插件第一版上线 在idea window中添加配置选项 从光标往前搜索到空格自动转换
idea vuejs插件
05-27
idea vuejs插件
实用的IDEA配置和操作技巧总结
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
03-20 3226
如下图所示，打出勾选的字母就会弹出白色框中的代码段，所以如果我们有希望可以快捷输出的代码也可以自己制作一个代码模板。
idea设置代码根据屏幕的大小自适应换行
热门推荐
今晚摸鱼
03-19 1万+
idea设置代码根据屏幕的大小自适应换行有两种设置方式1.对单个文件2.设置全局的自动换行3.效果 有两种设置方式 1.对单个文件 `View > Active Editor > Use Soft Wraps` 2.设置全局的自动换行 打开设置，依次按照下图找到File > Settings > Editor > General > Soft Wraos然后...
如何在vue中使用flexible
xixi的博客
08-28 9929
1. 安装lib-flexible npm i lib-flexible --save 2. 在项目入口文件main.js里引入lib-flexible import 'lib-flexible/flexible.js' 3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签 // 删除 <meta name="viewport" content="width=device-width, initial-scale=
彻底解决 intellij IDEA 卡顿 优化笔记
diyu8056的博客
11-26 1万+
由于工作中经常出现分支各种切换，使用Eclipse便不再像以前那么舒服了，不停的修改工作空间，每次修改完工作空间又是一堆一堆的个性化设置，来回的切换，真的很累。我们做软件的，怎么能不去尝试新鲜的呢，毕竟，再难走的路，也有人已经走过，我们只需要Google一下而已。 本篇适用于Idea 14.x 15.x 16.x 这次在使用了2天的IDEA之后，我发现这玩意简直屌爆了！ 这次我重新进行征...
vue-cli4屏幕自适应
qq_14847103的博客
12-04 672
运行环境 vue/cli版本 4.5.6 amfe-flexible版本2.2.1 postcss-loader版本4.1.0 postcss-px2rem版本0.3.0 1.安装amfe-flexible模块 npm i -S amfe-flexible 2.安装postcss-px2rem npm install postcss-loader npm install postcss-px2rem 3.在main.js引入amfe-flexible import 'amfe-flexible' 4.
vue-cli4实现自适应布局
qq_39241544的博客
05-07 2029
原理 webpack打包时，通过postcss-pxtorem插件，将原先写的px单位转换成rem，然后通过amfe-flexible插件监听窗口变化，设置根元素得fontSize，实现自适应效果 安装 cnpm i amfe-flexible -S // 需要打包进项目 -S cnpm i postcss-pxtorem -D // 只需要本地使用 -D 配置 在项目vue.config.js...
IDEA小设置
xiaoyezhiei的博客
12-28 8260
1、改变IDEA风格 2、改变IDEA任务栏字体样式和大小 3、改变IDEA字体样式和大小 4、怎么在创建包的时候自动把包分开 5、显示当前文件夹在我的电脑中的位置 6、设置顶部页面多行显示 7、显示谁提交的代码 8、设置service放在下方窗口栏 9、在Git的update和commit旁边加上一个push按钮 10、显示Commit 11、自动去掉无效引用
idea运行 vue-cli-service 不是内部或外部命令
12-14
这个错误消息表明你的系统无法识别 'vue-cli-service' 命令，也就是说系统中没有找到对应的可执行文件。这通常是因为你没有在全局安装vue-cli或者没有将vue-cli添加到系统环境变量中。你可以尝试以下几个步骤来解决...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值