2018年1月23日 18:27:19
移动端自适应
来自手淘的 flexible
cnpm i lib-flexible -S
cnpm install px2rem-loader -S-d
在项目入口文件 main.js 里 引入 lib-flexible
// main.js
import 'lib-flexible'
mian.png
搞定后到开发者工具查看根节点有没有添加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]
// ...
utils.png
修改配置后需要重启，然后我们在组件中写单位直接写 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中直接使用
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>
npm run dev 后显示空白修改config/index.js 中 build对象中的assetsPublicPath: '/', 为 './
加油宝宝们~
