# 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样式,需注意也会移出
*
* 内的样式
*
*
* 改为
*
*
**/
```
> 使用了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 文件,查看分析包的大小
正式环境中应该删除该文件