Welcome to blockxia's blog

• vue cli3换肤功能开发

  2021-12-06

  blockxia

  vue

  vue
  • 1. webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色
  • 2. 配置编译文件babel.config.js并安装按需引入插件cnpm install babel-plugin-component –save-dev
  • 3.新建变量element-variables.scss文件
  • 4.其他页面需要单独设置直接引用

  1. webpack-theme-color-replacer webpack插件 实现web项目 全局修改主题颜色

  1.安装插件：
  cnpm install  webpack-theme-color-replacer  ---save-dev
  2.在vue.config.js里面引入  修改配置:
  const ThemeColorReplacer = require('webpack-theme-color-replacer')
  const forElementUI = require('webpack-theme-color-replacer/forElementUI')
  const configColor = require('./config/app-config.js')
  
  
  module.exports = {
  // 自定义换肤
      config.plugin('webpack-theme-color-replacer')
        .use(ThemeColorReplacer)
        .tap(options => {
          options[0] = {
            <!-- 注意styles为你当前项目的css的样式的文件夹名称 -->
            fileName: 'styles/theme-colors-[contenthash:8].css',
            matchColors: [...forElementUI.getElementUISeries(configColor.themeColor), '#7fffd4', // 自定义颜色
              '#efefef'],
            changeSelector: forElementUI.changeSelector,
            isJsUgly: process.env.NODE_ENV !== 'development'
          }
          return options
        })
  
        
  }
  

  2. 配置编译文件babel.config.js并安装按需引入插件cnpm install babel-plugin-component –save-dev

  module.exports = {
    presets: [
      ['@vue/app', { useBuiltIns: 'entry' }, '@vue/cli-plugin-babel/preset']
    ],
    plugins: [
      [
        'babel-plugin-component',
        {
          libraryName: 'element-ui',
          styleLibraryName: '~node_modules/element-ui/packages/theme-chalk/src',
          ext: '.scss'
        }
      ]
    ]
  };
  

  3.新建变量element-variables.scss文件

  /**
  * I think element-ui's default theme color is too light for long-term use.
  * So I modified the default color and you can modify it to your liking.
  **/
  //theme-chalk的变量名
  @import "../../node_modules/element-ui/packages/theme-chalk/src/common/var.scss";
  
  //自定义按钮颜色变量
  $my-btn-color: #1157fb;
  
  /* theme color */
  $--color-primary: #1157fa;
  // $--color-primary: #1157fa;
  $--color-success: #1157fa;
  $--color-warning: #1157fa;
  $--color-danger: #1157fa;
  // $--color-success: #13ce66;
  // $--color-warning: #ffba00;
  // $--color-danger: #ff4949;
  // $--color-info: #1E1E1E;
  
  // 菜单背景色 全局换肤颜色变量
  $--color-primary-light-95: mix(#fff, $--color-primary, 95%);
  $--color-primary-light-8: mix(#fff, $--color-primary, 80%);
  $--color-primary-light-7: mix(#fff, $--color-primary, 70%);
  $--color-primary-light-2: mix(#fff, $--color-primary, 20%);
  $--color-primary-dark-1: mix(#000, $--color-primary, 10%);
  $--color-primary-dark-2: mix(#000, $--color-primary, 20%);
  $--color-primary-dark-7: mix(#000, $--color-primary, 70%);
  
  $--button-font-weight: 400;
  
  // $--color-text-regular: #1f2d3d;
  
  $--border-color-light: #dfe4ed;
  $--border-color-lighter: #e6ebf5;
  
  $--table-border: 1px solid #dfe6ec;
  
  /* icon font path, required */
  $--font-path: "~element-ui/lib/theme-chalk/fonts";
  
  <!-- @import "~element-ui/packages/theme-chalk/src/index";
  @import "~element-ui/packages/theme-chalk/src/base.scss";
  @import "~element-ui/packages/theme-chalk/src/pagination.scss";
  @import "~element-ui/packages/theme-chalk/src/dialog.scss";
  @import "~element-ui/packages/theme-chalk/src/autocomplete.scss";
  @import "~element-ui/packages/theme-chalk/src/dropdown.scss";
  @import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
  @import "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
  @import "~element-ui/packages/theme-chalk/src/menu.scss";
  @import "~element-ui/packages/theme-chalk/src/submenu.scss";
  @import "~element-ui/packages/theme-chalk/src/menu-item.scss";
  @import "~element-ui/packages/theme-chalk/src/menu-item-group.scss";
  @import "~element-ui/packages/theme-chalk/src/input.scss";
  @import "~element-ui/packages/theme-chalk/src/input-number.scss";
  @import "~element-ui/packages/theme-chalk/src/radio.scss";
  @import "~element-ui/packages/theme-chalk/src/radio-group.scss";
  @import "~element-ui/packages/theme-chalk/src/radio-button.scss";
  @import "~element-ui/packages/theme-chalk/src/checkbox.scss";
  @import "~element-ui/packages/theme-chalk/src/checkbox-button.scss";
  @import "~element-ui/packages/theme-chalk/src/checkbox-group.scss";
  @import "~element-ui/packages/theme-chalk/src/switch.scss";
  @import "~element-ui/packages/theme-chalk/src/select.scss";
  @import "~element-ui/packages/theme-chalk/src/button.scss";
  @import "~element-ui/packages/theme-chalk/src/button-group.scss";
  @import "~element-ui/packages/theme-chalk/src/table.scss";
  @import "~element-ui/packages/theme-chalk/src/table-column.scss";
  @import "~element-ui/packages/theme-chalk/src/date-picker.scss";
  @import "~element-ui/packages/theme-chalk/src/time-select.scss";
  @import "~element-ui/packages/theme-chalk/src/time-picker.scss";
  @import "~element-ui/packages/theme-chalk/src/popover.scss";
  @import "~element-ui/packages/theme-chalk/src/tooltip.scss";
  @import "~element-ui/packages/theme-chalk/src/message-box.scss";
  @import "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
  @import "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";
  @import "~element-ui/packages/theme-chalk/src/form.scss";
  @import "~element-ui/packages/theme-chalk/src/form-item.scss";
  @import "~element-ui/packages/theme-chalk/src/tabs.scss";
  @import "~element-ui/packages/theme-chalk/src/tab-pane.scss";
  @import "~element-ui/packages/theme-chalk/src/tag.scss";
  @import "~element-ui/packages/theme-chalk/src/tree.scss";
  @import "~element-ui/packages/theme-chalk/src/alert.scss";
  @import "~element-ui/packages/theme-chalk/src/notification.scss";
  @import "~element-ui/packages/theme-chalk/src/slider.scss";
  @import "~element-ui/packages/theme-chalk/src/loading.scss";
  @import "~element-ui/packages/theme-chalk/src/row.scss";
  @import "~element-ui/packages/theme-chalk/src/col.scss";
  @import "~element-ui/packages/theme-chalk/src/upload.scss";
  @import "~element-ui/packages/theme-chalk/src/progress.scss";
  @import "~element-ui/packages/theme-chalk/src/spinner.scss";
  @import "~element-ui/packages/theme-chalk/src/message.scss";
  @import "~element-ui/packages/theme-chalk/src/badge.scss";
  @import "~element-ui/packages/theme-chalk/src/card.scss";
  @import "~element-ui/packages/theme-chalk/src/rate.scss";
  @import "~element-ui/packages/theme-chalk/src/steps.scss";
  @import "~element-ui/packages/theme-chalk/src/step.scss";
  @import "~element-ui/packages/theme-chalk/src/carousel.scss";
  @import "~element-ui/packages/theme-chalk/src/scrollbar.scss";
  @import "~element-ui/packages/theme-chalk/src/carousel-item.scss";
  @import "~element-ui/packages/theme-chalk/src/collapse.scss";
  @import "~element-ui/packages/theme-chalk/src/collapse-item.scss";
  @import "~element-ui/packages/theme-chalk/src/cascader.scss";
  @import "~element-ui/packages/theme-chalk/src/color-picker.scss";
  @import "~element-ui/packages/theme-chalk/src/transfer.scss";
  @import "~element-ui/packages/theme-chalk/src/container.scss";
  @import "~element-ui/packages/theme-chalk/src/header.scss";
  @import "~element-ui/packages/theme-chalk/src/aside.scss";
  @import "~element-ui/packages/theme-chalk/src/main.scss";
  @import "~element-ui/packages/theme-chalk/src/footer.scss";
  @import "~element-ui/packages/theme-chalk/src/timeline.scss";
  @import "~element-ui/packages/theme-chalk/src/timeline-item.scss";
  @import "~element-ui/packages/theme-chalk/src/link.scss";
  @import "~element-ui/packages/theme-chalk/src/divider.scss";
  @import "~element-ui/packages/theme-chalk/src/image.scss";
  @import "~element-ui/packages/theme-chalk/src/calendar.scss";
  @import "~element-ui/packages/theme-chalk/src/backtop.scss";
  @import "~element-ui/packages/theme-chalk/src/infinite-scroll.scss";
  @import "~element-ui/packages/theme-chalk/src/page-header.scss";
  @import "~element-ui/packages/theme-chalk/src/cascader-panel.scss";
  @import "~element-ui/packages/theme-chalk/src/avatar.scss";
  @import "~element-ui/packages/theme-chalk/src/drawer.scss";
  @import "~element-ui/packages/theme-chalk/src/popconfirm.scss"; -->
  
  // the :export directive is the magic sauce for webpack
  // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
  :export {
    theme: $--color-primary;
    themeBg: $my-btn-color;
  }
  
  <!-- 引入不同文件 -->
  // color === 'red' ? require('@/styles/index-red.scss') : require('@/styles/index.scss') // global css
  
  

  4.其他页面需要单独设置直接引用

  background:$--color-primary;
  

  Read All

  ---

• vscode开发快捷键使用

  2021-11-08

  blockxia

  vscode

  vscode
  • 1. 安装好vscode按住shift+ctrl+p输入setting.json选择打开设置首选项设置需要的格式即可(ps我的设置如下，有需要的根据自己需要自行更改)
  • 2. 终端快捷键是ctrl+`即可打开终端
  • 3.ctrl+k和ctrl+s同时按下可以打开快捷键设置，设置成自己习惯用的快捷键
  • 4.打开左侧菜单栏倒数第二个可以下载前端所需的插件：eslint、Git History(快捷键shift+ctrl+p查找历史记录)、Vetur等
  • 5.解决VSCode不能粘贴文件问题

  1. 安装好vscode按住shift+ctrl+p输入setting.json选择打开设置首选项设置需要的格式即可(ps我的设置如下，有需要的根据自己需要自行更改)

  {
    // 设置主题背景色
    "workbench.colorTheme": "Atom One Light",
    "go.useCodeSnippetsOnFunctionSuggest": true,
    // 控制是否将打开的编辑器显示为预览。预览编辑器将会重用至其被保留(例如，通过双击或编辑)，且其字体样式将为斜体。
    "workbench.editor.enablePreview": false,
    // 设置字体大小
    "editor.fontSize": 17,
    "workbench.colorCustomizations": {
      // 设置光标颜色
      "editorCursor.foreground": "#110202",
      "[Atom One Light]": {
        "editor.background": "#C7EDCC",
        "sideBar.background": "#C7EDCC",
        "activityBar.background": "#C7EDCC",
      },
    },
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
    // 指定终端的字体 (注意名字要完全符合font名）
    "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace",
    // 指定终端字大小
    "terminal.integrated.fontSize": 16,
    // ----------设置字体大小  以上自行配置用户背景色---------
    //"editor.fontSize": 17,
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 2,
    // #每次保存的时候自动格式化 
    "editor.formatOnSave": true,
    // #去掉代码结尾的分号 
    "prettier.semi": true,
    // #使用单引号替代双引号 
    "prettier.singleQuote": true,
    // #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_line_length": 0, // 设置多个字符后换行 0 表示忽略
        "wrap_attributes": "auto", // html 标签属性 换行设置[auto|force|force-aligned|force-expand-multiline] ["auto"]
        "end_with_newline": false // 在文件结尾添加新行
      },
      "prettyhtml": {
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
      }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分号
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "explorer.confirmDelete": false, // 两个选择器中是否换行
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    // 每次保存的时候将代码按eslint格式进行修复
    // autoFixedOnSave 设置已废弃，采用如下新的设置
    "eslint.format.enable": true,
    // autoFix默认开启，只需输入字符串数组即可
    "eslint.validate": [
      "javascript",
      "vue",
      "html"
    ],
    "workbench.iconTheme": "vscode-icons",
    "files.autoSave": "off",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "diffEditor.ignoreTrimWhitespace": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "eslint.codeAction.showDocumentation": {
      "enable": true
    },
    // "workbench.editor.showTabs": true,
    "vue-helper.alias": {
      "@": "src"
    },
    "vue-helper.componentPrefix": {
      "alias": "@",
      "path": "src"
    },
    "peacock.surpriseMeOnStartup": true,
    "sync.gist": "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",
    "files.exclude": {
      "node_modules/": true //  node_modules是否展示在项目中
    },
    "security.workspace.trust.untrustedFiles": "open"
  }
  
  

  2. 终端快捷键是ctrl+`即可打开终端

  ctrl+`即可打开终端
  

  3.ctrl+k和ctrl+s同时按下可以打开快捷键设置，设置成自己习惯用的快捷键

  ctrl+k和ctrl+s同时按下可以打开快捷键设置
  

  4.打开左侧菜单栏倒数第二个可以下载前端所需的插件：eslint、Git History(快捷键shift+ctrl+p查找历史记录)、Vetur等

  shift+ctrl+p查找历史记录
  

  5.解决VSCode不能粘贴文件问题

  一、vscede创建快捷方式，右键属性-兼容性-以管理员身份运行此程序
  
  二、1. 以管理员身份运行PowerShell
  
  2. 执行：get-ExecutionPolicy，回复Restricted，表示状态是禁止的
  
  3.执行：set-ExecutionPolicy RemoteSigned
  
  4.选择Y。注意：一定要以管理员的身份运行PowerShell，不是cmd窗口！
  

  Read All

  ---

• webstorm连接Git及使用

  2021-07-18

  blockxia

  iconfont

  iconfont
  Read All

  ---

• 解决iconfont中svg图标不展示设置字体颜色的图标

  2021-05-28

  blockxia

  iconfont

  iconfont
  Read All

  ---

• 微信小程序自定义导航栏 胶囊菜单按钮高度适配

  2021-04-25

  blockxia

  Mpvue

  Mpvue
  Read All

  ---

• mpvue构建小程序中保存图片到本地之线上环境不生效的问题解决办法

  2021-03-12

  blockxia

  Mpvue

  Mpvue
  Read All

  ---