2023年6月20日发(作者：)

vue项⽬中引⼊html项⽬,vue项⽬引⼊外部的的⽅式1.在⼊⼝js⽂件中引⼊，⼀些公共的样式⽂件，可以在这⾥引⼊。javascriptimport Vue from 'vue'import App from './App' // 引⼊App这个组件import router from './router' /* 引⼊路由配置 */import axios from 'axios'import '../static/css/' /*引⼊公共样式*/复制代码2.在中引⼊HTMLstop/*引⼊公共样式*/复制代码3.在中引⼊，但是这样引⼊有⼀个问题，就是在的HEADH上会多出⼀个空的vueexport default {name: 'app'}@import './../static/css/'; /*引⼊公共样式*/复制代码⼀个的例⼦在GitHub的地址csshtml {/*标准字体⼤⼩设置 14 像素「rem 参照对象」*/font-size: 14px;/*滚动事件发⽣在 html 元素上；JS 中可以监听 html 的滚动*/overflow-y: auto;/*让 html 和浏览器窗⼝⾼度⼀致*/height: 100%;/*少数浏览器默认背景⾊为浅灰⾊，所以设置默认背景颜⾊为纯⽩*/background-color: #fff;}html,body {/*body 宽度⼤ html 度时，某些浏览器会出现内部滚动条；所以设置「html、body」宽度相同且「overflow-x: hidden」*/overflow-x: hidden;width: 100%;/*取消部分浏览器点击有阴影*/-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*优化移动端滚动事件*/-webkit-overflow-scrolling: touch;/* overflow-scrolling: touch; */}body {/*设置基本字体配置*/font: 1rem 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;/*让绝对定位元素，根据 body 定位*/position: relative;/*设置⽹页基本字体颜⾊为浅灰⾊*/color: #666;/*使字体渲染更顺滑*/-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}/*** 移除常⽤标签的浏览器默认的「margin、padding」* pre、code、legend、fieldset、blockquote … 等标签不是很常⽤，所以就不⼀⼀列举，如果项⽬中使⽤到，可以⾃⼰单独写*/body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form {margin: 0;padding: 0;}/*** 不同浏览器的 input、select、textarea 的盒⼦模型宽度计算⽅式不同，统⼀为最常见的 content-box*/input,select,textarea {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}table {/*table 相邻单元格的边框间的距离设置为 0*/border-spacing: 0;/*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/border-collapse: collapse;}/*** 移除浏览器部分元素的默认边框* acronym、fieldset … 等其他标签不是很常⽤，就不会⼀⼀列举；如果项⽬中⽤到，可以⾃⼰单独写*/img,input,button,textarea {border: none;-webkit-appearance: none;}input {/*由于 input 默认不继承⽗元素的居中样式，所以设置：「text-align: inherit」*/text-align: inherit;}textarea {/*textarea 默认不可以放缩*/resize: none;}/*** 由于以下元素的部分属性没有继承⽗节点样式，所以声明这些元素的这些属性为⽗元素的属性* 取消这些元素 `outline` 样式*/a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup {font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;line-height: inherit;color: inherit;outline: none;}/*** 取消超链接元素的默认⽂字装饰* 另外 del、ins 标签的中划线、下划线还是挺好的，就不去掉*/a {text-decoration: none;}ol,ul {/*开发中 UI 设计的列表都是和原⽣的样式差太多，所以直接给取消 ol，ul 默认列表样式*/list-style: none;}button,input[type='submit'],input[type='button'] {/*⿏标经过是「⼩⼿」形状表⽰可点击*/cursor: pointer;}input::-moz-focus-inner {/*取消⽕狐浏览器部分版本 input 聚焦时默认的「padding、border」*/padding: 0;border: 0;}/*取消部分浏览器数字输⼊控件的操作按钮*/input[type='number'] {-moz-appearance: textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {margin: 0;-webkit-appearance: none;}/*输⼊控件 placeholder ⾊设置 #999*/input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #999;}input:-moz-placeholder,textarea:-moz-placeholder {color: #999;}input::-moz-placeholder,textarea::-moz-placeholder {color: #999;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #999;}template {/*由于部分浏览 template 会显⽰出来，所以要隐*/display: none;}复制代码

2023年6月20日发(作者：)

