vue的组件\依赖

梦里梦外; 2022-09-04 13:42 208阅读 0赞

**1 组件**  
默认的组件有

"dependencies": { 
      "core-js": "^3.6.5",
       "vue": "^2.6.11"
     },

添加组件

# 跨域访问
    yarn add axois
    # 页面框架
    yarn add element-ui
    # 模块化Lodash，按需加载babel插件
    yarn add babel-plugin-lodash
    # 开发环境可以用console在生产环境去掉，生产环境屏蔽掉日志输出，有一定安全防护
    yarn add babel-plugin-transform-remove-console
    # echarts图表
    yarn add echarts
    #  vue页面路由
    yarn add vue-router
    # vue状态管理
    yarn add vuex
    # 移动端自适应
    yarn add postcss-plugin-px2rem
    # 加解密
    yarn add jsencrypt
    # md5
    yarn add js-md5
    # cookie操作
    yarn add js-cookie
    # 进度条
    yarn add nprogress
    # 时间
    yarn add moment
    #
    yarn add file-loader
    #
    yarn add url-loader

[实现一个lodash按需加载babel插件][lodash_babel]  
[lodash 打包体积优化及原理][lodash]

[babel-plugin-transform-remove-console插件的使用][babel-plugin-transform-remove-console]  
在`babel.config.js`文件中添加这个配置

let plugins = ['lodash'];
    if (process.env.NODE_ENV === "production") { 
      plugins.push("transform-remove-console");
    }

在顶级目录新建`postcss.config.js`

module.exports = { 
      plugins: { 
        "postcss-plugin-px2rem": {  // 把px单位换算成rem单位
          rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem 为20px,淘宝的flex默认为1rem为10px 
          unitPrecision: 2, //允许REM单位增长到的十进制数字。
          propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
          propBlackList: [], //黑名单
          // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
          selectorBlackList: [], //要忽略并保留为px的选择器
          ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
          replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
          mediaQuery: true, //（布尔值）允许在媒体查询中转换px。
          minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
        }
      }
    }

**2 依赖**

# 图片压缩
    # Syntax Error: Error: Cannot find module 'gifsicle'
    # 如果执行了yarn add，那么这里还需要再执行一次
    cnpm install --save-dev  image-webpack-loader
    # gzip压缩
    # peerDependencies WARNING compression-webpack-plugin@* requires a peer of webpack@^5.1.0 but webpack@4.46.0 was installed
    # npm uninstall webpack webpack-cli -g
    cnpm install --save-dev  compression-webpack-plugin@5.0.0
    # 
    cnpm install --save-dev  lodash-webpack-plugin
    #
    cnpm install --save-dev mini-css-extract-plugin@1.5.0
    # less依赖
    yarn add less less-loader --dev

新建`vue.config.js`  
运行自己的工程发现less的样式没有生效,[less][]  
vue2中这个警告应该忽略,按照他的警告来改反而加载不了less  
![2][]

[lodash_babel]: https://zhuanlan.zhihu.com/p/375802216
[lodash]: https://www.jianshu.com/p/f03ff4f3a8b3
[babel-plugin-transform-remove-console]: https://blog.csdn.net/dyw3390199/article/details/112315719
[less]: https://less.bootcss.com/
[2]: /images/20220829/96db23d35a7f4abebf0273c4a003f6fe.png