%20(2).svg)
项目简介
本项目是一个现代化的Web应用脚手架，基于Vue.js框架，以Webpack 5作为模块打包工具。集成了多页面实现、自动图标字体生成、模拟数据接口、按需加载UI组件、动态调整主题色以及响应式布局等实用功能和特性，旨在提高开发效率，优化构建速度，提升用户体验。
项目的主要特性和功能
- 基于Webpack 5和Babel 7构建，构建速度更快，打包文件体积更小。
- 支持两种方式自动生成HTML页面，便于多页面应用开发。
- 可通过添加或修改SVG文件，自动生成对应的字体图标、CSS样式和HTML预览，无需手动配置。
- 使用dynamic-mocker实现后端接口的数据模拟，方便前端开发和测试。
- 通过Webpack插件实现element-plus组件的按需加载，降低项目体积。
- 可通过修改SCSS变量，实现全局主题色的动态调整。
- 能在网页运行时动态替换CSS中的主题色，无需重新加载页面。
- 生成源码映射文件，方便调试。
- 采用vw+rem方案实现响应式布局，兼容多种浏览器和设备。
安装使用步骤
假设用户已经下载了本项目的源码文件，以下是使用步骤：
1. 复制项目：
bash
cd vue-element-ui-scaffold-webpack4
2. 安装依赖：
bash
npm install
3. 启动开发服务器：
bash
npm run dev
启动本地开发服务器，使用dev配置的接口服务地址。
4. 构建发布：
- 测试环境：
bash
npm run build-test
- 生产环境：
bash
npm run build
- 演示环境：
bash
npm run build-demo
- 开发环境：
bash
npm run build-dev
5. 访问应用：
在浏览器中访问构建的HTML文件，查看应用效果。
其他命令
- 启用mock数据发布：
bash npm run build-preview - 查看dist目录运行结果：
bash npm run play-dist - 启动mock服务：
bash npm run mock - 代理到80端口或443端口：
bash npm run proxy80
本项目已升级到Webpack 5和Vue 3，可通过切换分支使用Vue 2和Webpack 4的版本。如需更多帮助或遇到问题，请查阅项目文档。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】