懒人自适应+懒人导航路由进度条

基本使用没啥问题，用起来很舒服，但是会有些小坑

1.安装lib-flexible

npm i lib-flexible --save
npm install px2rem-loader --save-dev
npm i nprogress

2.在项目入口文件main.js中引入
import 'lib-flexible/flexible.js'
import '/permission.ts'

vue.config.js，然后如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import px2rem from "postcss-px2rem"  // 分辨率适配
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, './src')
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
  },
  server: {
    port: 80,
    host: true,
    open: true,
  },
  css: {
    postcss: {
      plugins: [
        px2rem({
          remUnit: 204
        })
      ]
    }
  },
})

 

3.创建permission.ts

import router from '@/router/index.ts'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // 不加样式不显示
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
    // console.log(to, from)
    NProgress.start()
    next()
})
router.afterEach((to, from, next) => {
    // console.log(to, from)
    NProgress.done()
})

 

tips：自适应需要调整的找到源文件的包进行修改，包括进度条的样式也可以在源文件种修改样式