当前项目中前端写demo的痛点【污染源代码】Demo直接写在源项目中，容易污染源项目代码，后期删除起来也麻烦【打包太慢】我只想测试一个小功能，每次修改都要等整个项目编译打包，甚至需要在页面上操作定位指定功能，效率太低了【demo记录】遇到不清楚的api函数时，demo要一步一步来，就像资料文档一样，方便更全面的测试，这点很重要，可以看看github上大佬们的demo。快速写demo的几种方法1.写在哪里1.1．在当前项目中，设置test文件夹并添加。gitignore（推荐）用法：在localDemo中添加测试demo文件，将demo导入到相应位置，可以直接通过路由访问，也可以添加到route.js中的/demo页面（直接放在顶层可减少包装内容）查看相应航线。优点：方便测试，不需要新建项目可以共享项目中所有的依赖和数据缺点：demo分散在各个项目中，以后归档不方便，搜索//这个问题没有大的好demo可以单独取出单独存放。gitignore**/localDemo1.2。scratches和consoleswebstorm临时文件编辑环境，不需要单独打开项目，可以使用快捷键快速创建任意文件适用场景：临时记录，快速编写各种简单的demo，快速新建scratchs文件//ctrl+shift+alt+a【类型丰富】可定制所有类型【功能丰富】完整的运行调试功能创建新的scratchsbuffer//ctrl+shift+a，然后进入buffer搜索【数量限制】只支持5个文件，后面会重启覆盖，适合临时记录[类型限制]默认文本后缀1.3，在线IDE如：codesandbox，codepen适用场景：库demo，教学优势：方便，可以在线编译，方便分享给他人用于调试缺点：卡顿无法跳转npm包内部编辑功能不如IDE强大（提醒查看）1.4.创建一个新的独立项目创建一个依赖最少的纯demoProject项目，并管理多个独立的项目和分支。适用场景：typescript-demo、react-demo、webpack-demo等系列教程项目。2.如何编写2.1.html文件免编译的优点【无需编译】各种库可以通过CDN访问类型import(react,vue,umi,antd,lodash,less,sass...)【命名自由】文件名可以详细介绍中文缺点：【CDN源搜索】对应依赖的cdn需要时间version【写法区别】html文件的import方式和import方式不一样，后面需要对代码进行微调【缺少提示】比如依赖库中的语法提示，import方法可以结合webstorm的livetemplatet和scratches功能快速制作demo；常用demo模板文件：html-react-antd.html、html-react.html...模板内容可查看：https://github.com/tuihou1233...常用库cdn源搜索网站（国内站点速度很快）：https://www.bootcdn.cn/2.2。编译的优缺点和上面的完全一样。几个加速编译的优化点被反转了。不需要编译，只编译每次需要编译的文件使用cdn代替一些npm包按需加载，比如：antd组件...使用其他打包工具vitecli模板推荐：react+typescript+antd参考资料vite官网介绍
