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秒钟内，信号从…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
Java入门学习详细版（一）
大家好，Java 学习是一个系统学习的过程，核心原则就是“理论 实践 坚持”，并且需循序渐进，不可过于着急，本篇文章推出的这份详细入门学习资料将带大家从零基础开始，逐步掌握 Java 的核心概念和编程技能。 …...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了，就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
【Linux】Linux 系统默认的目录及作用说明
博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
大模型——基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程
基于Docker+DeepSeek+Dify ：搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网：https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘，大小大概2.9G，做这行最忌讳的就是安装软件全装C盘，所以我调整了下安装路径。 新建安装目录：E:\MyS…...