Vue3 学习笔记

HMR更新原理

if(module.hot){
    module.hot.accept("./js/element.js",() => {
        console.log("element模块发生了更新")
    }
}

//webpack.config.js
devServer: {
    // 当从内存中没找到对应资源会去 public文件夹下找
    contentBase: './public',
    hot: true, //是否热更新,对应上面的module.hot
    /**
    * 默认值是localhost
    * 如果希望其他地方也可以访问，可以设置为0.0.0.0
    */
    host: 0.0.0.0,
    port: 8080,
    open: true, //自动打开浏览器
    proxy:{
        '^/api':{
            //表示的是代理到的目标地址，/api/moment会被代理到 http://localhost:8888/api/moment
            target: 'localhost:8888',
            //默认情况下，/api也会被写入到URL中，如果希望删除，如 /api/moment 回代理到 http://localhost:8888/moment
            pathRewrite: {
                '^/api': ''
            }
            //默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false
            secure: 
            // 表示是否更新代理后请求的headers中host地址
            changeOrigin: true
        }
    }
    
}

module为全局变量，监视element.js文件是否更新，更新会执行回调方法，vue-loader,此loader支持vue组件的HMR，（React,使用react-refresh)

scss

1. scss变量拼接

  $namespace: ace;
  $prefixCls: '#{$namespace}-login';

  .#{$prefixCls} {
    min-height: 100%;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* background-image: url(/@/assets/svg/login-bg.svg); */
    }
  }