vue/cli 3.0 脚手架【进阶】使用 amfe-flexible 和 postcss-px2rem进行移动端适

2024-05-17 12:38:55

安装vue-cli3

　　 npm install -g @vue/cli

创建项目 vue-cli-test

　　

　　

脚手架-项目-成功-运行项目

　　

　　

基于vue-cli配置移动端自适应
转自：http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/　　
　配置 flexible

　　　安装 amfe-flexible

　　　　在命令行中运行如下安装：

　　　　npm install --save amfe-flexible

　　

　　安装完 package.json会添加这个依赖

　　

引入 lib-flexible

　　　　在项目入口文件 main.js 里引入 lib-flexible　

import 'amfe-flexible'

　　

　　运行后每个尺寸都对应font-size

添加 meta 标签

　　　　在项目根目录的 index.html 中添加如下 meta　　　　

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem

　　实际开发中，我们通过设计稿得到的值单位是 px，所以要将 px 转换成 rem 再写进样式中。在项目中只需要写px，运行后会自动转化成rem，
　　将 px 转换成 rem 我们将使用 px2rem 这个工具，postcss-px2rem

安装 postcss-px2rem

　　在命令行中运行如下安装：　

npm install postcss-px2rem --save

　　安装完 package.json变化如下：

　　

　　若有需要就这么配置

　　

"postcss-px2rem": {"remUnit": 37.5
}

　　

报错Can’t resolve ‘stylus-loader’，原来是因为我没有安装stylus和stylus-loader。

　　

　　使用如下命令安装stylus和stylus-loader：　　

npm install stylus stylus-loader --save-dev

　

　安装成功后，使用npm install重新建立依赖：

npm install

　　打开项目代码，找到package.json,查看文件中是否已经添加stylus和stylus-loader的版本信息。

　　

　　npm run serve 运行项目即可

　　

　　安装vue-router

npm install vue-router

　　在main.js中引入

import VueRouter from 'vue-router'Vue.use(VueRouter)

　　【返回】js　

back(){this.$router.go(-1)
},

转载于:https://www.cnblogs.com/dudu123/p/10197242.html

vue/cli 3.0 脚手架【进阶】使用 amfe-flexible 和 postcss-px2rem进行移动端适相关推荐

Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
专访Vue作者尤雨溪：Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
@vue/cli 3.0 eslint 转成tslint
我们用 vue/cli 创建新项目的时候,通常会选择代码检查工具 [eslint|tslint],有的时候难免会选错,这个时候想要替换,怎么办场景再现 vue create lint-vue 为了方 ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...

最新文章

热门文章