到这里配置就算是成功搭建好这个窗口了，但是还有一些其他细节需要进行配置，比如electron打包配置，模块化的配置等等
常规配置这里配置一些常用的开发内容和一些轮子代码
reset.csss html{font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}address,applet,article,aside,audio,blockquote,body,canvas,caption,dd,details,div,dl,dt,embed,figcaption,figure,footer,h1,h2,h3,h4,h5,h6,header,html,iframe,li,mark,menu,nav,object,ol,output,p,pre,progress,ruby,section,summary,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent;text-decoration:none}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:0;line-height:normal}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}::-ms-clear,::-ms-reveal{display:none}input:-webkit-autofill{-webkit-animation:autofill-fix 1s infinite!important;-webkit-text-fill-color:#666;-webkit-transition:background-color 50000s ease-in-out 0s!important;transition:background-color 50000s ease-in-out 0s!important;background-color:transparent!important;background-image:none!important;-webkit-box-shadow:0 0 0 1000px transparent inset!important}[role=button],a,area,button,input:not([type=range]),label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}input[type=number],input[type=password],input[type=text],textarea{-webkit-appearance:none} common.css /* 空元素显示的内容 */ .empty-content:empty::before { /* content: attr(placeholder); */ content: '记笔记...'; font-size: 14px; color: #666; line-height: 21px; } /* 隐藏滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; } /* 设置ol显示格式 */ .module-editor ol { counter-reset:sectioncounter; } .module-editor ol li { list-style: none; position: relative; } .module-editor ol li::before { content: counter(sectioncounter) '.'; counter-increment:sectioncounter; margin-right: 10px; } /* 使用自定义伪类会导致光标偏移向下 */ /* .module-editor ul { position: relative; } .module-editor ul li { list-style-type: none; word-break: break-all; } .module-editor ul li::before { content: ''; width: 5px; height: 5px; background-color: #000; margin-right: 6px; display: inline-block; border-radius: 100%; transform: translateY(-2px); margin-left: 1px; } */ .module-editor ul li { word-break: break-all; list-style: disc inside; } /* 常用flex布局 */ .flex { display: flex; } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-left { display: flex; justify-content: center; align-items: flex-start; } .flex-right { display: flex; justify-content: center; align-items: flex-end; } .flex-items { display: flex; align-items: center; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex1 { flex: 1; } /* ellips */ .hidden { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html, body, .app, .transition, .bg-white { width: 100%; height: 100%; box-sizing: border-box; position: relative; overflow: hidden; background-color: rgba(0, 0, 0, 0); outline: none; } .bg-white { background-color: #fff; } /* 软件阴影 */ .app { box-shadow: 0 0 4px rgb(185, 185, 185); } body { padding: 4px; user-select: none; outline: none; } @keyframes fadein { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes fadeout { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0; } } /* 进入和退出动效 */ .app-show { animation: fadein 0.4s forwards; transform: scale(1) !important; } .app-hide { animation: fadeout 0.2s forwards; transform: scale(0.9); } /* 颜色 */ .yellow-content { transition: background-color 0.4s; background-color: #fff7d1 !important; } .green-content { transition: background-color 0.4s; background-color: #e4f9e0 !important; } .pink-content { transition: background-color 0.4s; background-color: #ffe4f1 !important; } .purple-content { transition: background-color 0.4s; background-color: #f2e6ff !important; } .blue-content { transition: background-color 0.4s; background-color: #e2f1ff !important; } .gray-content { transition: background-color 0.4s; background-color: #f3f2f1 !important; } .black-content { transition: background-color 0.4s; background-color: #696969 !important; color: #fff; } .black-content * { color: #fff; } config