【vue】插件

1. 瀑布流

npm i vue-waterfall2@latest --save

2. Vue CLI 3 自适应解决方案

cnpm i amfe-flexible -S

配置amfe-flexible

//.main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'amfe-flexible'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装postcss-pxtorem
npm install postcss-pxtorem -D

设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ['*']
    }
  }
}

3. vue使用nprogress页面加载进度条

//main.js
import App from './App'
import VueRouter from 'vue-router'
import router from './router' //你的路由文件
//引入nprogress
import NProgress from 'nprogress' // 进度条
import 'nprogress/nprogress.css' //这个样式必须引入
​
Vue.use(VueRouter)
​
// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
​
router.beforeEach((to,from,next) => {
  NProgress.start() 
  next()
})
router.afterEach(() => {
  NProgress.done()
})
​
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

4. Vue项目中使用手机网页的前端 console 调试面板

npm install vconsole

5. vue项目实现剪切板功能

npm install --save vue-clipboard2

6. vue+vue-cropper实现上传剪裁图片

npm install vue-cropper
​
yarn add vue-cropper