vue2和vue3要点记录

vue2和vue3要点记录

1. vue2数据更新视图不更新——原因就是底层的原理，后添加的属性监听不倒   $set或$forceUpdate
2. vue3使用的proxy原理，直接监听对象，相当于给对象包了一层，访问或修改都要访问proxy对象，所以对象后添加的属性和数组下标改值都是可以监听到

1.双向绑定原理不同(数据更新方式不同)
vue3的性能得到了核心提升
2.v-for和v-if的优先级不同i
3.父子组件访问不同 ref组件实例 $parent 
4 获取到全局的this,vue3先暴露defineExpose使用getCurrentInstance，这样可以获取全局this,比如全局loding方法的封装  还有     import { getCurrentInstance } from 'vue'
		getCurrentInstance().appContext.config.globalProperties.$xxxxxxx;
5. 事件修饰符取消了native是ui组件库的事件穿透 过滤器取消了
6. 生命周期 / api /宏     ts的支持 函数调用 fragment片段的使用
7,diff算法 模块的重新组织和静态分析，实现了更好的Tree shaking效果，减少了生成的最终包的大小 缓存机制
项目打包和优化
路径问题  publicPath 地址
路由模式 UI组件库的按需引入
大包抽离，小包压缩 关闭map映射文件
环境变量
安装预览可视化插件


在 Vue CLI 中，入口文件的配置是通过 main.js（或 main.ts，如果使用 TypeScript）来指定的，而不是通过 entry 属性来配置。这是因为 Vue CLI 是一个约定优于配置的工具，它有默认的项目结构和配置规则。
在 Vue CLI 项目中，main.js（或 main.ts）是应用程序的主入口文件，所有的逻辑都会从这个文件开始执行。这个文件会通过导入 Vue 实例并挂载到 DOM 中的一个容器元素上，从而启动整个应用程序。
虽然你可以在 vue.config.js 文件中配置许多构建选项，但是 Vue CLI已经预设了一套默认的配置，包括入口文件的位置和命名规则，因此在大多数情况下，你不需要显式地配置入口文件。
如果你希望自定义入口文件的位置或命名规则，你可以通过修改 vue.config.js 文件来实现。

/* 引入打包分析插件 */
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
/* 引入压缩插件 但是导致项目启动的比较慢*/
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

let isProduction = process.env.NODE_ENV === 'production'; // 判断是否是生产环境
let isTest = process.env.NODE_ENV === 'test'; // 判断是否是测试环境

// 服务端ip  -- Uat环境
const api = 'http://10.1.12.181:26341';
// 自己启动的node服务 代理到本地
const nodeApi = 'http://127.0.0.1:3000';

module.exports = {
  /* 打包后的文件夹名字及路径  根目录下 */
  outputDir: 'dist/video',

  /* 部署应用包时的基本 URL 生产的项目名   development是开发环境 可以用三元运算符  */
  publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',

  /* 保存时是否校验 */
  lintOnSave: false,

  /* 开发环境跨域情况的代理配置 */
  devServer: {
    https: false,   // 链接是否使用https访问 但可能在微信中不能打开（安全性问题） 不写此行配置默认 使用http协议打开
    port: '31001',  // 指定要监听请求的端口号
    open: true,     // 是否运行好直接在默认浏览器打开
    inline: true,   // 用于设置代码保存时是否自动刷新页面。
    hot: true,      // 用于设置代码保存时是否进行热更新（局部刷新，不刷新整个页面）

    disableHostCheck: true, //可以被外网访问

    /* 当出现编译器错误或警告时，在浏览器中显示全屏覆盖层。默认禁用。两种写法*/
    // overlay: true, // 第一种
    overlay: {
      //第二种
      warnings: false, //是否警告
      errors: false,
    },

    /* 接口代理器设置 可以配置多个*/
    proxy: {
      '/backend': {
        // 实际访问的服务器地址
        target: nodeApi,
        // 控制服务器收到的请求头中Host字段的值  host就是主机名加端口号  实际上就是欺骗后端服务器
        changeOrigin: true,
        // 是否启用websockets
        ws: false,
        // 重写请求路径  开头是/api的替换为 空串
        // pathRewrite: { '/api': '' },
      },
    },
  },

  /* css相关设置 */
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin  开启extract后，组件样式以内部样式表的形式加载的, 打包的结果会多出一个 css 文件夹以及css 文件。
    sourceMap: true, // 开启 CSS source maps?

    /* 向所有 Sass/Less 样式传入共享的全局变量 */
    loaderOptions: {
      //注意：在 sass-loader v8 中，这个选项名是 "prependData"  global.scss这里面定义的是一些全局变量
      scss: {
        prependData: '@import "~@/assets/scss/global.scss";',
      },
    },
  },

  /* webpack相关配置
   *该对象将会被 webpack-merge 合并入最终的 webpack 配置
   */
  configureWebpack: (config) => {
    // 生产环境配置
    if (process.env.NODE_ENV === 'production') {
      /* js 压缩 */
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            uglifyOptions: {
              compress: {
                drop_debugger: true,
                drop_console: true, // 生产环境自动删除console
              },
              warnings: false,
            },
            sourceMap: false,
            parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
          },
        })
      );
    } else {
      // 测试环境开启打包分析
      config.plugins.push(new BundleAnalyzerPlugin());
    }
  },

  /* 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作) */
  chainWebpack: (config) => {
    /* 关闭 console.log 生产环境
    如果为了安全起见，需要在正式环境关闭调试的话，可以在vue.config.js文件里加入以下代码*/
    config.optimization.minimizer('terser').tap((args) => {
      // 移除 console*
      args[0].terserOptions.compress.drop_console = true;
      // 移除 debugger
      args[0].terserOptions.compress.drop_debugger = true;
      // 移除 console.log
      args[0].terserOptions.compress.pure_funcs = ['console.log'];
      // 去掉注释 如果需要看chunk-vendors公共部分插件，可以注释掉就可以看到注释了
      args[0].terserOptions.output = {
        comments: false,
      };
      return args;
    });

    // 设置路径别名 
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
     

    // 压缩图片插件
    config.module
      .rule('images')
      /* 注意会报这个错误 Cannot find module 'imagemin-gifsicle' 需要下载cnpm install --save-dev image-webpack-loader 才有效*/
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.8, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 },
      });

  },

  /* 第三方插件配置 */
  pluginOptions: {
    'process.env': {
      NODE_ENV: '"development"',
    },
    // 我这里用的是 vue-cli-plugin-mock 插件；用来开发前期模拟后端的请求
    // debug 为true时 vscode的控制台会打印接口日志
    // mock: { entry: './mock/index.js', debug: false },
  },
};