<div id="write" class="is-node"><h2><a name="header-n0" class="md-header-anchor "></a>Vue的使用</h2><h4><a name="header-n2" class="md-header-anchor "></a>1.引入外部链接</h4><h5><a name="header-n3" class="md-header-anchor "></a>1.1 Css的引入</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1646149659638.png" alt="1646149659638" referrerpolicy="no-referrer"></p><p><span> </span>js的引入，创建js文件，然后script中import </p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647357977486.png" alt="1647357977486" referrerpolicy="no-referrer"></p><h5><a name="header-n7" class="md-header-anchor "></a>1.2Vue报错A complete log of this run can be found in</h5><p>解决方法：
1.升级npm至最新版本
执行 npm install npm@latest -g升级到最新版本
2.删除本地node_modules 依赖包（在前段项目的目录下）</p><ol start="3"><li>清理缓存
执行 npm cache clean --force 清理缓存</li><li>执行 npm install
目前该方法解决了我的问题
版权声明：本文为CSDN博主「就是王天霸」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：<a href="https://blog.csdn.net/qq_39506240/article/details/122041292" target="_blank" class="url">https://blog.csdn.net/qq_39506240/article/details/122041292\</a></li></ol><h5><a name="header-n14" class="md-header-anchor "></a>1.3 在Vue中使用flexible响应布局------默认html字体大小（font-size)是54px的问题</h5><p>第一步： npm install lib-flexible --save</p><p>第二步在main.js中</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647264921101.png" alt="1647264921101" referrerpolicy="no-referrer"></p><p>第三步修改尺寸 ：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647264966560.png" alt="1647264966560" referrerpolicy="no-referrer"></p><h4><a name="header-n20" class="md-header-anchor "></a>2.Vue如何使用Echarts</h4><h5><a name="header-n21" class="md-header-anchor "></a>2.1：创建一个Echarts.js文件</h5><p>// 重点一、导入包</p><p>import echarts from "echarts"</p><p>//重点二、 将Echarts操作方法挂到Vue的原型上</p><p>const install = function(Vue) {</p><p> //Echarts操作方法挂到Vue的原型上</p><p> Object.defineProperties(Vue.prototype, {</p><p> $charts: {</p><p> get() {</p><p> return {</p><p> line: function(id) {</p><p> this.chart = echarts.init(document.getElementById(id));</p><p> // option就是参数</p><p> var option = {</p><p> tooltip: {</p><p> trigger: 'axis',</p><p> axisPointer: {</p><p> type: 'shadow'</p><p> }</p><p> },</p><p> grid: {</p><p> left: '3%',</p><p> right: '4%',</p><p> bottom: '3%',</p><p> containLabel: true</p><p> },</p><p> xAxis: [{</p><p> type: 'category',</p><p> data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],</p><p> axisTick: {</p><p> alignWithLabel: true</p><p> }</p><p> }],</p><p> yAxis: [{</p><p> type: 'value'</p><p> }],</p><p> series: [{</p><p> name: 'Direct',</p><p> type: 'bar',</p><p> barWidth: '60%',</p><p> data: [10, 52, 200, 334, 390, 330, 220]</p><p> }]</p><p> };</p><p> this.chart.setOption(option);</p><p> }</p><p> }</p><p> }</p><p> }</p><p> })</p><p> }</p><p>// 重点三，将Echart给挂载出去</p><p>export default install</p><h5><a name="header-n73" class="md-header-anchor "></a>2.2main.js文件接受Echart.js文件</h5><p>import Echarts from "./js/echart.js"</p><p>Vue.use(Echarts)</p><h5><a name="header-n76" class="md-header-anchor "></a>2.3使用</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647267273673.png" alt="1647267273673" referrerpolicy="no-referrer"></p><p> </p><h4><a name="header-n79" class="md-header-anchor "></a>3.学习使用smartchart</h4><h4><a name="header-n80" class="md-header-anchor "></a>4.Vue如何实现表格数据自动滚动 <span> </span></h4><h4><a name="header-n81" class="md-header-anchor "></a>5.vscode格式化代码</h4><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647331874668.png" alt="1647331874668" referrerpolicy="no-referrer"></p><h4><a name="header-n83" class="md-header-anchor "></a>6.Vue使用ES6模块化</h4><p>1.node.js遵循了require()方法</p><p>2.模块对外共享成员使用module.exports对象</p><h5><a name="header-n86" class="md-header-anchor "></a>6.1 ES6诞生的意义</h5><p>太多的模块化规范给开发者增加了学习的难度和开发的成本，因此大一统的ES6模块化规范诞生了</p><h5><a name="header-n88" class="md-header-anchor "></a>6.2 什么是ES6模块</h5><p>他是浏览器端和服务器端通用的模块化开发规范</p><h5><a name="header-n90" class="md-header-anchor "></a>6.3 Es6模块化规范定义</h5><p>每个Js文件都是一个独立的模块</p><p>导入其他模块成员需要使用import关键字</p><p>向外共享模块成员使用export关键字</p><h5><a name="header-n94" class="md-header-anchor "></a>6.4 在node.js中体验ES6模块化</h5><p>1.有版本限制 >14.15.1 node -v</p><p>2.在package.json 的根节点中添加"type":"module"节点</p><p>快速初始化一个包配置化文件</p><p>npm init -y </p><p>初始化包文件pack.json</p><p>"type":"module"</p><h5><a name="header-n101" class="md-header-anchor "></a>6.5 ES6模块化的基本语法</h5><h5><a name="header-n102" class="md-header-anchor "></a>（1）默认导出与默认导入</h5><p>export default 默认导出的成员</p><p>let n1 = 10</p><p>function show(){</p><p>}</p><p><strong>// 这种方法主要在于我们想要拿这个东西给别人用，或者其他文件用，export default可称挂载</strong></p><p>export default{</p><p>n1,</p><p>show</p><p>}</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647355287377.png" alt="1647355287377" referrerpolicy="no-referrer"></p><h5><a name="header-n113" class="md-header-anchor "></a>（2）按需导出与按需导入</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647355305787.png" alt="1647355305787" referrerpolicy="no-referrer"></p><p><span> </span><strong>我们在其他文件想要导入其他成员导出的文件</strong></p><p><span> </span>import 接受名称 from "模块标识符"（路径和名字都行）</p><p><span> </span>import m1 from './index.js'</p><p><span> </span>//打印输出结果</p><h5><a name="header-n119" class="md-header-anchor "></a>（3）直接导入并执行模块中的代码</h5><h5><a name="header-n120" class="md-header-anchor "></a>6.6 ES6 使用的注意事项</h5><h5><a name="header-n121" class="md-header-anchor "></a>（1）每个模块export default只能挂载一次</h5><h6><a name="header-n122" class="md-header-anchor "></a>(2) 默认导出时的接受名称可以任意名称，只要合法就行</h6><h5><a name="header-n123" class="md-header-anchor "></a>6.7 export 按需导出的成员</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647355331177.png" alt="1647355331177" referrerpolicy="no-referrer"></p><p>按需导出的语法： export 按需导出的成员</p><p>// 当前的模块为,导出变量名用export let</p><p>export let s1 = "aaa" </p><p>let可能为const</p><p>// 向外按需导出方法say</p><p>export function say(){}</p><h5><a name="header-n131" class="md-header-anchor "></a>6.8 按需导入</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647355341542.png" alt="1647355341542" referrerpolicy="no-referrer"></p><p>按需导入单个成员的语法： import {n1} from '模块标识符'</p><p>按需导入多个成员的语法：import {n1,n2,n3} from '模块标识符'</p><p>一个Bug</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647353576631.png" alt="1647353576631" referrerpolicy="no-referrer"></p><p>如果出现两个文件可能会影响导入和导出</p><h5><a name="header-n138" class="md-header-anchor "></a>6.9 按需导出与按需导入的注意事项</h5><h5><a name="header-n139" class="md-header-anchor "></a>(1)默认导出导出只能一次，但是按需导出可以多次</h5><p>默认导出：</p><p>export default 默认导出的成员</p><p>let n1 = 10</p><p>function show(){</p><p>}</p><p>按需导出：</p><p>export let s1 = "aaa"</p><p>export function say(){}</p><h5><a name="header-n148" class="md-header-anchor "></a>（2）按需导入的成员名称必须和按需导出的名称一致</h5><h5><a name="header-n149" class="md-header-anchor "></a>（3）按需导入的时候可以用as进行重命名</h5><p>import {s1,s2 as st2,s3} from</p><p>console.log(st2);</p><h6><a name="header-n152" class="md-header-anchor "></a>(4).按需导入可以和默认导入一起使用</h6><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1647355965415.png" alt="1647355965415" referrerpolicy="no-referrer"></p><p>导入的info后面加一个，同时export default不用加;</p><p>info指向的是export default定义的内容</p><h5><a name="header-n156" class="md-header-anchor "></a>7.0 直接导入并执行模块中的代码</h5><p>如果只想单纯的执行某个模块中的代码，并不需要得到模块中向外共享的成员，此时可以直接导入并执行模块代码</p><p>创建一个js文件，在使用的文件中直接，import "模块标识符"</p><h5><a name="header-n159" class="md-header-anchor "></a>8.Vue滑屏的使用</h5><p><a href="https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-super" target="_blank" class="url">https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-super\</a></p><p>有进度条，有scroll</p><p>如何使用vue 基于vue-seamless-scroll无缝滚动</p><p><a href="https://www.jianshu.com/p/a2a7d3a9cf2b" target="_blank" class="url">https://www.jianshu.com/p/a2a7d3a9cf2b\</a></p><p>gitee详细教程</p><p><a href="https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/usage.html#" target="_blank" class="url">https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/usage.html#\</a>注册组件</p><p>详细教程</p><p><a href="https://madewith.cn/74" target="_blank" class="url">https://madewith.cn/74\</a></p><h5><a name="header-n168" class="md-header-anchor "></a>9.bug解决</h5><p>EIO: i/o error, read</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648554791613.png" alt="1648554791613" referrerpolicy="no-referrer"></p><p>解决方法</p><p>又一个bug</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648556801596.png" alt="1648556801596" referrerpolicy="no-referrer"></p><p>This is probably not a problem with npm. There is likely additional logging output above.</p><p>npm ERR! A complete log of this run can be found in:</p><p>解决方法：</p><p>npm WARN less-loader@5.0.0 requires a peer of webpack@^2.0.0 || ^3.0.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.</p><p>npm WARN less-loader@5.0.0需要webpack@^2.0.0 || ^3.0.0 || ^4.0.0的对等项，但没有安装。您必须自己安装对等依赖项。</p><p> </p><p>updated 1 package in 5.451s</p><p>92 packages are looking for funding
run <code>npm fund</code> for details</p><p>fixed 2 of 5 vulnerabilities in 929 scanned packages
3 vulnerabilities required manual review and could not be updated</p><p> </p><p>在5.451s中更新了1个包
92个包裹正在寻找资金
运行"国家预防机制基金"了解详情
修复了929个扫描包中5个漏洞中的2个
3个漏洞需要手动检查，无法更新</p><p>另外一个bug</p><p>解决输入任何npm命令都报Error: Cannot find module 'are-we-there-yet'</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648561069152.png" alt="1648561069152" referrerpolicy="no-referrer"></p><p>删掉：C:\Users\Lenovo目录下的 .yarnrc文件</p><p>网上搜了很多都是让删除C:\Users{账户}\下的.npmrc文件</p><p>删除了也没用,然后搜了下全电脑的.npmrc文件 </p><p>发现C:\Users{账户}\AppData\Roaming\npm 这个目录下有很多卸载之前的 npm的东西,就把这个npm整个目录都删了,就好了</p><p> </p><p> </p><p> </p><p>npm cache clean --force</p><p> </p><p> </p><p> </p><p>卸载当前 webpack-cli 的版本，下载 3 . * 版本配合 5.* 版本的 webpack 就不会报错。
npm uninstall webpack-cli
npm install webpack-cli@3 -D</p><p>第一步：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648612646641.png" alt="1648612646641" referrerpolicy="no-referrer"></p><p>第二步：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648612670417.png" alt="1648612670417" referrerpolicy="no-referrer"></p><p>这个方法没有找到解决问题的方法，于是我准备卸载了npm</p><p> </p><p>第一步：将node给卸载</p><p>1.node的安装目录文件夹清空。</p><p>2.将.npmrc文件删除</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648613363651.png" alt="1648613363651" referrerpolicy="no-referrer"></p><p>第二步： 重新安装</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648613750273.png" alt="1648613750273" referrerpolicy="no-referrer"></p><p>菜鸟课程的下载地址：<a href="https://www.runoob.com/nodejs/nodejs-install-setup.html" target="_blank" class="url">https://www.runoob.com/nodejs/nodejs-install-setup.html\</a></p><p>下一步进行npm 的安装</p><p> <strong>npm install npm -g</strong> </p><p>npm install npm -g** </p><p>下载完成后需要重新配置npm环境变量</p><p>2.环境变量配置：</p><p>第一步点击我的电脑属性</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648614666590.png" alt="1648614666590" referrerpolicy="no-referrer"></p><p> </p><p>第二步 点击高级设置</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648614690691.png" alt="1648614690691" referrerpolicy="no-referrer"></p><p>第三步点击高级环境变量 </p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648614729813.png" alt="1648614729813" referrerpolicy="no-referrer"></p><p>第四步 找到系统变量中的path,点击编辑</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648614896683.png" alt="1648614896683" referrerpolicy="no-referrer"></p><p>点击编辑之后，输入node的路径</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648615030955.png" alt="1648615030955" referrerpolicy="no-referrer"></p><p>有的伙伴可能不知道npm 的路径，cmd中输入npm config get prefix</p><p> </p><p>又一个bug:</p><p>cmd 下的npm 无论执行什么都出这个</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648637912841.png" alt="1648637912841" referrerpolicy="no-referrer"></p><p> </p><p>文件夹访问被拒绝</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648639479250.png" alt="1648639479250" referrerpolicy="no-referrer"></p><p>你需要MS-ZCONDNUGNWCX\Administrator 的权限才能进行更改</p><p>第一步：右键点击属性：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648639645638.png" alt="1648639645638" referrerpolicy="no-referrer"></p><p>第二步：点击安全</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648639689394.png" alt="1648639689394" referrerpolicy="no-referrer"></p><p>第三步： 选择MS-ZCONDNUGNWCX\Administrator</p><h5><a name="header-n243" class="md-header-anchor "></a>10. promise使用的场景</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649559620308.png" alt="1649559620308" referrerpolicy="no-referrer"></p><p>而promise的诞生正好解决了回调地狱的问题。</p><h6><a name="header-n246" class="md-header-anchor "></a>10.1promise的基本概念</h6><h6><a name="header-n247" class="md-header-anchor "></a><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649560126361.png" alt="1649560126361" referrerpolicy="no-referrer">10.2 三个文件，如何按照顺序分别进行读取</h6><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649560485953.png" alt="1649560485953" referrerpolicy="no-referrer"></p><p>不使用promise函数进行调用文件：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649562044122.png" alt="1649562044122" referrerpolicy="no-referrer"><span> </span></p><p>10.3 通过异步读取文件：</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649562194143.png" alt="1649562194143" referrerpolicy="no-referrer"></p><p>第一步：打包pack.json文件：</p><p>npm init -y</p><p>第二步： 解决bug:A complete log of this run can be found in:</p><p> </p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649563208916.png" alt="1649563208916" referrerpolicy="no-referrer"></p><p> npm install npm -g</p><p>第三步：解决<strong>Not Found - GET <a href="https://registry.npmjs.org/" target="_blank" class="url">https://registry.npmjs.org/\</a>- Not found</strong></p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649563381072.png" alt="1649563381072" referrerpolicy="no-referrer"></p><p>npm config set registry <a href="https://registry.npm.taobao.org" target="_blank" class="url">https://registry.npm.taobao.org</a></p><p>需要使用then-fs对文件进行读取：</p><p>npm install then-fs</p><h5><a name="header-n264" class="md-header-anchor "></a>11.路径设置</h5><ol start=""><li>相对路径和绝对路径的定义</li></ol><p>路径通常分为绝对路径和相对路径。</p><p>绝对路径是文件的完整 URL，比如</p><p><img src="https://unsplash.it/100/100?image=1005"></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">1<img src="https://unsplash.it/100/100?image=1005" ></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p>而相对路径是以当前网页所在位置作为基准，建立出的目录路径。比如</p><p><img src="../static/images/wechat.jpg""></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><img src="../static/images/wechat.jpg""></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><ol start="2"><li>特殊符号</li></ol><p>在使用相对路径时，我们使用一个点（.）来表示当前目录，使用两个点（...）来表示当前目录的父目录。
下面代码表示图片引用的是当前目录下的 static 文件：</p><p><img src="./static/css/typo.css"></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><img src="./static/css/typo.css"></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p>这个通常我们可以偷懒，对于相同目录下的文件，直接写文件名即可：</p><p><img src="typo.css"></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><img src="typo.css"></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p>而下面代码则表示图片引用的是上一层目录下 images 文件夹下的 FishC.png 文件：</p><p><img src="../images/FishC.png" alt="FishC-logo"></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><img src="../images/FishC.png" alt="FishC-logo"></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><p>注意：这里面斜杠（/）是作为一个分隔线的角色存在的，目录与文件，目录与目录之间使用斜杠进行分隔。
注意：这里面斜杠（/）是作为一个分隔线的角色存在的，目录与文件，目录与目录之间使用斜杠进行分隔。</p><ol start="3"><li>根目录</li></ol><p>如果我们将斜杠（/）放在路径的最开头，那么它表示的是网站根目录。</p><p>比如下面代码表示网站根目录下的 static文件夹里面的 css 文件夹里面的 typo.css 文件</p><p><img src="/static/css/typo.css"></p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><img src="/static/css/typo.css" ></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 23px;"></div><div class="CodeMirror-gutters" style="display: none; height: 23px;"></div></div></div></pre><h5><a name="header-n296" class="md-header-anchor "></a>12.then-fs的基本使用</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649573457496.png" alt="1649573457496" referrerpolicy="no-referrer"></p><p>使用then.ts读取文件内容</p><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1649573995062.png" alt="1649573995062" referrerpolicy="no-referrer"></p><h5><a name="header-n300" class="md-header-anchor "></a>13.如何居中</h5><p>方法一：margin负间距</p><p>必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
距离定位父级左边框和上边框的距离设置为50%；
将元素分别左移和上移，移动元素宽度和高度的一半
方法二：margin: auto；实现绝对定位元素的居中</p><p>必须知道居中盒的宽度和高度；
为居中盒设置绝对定位；
分别设置left: 0; right: 0; top: 0; bottom: 0;
为居中盒设置margin: auto;
方法三：transform: translate();实现绝对定位元素的居中</p><pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang=""><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang=""><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 7.85168px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">.box{</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> position: absolute;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> left: 50%;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> top: 50%;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> transform: translate(-50%,-50%);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 113px;"></div><div class="CodeMirror-gutters" style="display: none; height: 113px;"></div></div></div></pre><h5><a name="header-n305" class="md-header-anchor "></a>14.Vant的使用</h5><p><a href="https://blog.csdn.net/qq_53225741/article/details/125371323" target="_blank" class="url">https://blog.csdn.net/qq_53225741/article/details/125371323\</a></p><p>导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。</p><p>同样在main.js中引入</p><p>import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant); </p><h5><a name="header-n310" class="md-header-anchor "></a>15.label for的使用</h5><p><img src="C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1659015398100.png" alt="1659015398100" referrerpolicy="no-referrer"></p><h5><a name="header-n312" class="md-header-anchor "></a>16.jQuery在Vue中的使用</h5><p>方式一：
1、安装 jquery</p><p>npm install jquery</p><p>import $ from 'jquery'
注意：如果要在 main.js 文件里面引入 jQuery ，则需要这样加：</p><p>import $ from 'jquery'
window.$ = $ //原因：设置变量但未使用，编辑器会报错。</p><p>任何都要选择备份，备份。</p><p> </p></div>