vue项⽬中引⼊html项⽬,vue项⽬引⼊外部的的⽅式1.在⼊⼝js⽂件中引⼊，⼀些公共的样式⽂件，可以在这⾥引⼊。javascriptimport Vue from 'vue'import App from './App' // 引⼊App这个组件import router from './router' /* 引⼊路由配置 */import axios from 'axios'import '../static/css/' /*引⼊公共样式*/复制代码2.在中引⼊HTMLstop/*引⼊公共样式*/复制代码3.在中引⼊，但是这样引⼊有⼀个问题，就是在的HEADH上会多出⼀个空的vueexport default {name: 'app'}@import './../static/css/'; /*引⼊公共样式*/复制代码⼀个的例⼦在GitHub的地址csshtml {/*标准字体⼤⼩设置 14 像素「rem 参照对象」*/font-size: 14px;/*滚动事件发⽣在 html 元素上；JS 中可以监听 html 的滚动*/overflow-y: auto;/*让 html 和浏览器窗⼝⾼度⼀致*/height: 100%;/*少数浏览器默认背景⾊为浅灰⾊，所以设置默认背景颜⾊为纯⽩*/background-color: #fff;}html,body {/*body 宽度⼤ html 度时，某些浏览器会出现内部滚动条；所以设置「html、body」宽度相同且「overflow-x: hidden」*/overflow-x: hidden;width: 100%;/*取消部分浏览器点击有阴影*/-webkit-tap-highlight-color: rgba(0, 0, 0, 0);/*优化移动端滚动事件*/-webkit-overflow-scrolling: touch;/* overflow-scrolling: touch; */}body {/*设置基本字体配置*/font: 1rem 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', Arial, sans-serif;/*让绝对定位元素，根据 body 定位*/position: relative;/*设置⽹页基本字体颜⾊为浅灰⾊*/color: #666;/*使字体渲染更顺滑*/-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}/*** 移除常⽤标签的浏览器默认的「margin、padding」* pre、code、legend、fieldset、blockquote … 等标签不是很常⽤，所以就不⼀⼀列举，如果项⽬中使⽤到，可以⾃⼰单独写*/body,p,h1,h2,h3,h4,h5,h6,dl,dd,ul,ol,th,td,button,figure,input,textarea,form {margin: 0;padding: 0;}/*** 不同浏览器的 input、select、textarea 的盒⼦模型宽度计算⽅式不同，统⼀为最常见的 content-box*/input,select,textarea {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}table {/*table 相邻单元格的边框间的距离设置为 0*/border-spacing: 0;/*默认情况下给 tr 设置 border 没有效果，如果 table 设置了边框为合并模式：「border-collapse: collapse;」就可以了*/border-collapse: collapse;}/*** 移除浏览器部分元素的默认边框* acronym、fieldset … 等其他标签不是很常⽤，就不会⼀⼀列举；如果项⽬中⽤到，可以⾃⼰单独写*/img,input,button,textarea {border: none;-webkit-appearance: none;}input {/*由于 input 默认不继承⽗元素的居中样式，所以设置：「text-align: inherit」*/text-align: inherit;}textarea {/*textarea 默认不可以放缩*/resize: none;}/*** 由于以下元素的部分属性没有继承⽗节点样式，所以声明这些元素的这些属性为⽗元素的属性* 取消这些元素 `outline` 样式*/a,h1,h2,h3,h4,h5,h6,input,select,button,option,textarea,optgroup {font-family: inherit;font-size: inherit;font-weight: inherit;font-style: inherit;line-height: inherit;color: inherit;outline: none;}/*** 取消超链接元素的默认⽂字装饰* 另外 del、ins 标签的中划线、下划线还是挺好的，就不去掉*/a {text-decoration: none;}ol,ul {/*开发中 UI 设计的列表都是和原⽣的样式差太多，所以直接给取消 ol，ul 默认列表样式*/list-style: none;}button,input[type='submit'],input[type='button'] {/*⿏标经过是「⼩⼿」形状表⽰可点击*/cursor: pointer;}input::-moz-focus-inner {/*取消⽕狐浏览器部分版本 input 聚焦时默认的「padding、border」*/padding: 0;border: 0;}/*取消部分浏览器数字输⼊控件的操作按钮*/input[type='number'] {-moz-appearance: textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {margin: 0;-webkit-appearance: none;}/*输⼊控件 placeholder ⾊设置 #999*/input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #999;}input:-moz-placeholder,textarea:-moz-placeholder {color: #999;}input::-moz-placeholder,textarea::-moz-placeholder {color: #999;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #999;}template {/*由于部分浏览 template 会显⽰出来，所以要隐*/display: none;}复制代码