vue项目创建到启动

安装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 "/>