zhongze-front/README.md

命令说明：

//安装库
npm install 

//编译第三方库
npm run dll 

//测试页面
npm run dev

//发布项目
npm run dist

//测试图表
npm run chart-dev

//发布图表
npm run chart-dist


//运行本地服务 用来访问本地已发布的页面
npm run server

目录说明：

• dll 预编译目录、将第三方库，编译后，开发测试过程会更快。
• src 源文件目录
• dist 项目发布目录
• dev 项目开发目录,如需要测试demo1时，可运行 npm run dev，然后访问127.0.0.1:3000/demo1.html
• dev/static 静态资源目录，即该目录下的资源不会走webapck。
• 本环境使用webpack-dev-server，开发时，会将目录指向dev目录。而发布时会将static目录复制到dist目录下，因此将static放在dev下刚好可以保证在开发目录下与发布目录下可以同样的方式访问static目录。

• src/pages/demo1、src/pages/demo2分别对应可视化页面，建议按页面整理html、css、图片等源文件 src/pages/common/为公共目录，可存放跨页面共享的相关资源

• charts 为图表目录

• charts/chart1、charts/chart2 分别对应一个图表，该图表的所有资源均在对应的目录下。

• charts_tests 为图表测试目录，其下的子目录与charts下的子目录对应。 如需要测试chart1时，可运行 npm run chart-dev，然后访问127.0.0.1:3000/chart1.html 注意：不需要在charts_tests下的每个图表目录下创建index.html页，只需创建index.js，如果没有index.html页，会自动调用模版页 template.html

• chartsDist 为图表发布目录

新增功能

• 简单的html拼接（非模版引擎方式） 用于站网类项目开发，可以将共公的html块提取的共公的文件中 tpl文件（用其他的扩展名也行，但不要使用html，会与HtmlWebpackPlugin中用到的html冲突）。然后在需要的页面中 <%= require(‘../common/tpl/header.tpl’) %> 引入。 >> 注：为什么可以在hhtml中用<%= %>引入，见官方说明：https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md ··· { test: /.tpl$/i, use: [{ loader: ‘raw-loader’, options: { esModule: false, }, }] } ···

注意事项：

• 需要修改resolve.alias，请到config/common.js中修改
• 该环境目前使用的库基本上都是最新版本，详见package.json，后续升级需要注意各种版本兼容问题 2022-3-8
• 安装第三方库使用 npm install xx --save 安装环境依赖库时使用 npm install xx --save-dev。切记不要乱用。
• 环境及目录搭建好后，建议将示例删掉。