–Vue-cli引入lib-flexible&&ElementUI

Vue-cli引入lib-flexible&&ElementUI

2018年1月23日 18:27:19 好久不见我的小伙伴们,从毕业到参加参加工作已经三个月了,这段时间过的很有意义哈哈 参加工作为了快速上手项目这两个月都是996,学到了 很多好东西,接下来的日子不加班我就晚上回去把他们分享出来,摸摸哒~


移动端自适应 来自手淘的 flexible

cnpm i lib-flexible -S cnpm install px2rem-loader -S-d

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

// main.js import ‘lib-flexible’

搞定后到开发者工具查看根节点有没有添加data-dpr=”1”来判断是否引入成功

lib-flexible引入完成,下面引入方便一个插件px2rem-loader 接下来引入开发用的 px转rem插件

// build/utils.js var cssLoader = { loader: ‘css-loader’, options: { minimize: process.env.NODE_ENV === ‘production’, sourceMap: options.sourceMap } } var px2remLoader = { loader: ‘px2rem-loader’, options: { remUnit: 75 } } // …

放进 loaders 数组中

// utils.js function generateLoaders(loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] // …

修改配置后需要重启,然后我们在组件中写单位直接写 px , 设计稿多少就写多少 , 自动转rpx,美滋滋哈哈 搞定后到开发者工具查看css中的px是否转换为rem来判断是否引入成功


Vue引入饿了么ElementUI Element-ui 中文文档 下面教程 快速上手

npm i element-ui -S //main.js import Vue from ‘vue’ import App from ‘./App’ import router from ‘./router’ import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.config.productionTip = false / eslint-disable no-new / Vue.use(ElementUI) //.Vue中直接使用 默认按钮 主要按钮 文字按钮


npm run dev 后显示空白修改config/index.js 中 build对象中的assetsPublicPath: ‘/‘, 为 ‘./

加油宝宝们~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

如何阅读大型前端开源项目的源码,授人以鱼不如授人以渔

目前网上有很多「XX源码分析」这样的文章,不过这些文章分析源码的范围有限,有时候讲的内容不是读者最关心的。同时我也注意到,源码是在不断更新的,文章里写的源码往往...

481
来自专栏pangguoming

最火的Android开源项目整理

一、代码库 1、from  代码家 整理比较好的源码连接 ***************************************************...

4244
来自专栏葡萄城控件技术团队

Webpack4干货分享(二),使用loader处理scss,图片以及转换JS

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

1072
来自专栏FreeBuf

登录框的另类思考:来自客户端的欺骗

前几天刚见人发了《一个登录框引发的血案》,而常规的爆破有风控和各种变态验证码,或者大型的电商都会用SSO实现登录,密码找回逻辑看似天衣无缝,又或者采用第三方的O...

980
来自专栏张善友的专栏

ScintillaNET 需要帮助

Scintilla是一个免费的源代码编辑控件,它完全开放源代码,并且提供一个license允许用户自由地将它用在开源软件或是商业软件中。作为源代码编辑控件,我...

1999
来自专栏社区的朋友们

企鹅社区移动版Vue2.0升级手记

引入Vue框架比较早,随着2.0的升级,受到业界的高度关注,应用也越来越广泛,所以我们也得跟上步伐。企鹅社区移动版前端采用VUE 1.0开发。随着官方2.0的推...

2.5K0
来自专栏企鹅号快讯

从Npm Script到Webpack,6种常见的前端构建工具对比

小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用...

2406
来自专栏皮振伟的专栏

[linux][network]ICMP协议分析

前言: ICMP比较基础,说简单不简单,说难不难。 简单在于字段少,不能携带用户数据,没什么地方可以玩出太多花样;一般和它相关的就是ping和tracerout...

3216
来自专栏大数据钻研

大福利!献给网页开发者的20款Firefox插件

毫无疑问,比起其他浏览器,谷歌浏览器虽有着明显的优势,但是它的劲敌火狐却是很多前端攻城师和研发人员的挚爱,为了尽可能地提高用户体验,火狐浏览器的社区在插件开发和...

41811
来自专栏程序员的SOD蜜

.NET DLR 上的IronScheme 语言互操作&&IronScheme控制台输入中文的问题

前言 一直以来对Lisp语言怀有很崇敬的心里,《黑客与画家》对Lisp更是推崇备至,虽然看了不少有关Lisp的介绍但都没有机会去写段程序试试,就像我对C++一样...

2566

扫码关注云+社区