安装vue-cli3脚手架
npm install -g @vue/cli
vue create 项目名
vue create wangyiyun
如果报错,提示***~~~~~~regiregi 什么之类的那就配置yarn的国内镜像源
使用sass做css编译
如果报错,可能没有安装css-loader,yarn add sass-loader node-sass
过滤器的使用,应当全局使用
filters目录下
import Vue from 'vue'
Vue.filter('countFilter',function(count){//播放人数过滤成万单位
return Math.floor(count / 10000) + '万'
})
vue组件中要过滤的地方
{{ item.playCount | countFilter }}
vuex使用
安装
yarn add vuex
style的使用
axios过滤器的使用
如果在npmjs中找,就需要找到axios在搜索Interceptors
main.js
//axios拦截器
import axios from 'axios'
import { Indicator } from 'mint-ui';
// Add a request 拦截器
axios.interceptors.request.use(function (config) {
// Do something before request is sent
Indicator.open({//自己添加的加载
text: '加载中...',
spinnerType: 'fading-circle'
});
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response 拦截器
axios.interceptors.response.use(function (response) {
// Do something with response data
Indicator.close()//开了是要关的
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
style里引入另一个style文件(~是必要的)
@import ‘~Css/_eliplise.styl’
元素莫名高度太大,flex造成的,父元素设置font-size:0
lazyload图片懒加载,vue中的图片懒加载
main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
loading: require('Img/default.png')
})
~~.vue组件中
<img :alt = " item.name " v-lazy=" item.song.album.picUrl "/>