Vue使用内容

爱你三千遍斯塔克2023-07-24 23:15

<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: {\\ get() {\\ return {\\ line: function(id) {\\ this.chart = echarts.init(document.getElementById(id));\\ // option就是参数\\ var option = {\\ tooltip: {\\ trigger: 'axis',\\ axisPointer: {\\ type: 'shadow'\\ }\\ },\\ grid: {\\ left: '3%',\\ right: '4%',\\ bottom: '3%',\\ containLabel: true\\ },\\ xAxis: \[{\\ type: 'category',\\ data: \['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'\],\\ axisTick: {\\ alignWithLabel: true\\ }\\ }\],\\ yAxis: \[{\\ type: 'value'\\ }\],\\ series: \[{\\ name: 'Direct',\\ type: 'bar',\\ barWidth: '60%',\\ data: \[10, 52, 200, 334, 390, 330, 220\]\\ }\]\\ };\\ this.chart.setOption(option);\\ }\\ }\\ }\\ }\\ })\\ }\\// 重点三，将Echart给挂载出去\\export default install\\\\2.2main.js文件接受Echart.js文件\\import Echarts from "./js/echart.js"\\Vue.use(Echarts)\\\\2.3使用\\\1647267273673\\\ \\\\3.学习使用smartchart\\\\4.Vue如何实现表格数据自动滚动 \ \\\\\5.vscode格式化代码\\\1647331874668\\\\6.Vue使用ES6模块化\\1.node.js遵循了require()方法\\2.模块对外共享成员使用module.exports对象\\\\6.1 ES6诞生的意义\\太多的模块化规范给开发者增加了学习的难度和开发的成本，因此大一统的ES6模块化规范诞生了\\\\6.2 什么是ES6模块\\他是浏览器端和服务器端通用的模块化开发规范\\\\6.3 Es6模块化规范定义\\每个Js文件都是一个独立的模块\\导入其他模块成员需要使用import关键字\\向外共享模块成员使用export关键字\\\\6.4 在node.js中体验ES6模块化\\1.有版本限制 \>14.15.1 node -v\\2.在package.json 的根节点中添加"type":"module"节点\\快速初始化一个包配置化文件\\npm init -y \\初始化包文件pack.json\\"type":"module"\\\\6.5 ES6模块化的基本语法\\\\（1）默认导出与默认导入\\export default 默认导出的成员\\let n1 = 10\\function show(){\\}\\\// 这种方法主要在于我们想要拿这个东西给别人用，或者其他文件用，export default可称挂载\\\export default{\\n1,\\show\\}\\\1647355287377\\\\（2）按需导出与按需导入\\\1647355305787\\\ \\我们在其他文件想要导入其他成员导出的文件\\\\ \import 接受名称 from "模块标识符"（路径和名字都行）\\\ \import m1 from './index.js'\\\ \//打印输出结果\\\\（3）直接导入并执行模块中的代码\\\\6.6 ES6 使用的注意事项\\\\（1）每个模块export default只能挂载一次\\\\(2) 默认导出时的接受名称可以任意名称，只要合法就行\\\\6.7 export 按需导出的成员\\\1647355331177\\按需导出的语法： export 按需导出的成员\\// 当前的模块为,导出变量名用export let\\export let s1 = "aaa" \\let可能为const\\// 向外按需导出方法say\\export function say(){}\\\\6.8 按需导入\\\1647355341542\\按需导入单个成员的语法： import {n1} from '模块标识符'\\按需导入多个成员的语法：import {n1,n2,n3} from '模块标识符'\\一个Bug\\\1647353576631\\如果出现两个文件可能会影响导入和导出\\\\6.9 按需导出与按需导入的注意事项\\\\(1)默认导出导出只能一次，但是按需导出可以多次\\默认导出：\\export default 默认导出的成员\\let n1 = 10\\function show(){\\}\\按需导出：\\export let s1 = "aaa"\\export function say(){}\\\\（2）按需导入的成员名称必须和按需导出的名称一致\\\\（3）按需导入的时候可以用as进行重命名\\import {s1,s2 as st2,s3} from\\console.log(st2);\\\\(4).按需导入可以和默认导入一起使用\\\1647355965415\\导入的info后面加一个，同时export default不用加;\\info指向的是export default定义的内容\\\\7.0 直接导入并执行模块中的代码\\如果只想单纯的执行某个模块中的代码，并不需要得到模块中向外共享的成员，此时可以直接导入并执行模块代码\\创建一个js文件，在使用的文件中直接，import "模块标识符"\\\\8.Vue滑屏的使用\\\https://chenxuan1993.gitee.io/component-document/index_prod#/component/svg-bar-super\\\有进度条，有scroll\\如何使用vue 基于vue-seamless-scroll无缝滚动\\\https://www.jianshu.com/p/a2a7d3a9cf2b\\\gitee详细教程\\\https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/usage.html#\注册组件\\详细教程\\\https://madewith.cn/74\\\\\9.bug解决\\EIO: i/o error, read\\\1648554791613\\解决方法\\又一个bug\\\1648556801596\\This is probably not a problem with npm. There is likely additional logging output above.\\npm ERR! A complete log of this run can be found in:\\解决方法：\\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.\\npm WARN less-loader@5.0.0需要webpack@\^2.0.0 \|\| \^3.0.0 \|\| \^4.0.0的对等项，但没有安装。您必须自己安装对等依赖项。\\\ \\updated 1 package in 5.451s\\92 packages are looking for funding run \npm fund\ for details\\fixed 2 of 5 vulnerabilities in 929 scanned packages 3 vulnerabilities required manual review and could not be updated\\\ \\在5.451s中更新了1个包 92个包裹正在寻找资金 运行"国家预防机制基金"了解详情 修复了929个扫描包中5个漏洞中的2个 3个漏洞需要手动检查，无法更新\\另外一个bug\\解决输入任何npm命令都报Error: Cannot find module 'are-we-there-yet'\\\1648561069152\\删掉：C:\\Users\\Lenovo目录下的 .yarnrc文件\\网上搜了很多都是让删除C:\\Users{账户}\\下的.npmrc文件\\删除了也没用,然后搜了下全电脑的.npmrc文件 \\发现C:\\Users{账户}\\AppData\\Roaming\\npm 这个目录下有很多卸载之前的 npm的东西,就把这个npm整个目录都删了,就好了\\\ \\\ \\\ \\npm cache clean --force\\\ \\\ \\\ \\卸载当前 webpack-cli 的版本，下载 3 . \* 版本配合 5.\* 版本的 webpack 就不会报错。 npm uninstall webpack-cli npm install webpack-cli@3 -D\\第一步：\\\1648612646641\\第二步：\\\1648612670417\\这个方法没有找到解决问题的方法，于是我准备卸载了npm\\\ \\第一步：将node给卸载\\1.node的安装目录文件夹清空。\\2.将.npmrc文件删除\\\1648613363651\\第二步： 重新安装\\\1648613750273\\菜鸟课程的下载地址：\https://www.runoob.com/nodejs/nodejs-install-setup.html\\\下一步进行npm 的安装\\ \npm install npm -g\ \\npm install npm -g\*\* \\下载完成后需要重新配置npm环境变量\\2.环境变量配置：\\第一步点击我的电脑属性\\\1648614666590\\ \\第二步 点击高级设置\\\1648614690691\\第三步点击高级环境变量 \\\1648614729813\\第四步 找到系统变量中的path,点击编辑\\\1648614896683\\点击编辑之后，输入node的路径\\\1648615030955\\有的伙伴可能不知道npm 的路径，cmd中输入npm config get prefix\\\ \\又一个bug:\\cmd 下的npm 无论执行什么都出这个\\\1648637912841\\\ \\文件夹访问被拒绝\\\1648639479250\\你需要MS-ZCONDNUGNWCX\\Administrator 的权限才能进行更改\\第一步：右键点击属性：\\\1648639645638\\第二步：点击安全\\\1648639689394\\第三步： 选择MS-ZCONDNUGNWCX\\Administrator\\\\10. promise使用的场景\\\1649559620308\\而promise的诞生正好解决了回调地狱的问题。\\\\10.1promise的基本概念\\\\\164956012636110.2 三个文件，如何按照顺序分别进行读取\\\1649560485953\\不使用promise函数进行调用文件：\\\1649562044122\ \\\10.3 通过异步读取文件：\\\1649562194143\\第一步：打包pack.json文件：\\npm init -y\\第二步： 解决bug:A complete log of this run can be found in:\\\ \\\1649563208916\\ npm install npm -g\\第三步：解决\Not Found - GET \https://registry.npmjs.org/\- Not found\\\\1649563381072\\npm config set registry \https://registry.npm.taobao.org\\\需要使用then-fs对文件进行读取：\\npm install then-fs\\\\11.路径设置\\

    \相对路径和绝对路径的定义\\\路径通常分为绝对路径和相对路径。\\绝对路径是文件的完整 URL，比如\\\\\
    \
    \
    \