【vue】插件

  1. 瀑布流
npm i vue-waterfall2@latest --save
  1. 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: ['*']
    }
  }
}
  1. 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)
})
  1. Vue项目中使用手机网页的前端 console 调试面板
npm install vconsole
  1. vue项目实现剪切板功能
npm install --save vue-clipboard2
  1. vue+vue-cropper实现上传剪裁图片
npm install vue-cropper
​
yarn add vue-cropper
上一篇:ORA-01105 ORA-01677解决方法和原因


下一篇:【EZCONNECT】 sqlnet.ora文件中EZCONNECT参数与Easy Connect Naming Method方法