以下总结都是在自己学习过程中的记录,便于自己回忆
一。Element组件库 可参考:element官网
1.安装 element-ui
cnpm i element-ui -s
2. 采用按需引用
cnpm install babel-plugin-component -D
二。 swiper的使用 可参考地址:https://github.com/surmon-china/vue-awesome-swiper , www.swiper.com.cn
1.安装
npm install vue-awesome-swiper --save
2.引用
(1)在main.js 中全局引用
import Vue from ‘vue’
import VueAwesomeSwiper from ‘vue-awesome-swiper’
// require styles
import ‘swiper/dist/css/swiper.css’
Vue.use(VueAwesomeSwiper, /* { default global options } */)
(2)在组件在单独引用
// require styles
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’
export default {
components: {
swiper,
swiperSlide
}
}
3. 配置swiper
三。在vue中使用lazyload的方法 可参考地址: https://github.com/hilongjw/vue-lazyload
四。使用REM与Less
- 在index中书写下面js
(function(doc, win){
var docE1 = doc.documentElement;
reseizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘reseize’;
recalc = function(){
var clientWidth = docE1.clientWidth;
if(!clientWidth) return;
if(clientWidth >= 750){
docE1.style.fontSize = ‘100px’;
}else {
docE1.style.fontSize = 100 * (clientWidth / 750) + ‘px’;
}
};
if (!doc.addEventListener) return;
win.addEventListener(reseizeEvt, recalc, false);
win.addEventListener(‘DOMContentLoaded’, recalc, false);
})(document, window)
2. 安装style-loader css-loader
npm install --save-dev style-loader css-loader
3.配置webpack.base.cong.js
{
test: /.less$/,
use: [
“style-loader”,
“css-loader”,
“less-loader”
]
}
4.样式中使用
例如 200*300
.box{
width: 200 / 50rem;
height: 300 / 50rem;
background: red;
font-size: 16 / 50rem;
}