使用 vite 创建项目

vite 3.0 版本需要 node.js 16.0 以上

winpty  npm.cmd init vite@latest   // windows系统需要这样
winpty  npm.cmd init vite@2.8.0
or

npm init vite@latest
npm init vite@2.8.0

vite 配置

https://juejin.cn/post/7119455615840092173#heading-7

autoprefixer，css 自动前缀兼容

  css: {
    postcss: {
      plugins: [
        // css自动前缀兼容
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem'] // 过滤掉norem-开头的class，不进行rem转换
        })
      ]
    }
  },

webpack 的老版本 px 单位转 rem 单位做配置

1. npm install postcss-pxtorem --save-dev
2. 根目录 postcss.config.js 配置如下

module.exports = {
   plugins: {
    'autoprefixer': {  //浏览器css自动兼容前缀配置
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    },
  },
}

3. amfe-flexible 设置根字体大小 main.js 配置如下

import 'amfe-flexible'

文章

https://juejin.cn/post/6916304048505225223?utm_source=gold_browser_extension#heading-3

2. WebSocket 封装 https://juejin.cn/post/6896101154371928077

路由防卫

router.beforeEach(async (to, from, next) => {
  if (!to.matched.length) {
    next({
      path: '/404',
    })
  }
  // next({
  //   path: '/login',
  //   query: {
  //     redirect: to.fullPath   // 将跳转的路由path作为参数，登录成功后跳转到该路由
  //   }
  // })
  console.log(to,'to')
  console.log(from,'from')
  next()
})

yarn add axios vite-plugin-md vue-i18n vite-plugin-pwa  vue-router pinia vite-svg-loader   dayjs qs  @nutui/nutui

yarn add sass unplugin-auto-import unplugin-vue-components  vite-plugin-style-import  vite-plugin-mock mockjs  vite-plugin-vue-setup-extend   @vitejs/plugin-basic-ssl    --dev

打包分析

import vue from '@vitejs/plugin-vue'

/**
 * * 扩展setup插件，支持在script标签中使用name属性
 * usage: <script setup name="MyComp"></script>
 */
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// rollup打包分析插件
import visualizer from 'rollup-plugin-visualizer'



export function createVitePlugins(viteEnv, isBuild) {
  const plugins = [
    vue(),
    VueSetupExtend(),
  ]

  if (isBuild) {
    plugins.push(
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true,
      })
    )
  }

  return plugins
}