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: ‘/‘, 为 ‘./
加油宝宝们~
