Vue脚手架相关记录
脚手架
安装与配置
安装node
node -> 16.20.2
切换淘宝镜像
npm install -g cnpm -registry=http://registry.npm.taobao.orgnpm config set registry http://registry.npm.taobao.org/
使用了第二个,下一步才有用
安装vue
npm install -g @vue/cli
vscode中不给运行vue解决办法
set-ExecutionPolicy RemoteSigne
问题就是脚本的执行策略不行,应该是安全问题
创建vue项目
vue create jplan
vue还不给输入大写
项目结构
main.js是整个项目的入口
import Vue from 'vue'
import App from './App.vue'
//关闭生产提示
Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')$mount(‘#app’) 挂载根组件，和el没区别
public 下的index.html
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 针对IE浏览器的配置 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想视口 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 配置页签的图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 配置网页标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 浏览器不支持js的时候，这个就会出现 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 跟组件 --><div id="app"></div><!-- built files will be auto injected --></body></html>render函数
正常来说，我们
import Vue from 'vue',导入的是阉割版的vue.js
esm的意思是 es module，es6模块化引入
import Vue from 'vue'
// import App from './App.vue'Vue.config.productionTip = falsenew Vue({// render: h => h(App),render(createElement) {return createElement('h1','哈哈哈')}
}).$mount('#app')
render函数实际上就是以上这个函数，默认的写法是简化的写法
vue.js 是完整版Vue 包含 核心功能 + 模板解析器
vue.runtime.esm.js 是运行版的Vue，只有核心功能
因为vue.runtime.esm.js没有模板解析器，所以不能使用template配置项，只能使用render函数，接收到createment函数去指定具体内容
组件里边的template有解析器解析
修改默认配置
查看脚手架的默认配置
vue inspect > output.js
命令的意思是，生成要给output.js的文件
默认的配置，webpack不会让我们看，我们要修改的话
就得修改vue.config.js
module.exports = {pages: {index: {//入口entry: 'src/peiqi.js'}},//关闭eslintlintOnSave:false
}
例如上面，我们修改入口，把main.js改成peiqi.js
最后这个配置会合并到webpack上的，所以这里是common.js的语法
这些配置可以在vue-cli的官网上进行配置
vue-cli官网
ref
如果我们想要得到原生的dom
如果不用ref的话，如下使用
<template><div><h2 v-text="msg" id="title"></h2><button @click="showInfo">点我查看dom</button></div></template><script>
export default {name: 'School',data() {return {msg:'wofe fuck'}},methods: {showInfo() {console.log(document.getElementById('title'));}}
}
</script><style></style>这样写不好看，我们在dom上写ref
this指向的是组件实例对象，找到$refs下的title
注意，如果这里的标签是组件的话，获得就不是dom了，而是组件实例对象
<template><div id="app"><School ref="sch"></School><button @click="showInfo">点我</button></div></template><script>
import School from './components/School.vue'export default {name: 'App',components: {School},methods: {showInfo() {console.log(this.$refs.sch);}}
}
</script><style></style>
但是需要注意的是，如果我们用id来获取组，得到依然是真实dom
props(父 -> 子组件传值)
3、props配置项
（1） 功能：让组件接收外部传来的数据
① 传递数据：<Demo name="xxx"/>
② 接收数据：
- 第一种方式（只接收）：
props:[‘name’] - 第二种方式（限制类型）：
props:{name:String} - 第三种方式（限制类型、限制必要性、指定默认值）：
props: {
name:{
type:String, //类型
required:true, //必要性
default:‘老王’ //默认值
}
}
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
src/components/Student.vue
<template><div><h1>{{msg}}</h1><h2>学生姓名：{{studentName}}</h2><h2>性别：{{sex}}</h2><h2>年龄：{{myAge+1}}</h2><button @click="updateAge">尝试修改收到的年龄</button></div></template><script>
export default {name:'Student',data(){return {msg:'晚安',myAge:this.age}},methods:{updateAge(){this.myAge++}},//简单声明接收//props接收到的数据不可以改// props:['studentName','sex','age'] //接收的同时对数据进行类型限制/* props:{studentName:String,sex:String,age:Number} *///接收的同时对数据进行类型限制+指定默认值+必要性的限制props:{studentName:{type:String, //studentName的类型是字符串required:true //studentName是必要的},age:{type:Number,default:99 //默认值 required 和deafault不会同时出现},sex:{type:String,required:true}}
}
</script>src/App.vue
<template>
<div><!-- v-bind：里面装表达式 --><Student studentName="玛卡巴卡" sex="男" :age="18"/>
</div></template><script>
//汇总所有的组件(引入School组件)
import Student from './components/Student.vue'
export default {name:'App',components:{ Student }
}
</script>需要注意的是,传值的时候默认传过来的是字符串,如果要想再子组件中使用为变量,就是在传值的时候,前面加个:,类似如下的age
<Student studentName="玛卡巴卡" sex="男" :age="18"/>
mixin
混合，将多个组件公用的配置提取成一个混入对象
有点像封装
export const mixin = {methods: {showName() {alert(this.name)}},mounted() {console.log('halllo');}
}
mixin.js
局部混入
使用配置项mixins 里边是数组形式
全局混入
import Vue from 'vue'
import App from './App.vue'//全局混入
import {mixin} from './mixin'
Vue.mixin(mixin);Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')插件
简单使用
plugin.js
export default {install() {console.log('这是插件');}
}
main.js
效果
注意
install,可以接收参数
install(Vue,options) {
}
我们在插件里边可以获取Vue的对象
plugin.js
export default {install(Vue) {console.log(Vue);}
}
我们可以干很多事情
scoped
让样式在局部生效,防止冲突
<style scoped></scoped>
动画效果
缓缓的从左边进来
隐藏的时候,缓缓的从右往左走
<template><div class="app"><div><button @click="isShow = !isShow">点击隐藏</button></div><transition appear><h1 v-show="isShow">{{ msg }}</h1></transition></div>
</template><script>export default {name: 'App',data() {return {msg: '你好啊！',isShow: true}}
}
</script><style scoped>
h1 { background-color: aqua;
}.v-enter-active {animation: jjking 1s;
}.v-leave-active {animation: jjking 1s reverse;
}@keyframes jjking {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
</style>
最原始的写法
在样式里边写.v-enter-active
.v-leave-active
必须这么写
<transition appear><h1 v-show="isShow">{{ msg }}</h1>
</transition><transition :appear="true"><h1 v-show="isShow">{{ msg }}</h1>
</transition>
两种写法都是一样的
动画起名字
<transition :appear="true" name="hello"><h1 v-show="isShow">{{ msg }}</h1>
</transition>.hello-enter-active {animation: jjking 1s;
}.hello-leave-active {animation: jjking 1s reverse;
}@keyframes jjking {from {transform: translateX(-100%);}to {transform: translateX(0px);}
}
把v改成对应的名字即可
集成第三方库
npm install animate.css
<template><div class="app"><div><button @click="isShow = !isShow">点击隐藏</button></div><transition-groupappearname="animate__animated animate__bounce"enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><h1 v-show="isShow" key="1">{{ msg }}</h1></transition-group></div>
</template><script>
import 'animate.css';
export default {name: 'App',data() {return {msg: '你好啊！',isShow: true}}
}
</script><style scoped>
h1 { background-color: aqua;
}
</style>
必须写
name
enter-active-class=“animate__swing”
leave-active-class=“animate__backOutUp”
注意要给过度的元素添加key,不然会报错
配置代理
安装axios
npm i axios
方法一
在vue.config.js中添加如下配置：
devServer:{proxy:"http://localhost:5000"
}
这样是简单的配置,缺点是灵活性差,并且不能设置多台服务器
发请求代码
getStudentData() {axios.get('http://localhost:8080/students').then((res) => {console.log(res.data);})
}
vue-cli 帮我们开启了一个虚拟服务器 localhost:8080 和我们vue服务器一致
虚拟的代理服务器和服务器去交互,proxy写的是请求转发的地址
且优先匹配的是前端的8080下的资源,如果前端8080下没有,就去找代理服务器
方法二
module.exports = {devServer: {proxy: {'/api1': {// 匹配所有以 '/api1'开头的请求路径target: 'http://localhost:5000',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api1': ''}},'/api2': {// 匹配所有以 '/api2'开头的请求路径target: 'http://localhost:5001',// 代理目标的基础路径changeOrigin: true,pathRewrite: {'^/api2': ''}}}}
}
/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080changeOrigin默认值为true
*/
发请求代码
getStudentData() {axios.get('http://localhost:8080/api1/students').then((res) => {console.log(res.data);})}
我们在localhost后边写前缀
需要注意的是这里的pathRewrite()必须写
因为我们发请求给虚拟服务器,他拿到的前缀是 /api1/students,整体的请求路径应该是
target里边的路径 + /api1/students ->localhost:5000/api1/students
服务器端不认识,所以这里得把api1用正则给替换成空字符串
相关文章：
Vue脚手架相关记录
脚手架 安装与配置 安装node node -> 16.20.2 切换淘宝镜像 npm install -g cnpm -registryhttp://registry.npm.taobao.orgnpm config set registry http://registry.npm.taobao.org/使用了第二个,下一步才有用 安装vue npm install -g vue/clivscode中不给运行vue解…...
基于Docker的Minio分布式集群实践
目录 1. 说明 2. 配置表 3. 步骤 3.1 放行服务端口 3.2 docker-compose 编排 4. 入口反向代理与负载均衡配置 4.1 api入口 4.2 管理入口 5. 用例 6. 参考 1. 说明 以多节点的Docker容器方式实现minio存储集群，并配以nginx反向代理及负载均衡作为访问入口。…...
Scala 的迭代器
迭代器定义：迭代器不是一种集合，它是一种用于访问集合的方法。 迭代器需要通过集合对应的迭代器调用迭代器的方法来访问。 支持函数式编程风格，便于链式操作。 创建一个迭代器，相关代码如下： object Test {def mai…...
vue实现文件流形式的导出下载
文章目录 Vue 项目中下载返回的文件流操作步骤一、使用 Axios 请求文件流数据二、设置响应类型为 ‘blob’三、创建下载链接并触发下载四、在 Vue 组件中集成下载功能五、解释与实例说明1、使用 Axios 请求文件流数据：设置响应类型为 blob：创建下载链接并…...
【DIY飞控板PX4移植】深入理解NuttX下PX4串口配置：ttyS设备编号与USARTUART对应关系解析
深入理解NuttX下PX4串口配置：ttyS设备编号与USART&UART对应关系解析 引言问题描述原因分析结论 引言 在嵌入式系统开发中，串口（USART/UART）的配置是一个常见但关键的任务。对于使用 NuttX 作为底层操作系统的飞控系统&#x…...
【报错解决】vsvars32.bat 不是内部或外部命令，也不是可运行的程序或批处理文件
报错信息： 背景问题：Boost提示 “cl” 不是内部或外部命令，也不是可运行的程序或批处理文件时， 按照这篇博客的方法【传送】添加了环境变量后，仍然报错： 报错原因： vsvars32.bat 的路径不正…...
CTFshow-文件上传(Web151-170)
CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇（web151-170，看这一篇就够啦）-CSDN博客 Web151 要求png，然后上传带有一句话木马的a.png，burp抓包后改后缀为a.php，然后蚁剑连接，找fl…...
深度学习基础--将yolov5的backbone模块用于目标识别会出现怎么效果呢？？
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊 前言 yolov5网络结构比较复杂，上次我们简要介绍了yolov5网络模块，并且复现了C3模块，深度学习基础–yolov5网络结构简介&a…...
操作系统（16）I/O软件
前言 操作系统I/O软件是负责管理和控制计算机系统与外围设备（例如键盘、鼠标、打印机、存储设备等）之间交互的软件。 一、I/O软件的定义与功能 定义：I/O软件，也称为输入/输出软件，是计算机系统中用于管理和控制设备与主…...
leetcode437.路径总和III
标签：前缀和 问题：给定一个二叉树的根节点 root ，和一个整数 targetSum ，求该二叉树里节点值之和等于 targetSum 的 路径 的数目。路径 不需要从根节点开始，也不需要在叶子节点结束，但是路径方向必须是向下…...
WebGPU、WebGL 和 OpenGL/Vulkan对比分析
WebGPU、WebGL 和 OpenGL/Vulkan 都是用于图形渲染和计算的图形API，但它们的设计理念、功能和适用场景有所不同。以下是它们的总结和对比分析： 1. WebGPU WebGPU 是一个新的、现代化的图形和计算API，设计目的是为Web平台提供更接近硬件的性…...
不可重入锁与死锁
不可重入锁确实可能导致死锁，特别是在同一线程尝试多次获取同一把锁时。如果锁是不可重入的，那么线程在第二次尝试获取锁时会永远阻塞，从而导致死锁。 不可重入锁与死锁的关系 不可重入锁不允许同一个线程多次获取同一把锁。在以下情况下&am…...
XXE-Lab靶场漏洞复现
1.尝试登录 输入账号admin/密码admin进行登录，并未有页面进行跳转 2.尝试抓包分析请求包数据 我们可以发现页面中存在xml请求，我们就可以构造我们的xml请求语句来获取想要的数据 3.构造语句 <?xml version"1.0" ?> <!DOCTYPE fo…...
从Windows到Linux：跨平台数据库备份与还原
数据库的备份与还原 目录 引言备份 2.1 备份所有数据库2.2 备份单个数据库2.3 备份多个指定数据库 传输备份文件还原 4.1 还原所有数据库4.2 还原单个数据库4.3 还原多个指定数据库 注意事项拓展 1. 引言 在不同的操作系统间进行数据库迁移时，命令行工具是我们的…...
upload-labs
Win平台靶场 靶场2 教程 教程 教程 pass-01 bash 本pass在客户端使用js对不合法图片进行检查！前端绕过, 禁用前端js代码, 或者上传图片, 抓包改后缀为 php , 后端没有校验 bash POST /Pass-01/index.php HTTP/1.1 Host: 47.122.3.214:8889 Content-Length: 49…...
【西门子PLC.博途】——面向对象编程及输入输出映射FC块
当我们做面向对象编程的时候，需要用到输入输出的映射。这样建立的变量就能够被复用，从而最大化利用了我们建立的udt对象。 下面就来讲讲映射是什么。 从本质上来说，映射就是拿实际物理对象对应程序虚拟对象，假设程序对象是I0.0&…...
牛客周赛 Round 72 题解
本次牛客最后一个线段树之前我也没碰到过，等后续复习到线段树再把那个题当例题发出来 小红的01串（一） 思路：正常模拟，从前往后遍历一遍去统计即可 #include<bits/stdc.h> using namespace std; #define int lo…...
Flux Tools 结构简析
Flux Tools 结构简析 BFL 这次一共发布了 Canny、Depth、Redux、Fill 四个 Tools 模型系列，分别对应我们熟悉的 ControlNets、Image Variation（IP Adapter）和 Inpainting 三种图片条件控制方法。虽然实现功能是相同的，但是其具体…...
0 前言
ArCS作为一个基于Rust的CAD（计算机辅助设计）开源系统，尽管已经有四年未更新，但其设计理念和技术实现仍然具有很高的学习和参考价值。以下是对ArCS项目的进一步分析和解读： 一、项目亮点与技术优势 高效与安全的Rust语…...
ARM嵌入式学习--第八天（PWM）
PWM -PWM介绍 PWM（pulse Width Modulation）简称脉宽调制，是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术，广泛应用在测量，通信，工控等方面 PWM的频率 是指在1秒钟内，信号从…...
Llama-3.2V-11B-cot实战教程：集成Whisper实现音视频+图像联合推理
Llama-3.2V-11B-cot实战教程：集成Whisper实现音视频图像联合推理 1. 项目概述与核心能力 Llama-3.2V-11B-cot是一个强大的视觉语言模型，它不仅能理解图像内容，还能进行系统性推理。这个模型基于LLaVA-CoT论文实现，特别适合需要结…...
OpenClaw技能组合：用Qwen2.5-VL-7B+OCR实现全自动发票报销
OpenClaw技能组合：用Qwen2.5-VL-7BOCR实现全自动发票报销 1. 为什么需要自动化发票报销 每次月底整理发票都让我头疼——需要手动截图、识别金额、填写报销单、发送邮件。直到我发现OpenClaw可以通过组合多个技能模块，实现从截图识别到财务审核的全流程…...
四轴飞行器飞控编写教程
四轴飞行器飞控编写教程 写在前面 这份教程专门为零基础的初学者编写。如果你刚接触四轴飞行器不知道从何下手，听说过PID控制但不理解它是怎么工作的，看过飞控代码但感觉像天书一样看不懂，想自己动手写飞控但不知道从哪里开始——那么这份教程…...
别再让MCU直连MOSFET了！用N531搭建你的第一个栅极驱动电路（附PCB文件）
从零构建高效MOSFET驱动电路：N531实战指南 在嵌入式开发中，直接使用MCU的GPIO驱动功率MOSFET是一个常见但危险的做法。我曾亲眼见过一个智能家居项目因为这种设计导致整个控制板烧毁——MOSFET开关缓慢产生的高温不仅损坏了功率器件，还反向影…...
终极gsudo扩展功能开发指南：5个自定义插件与模块开发技巧
终极gsudo扩展功能开发指南：5个自定义插件与模块开发技巧 【免费下载链接】gsudo Sudo for Windows 项目地址: https://gitcode.com/gh_mirrors/gs/gsudo gsudo是Windows系统上的命令行权限提升工具，为开发者提供了类似Unix系统中sudo命令的功能。…...
Toybox代码贡献指南：从入门到精通的开源参与流程
Toybox代码贡献指南：从入门到精通的开源参与流程 【免费下载链接】toybox toybox 项目地址: https://gitcode.com/gh_mirrors/to/toybox Toybox是一个集成了多种Linux命令行工具的开源项目，通过单一的多调用二进制文件提供丰富功能。本指南将带您…...
Python数据分析实战：用Seaborn绘制炫酷相关性热力图（附完整代码）
Python数据分析实战：用Seaborn绘制炫酷相关性热力图 数据分析工作中，相关性分析是理解变量间关系的核心技能。而热力图作为直观展示相关性的工具，已经成为数据科学家和商业分析师的标准配置。本文将带你从零开始，掌握用Seaborn绘…...
【Python内存管理终极指南】：20年专家亲授智能内存优化策略与OOM报错秒级修复方案
第一章：Python智能体内存管理策略Python智能体（如基于LLM的Agent、ReAct框架实例或自主任务规划器）在运行过程中常面临对象生命周期动态、引用关系复杂、中间状态缓存频繁等挑战。其内存管理不能仅依赖CPython默认的引用计数与循环垃圾回收&a…...
2026年山东省首版次高端软件申报已经开始，中承信安助力企业快速申报
对于山东省内软件和信息技术领域的企业而言，首版次高端软件申报是获取省级政策资金扶持、强化产品核心竞争力、拓宽市场发展空间的核心抓手。2026 年山东省首版次高端软件申报工作已全面启动，然而不少企业却面临政策细则把握不准、申报门槛判断不清、申报…...
Arduino轻量URL编解码库：RFC 3986兼容的嵌入式urlencode/urldecode实现
1. 项目概述URLCode 是一个专为 Arduino 平台设计的轻量级 URL 编解码库，其核心目标是提供符合 RFC 3986 标准的application/x-www-form-urlencoded格式字符串的编码（urlencode）与解码（urldecode）能力。该库不依赖 Ard…...