# myModuleVue2

**Repository Path**: js516008702_admin_admin/my-module-vue2

## Basic Information

- **Project Name**: myModuleVue2
- **Description**: 使用vue2，包含mock.js模拟数据，切换主题功能，中英文切换功能
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-06
- **Last Updated**: 2024-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 初始化代码
```
npm i  或  npm install 
```

# 运行
```
npm run serve
```

# 相关插件
> 预编译scss
```
npm i sass-loader node-sass
```

> 生产环境下移出 console
```
npm i babel-plugin-transform-remove-console
```

> 引入 elementUI
```
 npm i element-ui -S
 按需引入需要 插件
 npm install babel-plugin-component -D
```

> 使用 postcss-pxtorem 页面适配，配置文件 postcss.config.js

```
amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。
```

> 移出没有使用的css样式：purgecss-webpack-plugin、glob-all
```
/**
  * 使用该插件移出多余的 css样式，需注意也会移出 
  *  <style lang="scss" scoped>
  *    ...
  *  </style>
  * 内的样式
  * 
  * 
  * 改为
  * <style lang="scss">
  *  ...
  * </style>
  * 
  **/
```
> 使用了CDN加速

> mock.js模拟数据

> 动态生成路由，可自定配置

> 换肤功能 

- 关键代码
> indes.scss
```
:root {
  --primary-color: red
}
```
- 在对应的事件下执行
```
document.documentElement.style.setProperty('--primary-color','green')
```

> vue-i18n@6 多语言切换

-------------------------------------------------------

# 可能出现的问题 
### 打包出现兼容 Building legacy bundle for production... 问题
package.json

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead"
]

===>

"browserslist": [
  "> 1%",
  "last 2 versions",
  "not dead",
  "not ie 11"
]



# 切换主题的操作
### 相关插件
> npm install ---save webpack-theme-color-replacer

- 在vue.config.js配置
```
// 引入插件
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

// 使用插件
chainWebpack: (config) => {
  cconfig.plugin('webpack-theme-color-replacer') 
    .use(ThemeColorReplacer) 
    .tap(options => { 
      const matchColors = [...forElementUI.getElementUISeries('#409EFF')] 
      options[0] = { 
        fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名
        matchColors: matchColors, // 用于提取 css 文件的颜色数组。将提取出具有这些颜色中的任何一种的 CSS 规则。
        changeSelector: forElementUI.changeSelector, // 更改 css 选择器，以提高 css 优先级，以解决延迟加载问题
        // isJsUgly: process.env.NODE_ENV !== 'development' // 代码压缩
        isJsUgly:true
      } 
        return options 
      });
})
```
- 配置方法
```
import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI' 

export function setThemColor(newColors){
  const { getElementUISeries } = forElementUI
  return client.changer.changeColor({
    newColors:getElementUISeries(newColors)
  }, Promise).then(() => {
    console.log("ok");
  })
}
```
- 使用setThemColor方法
```
import {setThemColor} from '@/themeConfig/index.js
export default { 
  methods:{
    clickItem(){
      setThemColor('#ccc')
    },
  },
}
```

# 在vue.config.js 全局引入 scss 变量出现的bug
> Syntax Error: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

原因： sass-load、sass 版本太高


# webpack-theme-color-replacer动态切换主题色，打包时该功能失效,css没有提取
> 原因: css配置  extract应该为true


------------------------------------------------------------------------------------

# 补充说明
打包后可以打开 report.html 文件，查看分析包的大小
正式环境中应该删除该文件