当前位置： 首页 > news >正文

Vue脚手架相关记录

news 2025/12/22 17:58:58

脚手架

安装与配置

安装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"/>

② 接收数据：

  1. 第一种方式（只接收）：
    props:[‘name’]
  2. 第二种方式（限制类型）：
    props:{name:String}
  3. 第三种方式（限制类型、限制必要性、指定默认值）：
    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解…...

编程日记 2024/12/19 14:48:18

基于Docker的Minio分布式集群实践

目录 1. 说明 2. 配置表 3. 步骤 3.1 放行服务端口 3.2 docker-compose 编排 4. 入口反向代理与负载均衡配置 4.1 api入口 4.2 管理入口 5. 用例 6. 参考 1. 说明 以多节点的Docker容器方式实现minio存储集群&#xff0c;并配以nginx反向代理及负载均衡作为访问入口。…...

编程日记 2024/12/19 14:44:14

Scala 的迭代器

迭代器定义&#xff1a;迭代器不是一种集合&#xff0c;它是一种用于访问集合的方法。 迭代器需要通过集合对应的迭代器调用迭代器的方法来访问。 支持函数式编程风格&#xff0c;便于链式操作。 创建一个迭代器&#xff0c;相关代码如下&#xff1a; object Test {def mai…...

编程日记 2024/12/19 14:42:12

vue实现文件流形式的导出下载

文章目录 Vue 项目中下载返回的文件流操作步骤一、使用 Axios 请求文件流数据二、设置响应类型为 ‘blob’三、创建下载链接并触发下载四、在 Vue 组件中集成下载功能五、解释与实例说明1、使用 Axios 请求文件流数据&#xff1a;设置响应类型为 blob&#xff1a;创建下载链接并…...

编程日记 2024/12/19 14:40:08

【DIY飞控板PX4移植】深入理解NuttX下PX4串口配置：ttyS设备编号与USARTUART对应关系解析

深入理解NuttX下PX4串口配置&#xff1a;ttyS设备编号与USART&UART对应关系解析 引言问题描述原因分析结论 引言 在嵌入式系统开发中&#xff0c;串口&#xff08;USART/UART&#xff09;的配置是一个常见但关键的任务。对于使用 NuttX 作为底层操作系统的飞控系统&#x…...

编程日记 2024/12/19 14:37:04

【报错解决】vsvars32.bat 不是内部或外部命令，也不是可运行的程序或批处理文件

报错信息&#xff1a; 背景问题&#xff1a;Boost提示 “cl” 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件时&#xff0c;   按照这篇博客的方法【传送】添加了环境变量后&#xff0c;仍然报错&#xff1a; 报错原因&#xff1a; vsvars32.bat 的路径不正…...

编程日记 2024/12/19 14:35:02

CTFshow-文件上传(Web151-170)

CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇&#xff08;web151-170&#xff0c;看这一篇就够啦&#xff09;-CSDN博客 Web151 要求png&#xff0c;然后上传带有一句话木马的a.png&#xff0c;burp抓包后改后缀为a.php&#xff0c;然后蚁剑连接&#xff0c;找fl…...

编程日记 2024/12/19 14:33:59

深度学习基础--将yolov5的backbone模块用于目标识别会出现怎么效果呢？？

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 yolov5网络结构比较复杂&#xff0c;上次我们简要介绍了yolov5网络模块&#xff0c;并且复现了C3模块&#xff0c;深度学习基础–yolov5网络结构简介&a…...

编程日记 2024/12/19 14:29:55

操作系统（16）I/O软件

前言 操作系统I/O软件是负责管理和控制计算机系统与外围设备&#xff08;例如键盘、鼠标、打印机、存储设备等&#xff09;之间交互的软件。 一、I/O软件的定义与功能 定义&#xff1a;I/O软件&#xff0c;也称为输入/输出软件&#xff0c;是计算机系统中用于管理和控制设备与主…...

编程日记 2024/12/19 14:27:52

leetcode437.路径总和III

标签&#xff1a;前缀和 问题&#xff1a;给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下…...

编程日记 2024/12/19 14:24:50

WebGPU、WebGL 和 OpenGL/Vulkan对比分析

WebGPU、WebGL 和 OpenGL/Vulkan 都是用于图形渲染和计算的图形API&#xff0c;但它们的设计理念、功能和适用场景有所不同。以下是它们的总结和对比分析&#xff1a; 1. WebGPU WebGPU 是一个新的、现代化的图形和计算API&#xff0c;设计目的是为Web平台提供更接近硬件的性…...

编程日记 2024/12/19 14:22:48

不可重入锁与死锁

不可重入锁确实可能导致死锁&#xff0c;特别是在同一线程尝试多次获取同一把锁时。如果锁是不可重入的&#xff0c;那么线程在第二次尝试获取锁时会永远阻塞&#xff0c;从而导致死锁。 不可重入锁与死锁的关系 不可重入锁不允许同一个线程多次获取同一把锁。在以下情况下&am…...

编程日记 2024/12/19 14:21:47

XXE-Lab靶场漏洞复现

1.尝试登录 输入账号admin/密码admin进行登录&#xff0c;并未有页面进行跳转 2.尝试抓包分析请求包数据 我们可以发现页面中存在xml请求&#xff0c;我们就可以构造我们的xml请求语句来获取想要的数据 3.构造语句 <?xml version"1.0" ?> <!DOCTYPE fo…...

编程日记 2024/12/19 14:19:45

从Windows到Linux：跨平台数据库备份与还原

数据库的备份与还原 目录 引言备份 2.1 备份所有数据库2.2 备份单个数据库2.3 备份多个指定数据库 传输备份文件还原 4.1 还原所有数据库4.2 还原单个数据库4.3 还原多个指定数据库 注意事项拓展 1. 引言 在不同的操作系统间进行数据库迁移时&#xff0c;命令行工具是我们的…...

编程日记 2024/12/19 14:17:42

upload-labs

Win平台靶场 靶场2 教程 教程 教程 pass-01 bash 本pass在客户端使用js对不合法图片进行检查&#xff01;前端绕过, 禁用前端js代码, 或者上传图片, 抓包改后缀为 php , 后端没有校验 bash POST /Pass-01/index.php HTTP/1.1 Host: 47.122.3.214:8889 Content-Length: 49…...

编程日记 2024/12/19 14:14:37

【西门子PLC.博途】——面向对象编程及输入输出映射FC块

当我们做面向对象编程的时候&#xff0c;需要用到输入输出的映射。这样建立的变量就能够被复用&#xff0c;从而最大化利用了我们建立的udt对象。 下面就来讲讲映射是什么。 从本质上来说&#xff0c;映射就是拿实际物理对象对应程序虚拟对象&#xff0c;假设程序对象是I0.0&…...

编程日记 2024/12/19 14:12:30

牛客周赛 Round 72 题解

本次牛客最后一个线段树之前我也没碰到过&#xff0c;等后续复习到线段树再把那个题当例题发出来 小红的01串&#xff08;一&#xff09; 思路&#xff1a;正常模拟&#xff0c;从前往后遍历一遍去统计即可 #include<bits/stdc.h> using namespace std; #define int lo…...

编程日记 2024/12/19 14:07:24

Flux Tools 结构简析

Flux Tools 结构简析 BFL 这次一共发布了 Canny、Depth、Redux、Fill 四个 Tools 模型系列&#xff0c;分别对应我们熟悉的 ControlNets、Image Variation&#xff08;IP Adapter&#xff09;和 Inpainting 三种图片条件控制方法。虽然实现功能是相同的&#xff0c;但是其具体…...

编程日记 2024/12/19 14:05:23

0 前言

ArCS作为一个基于Rust的CAD&#xff08;计算机辅助设计&#xff09;开源系统&#xff0c;尽管已经有四年未更新&#xff0c;但其设计理念和技术实现仍然具有很高的学习和参考价值。以下是对ArCS项目的进一步分析和解读&#xff1a; 一、项目亮点与技术优势 高效与安全的Rust语…...

编程日记 2024/12/19 14:02:19

ARM嵌入式学习--第八天（PWM）

PWM -PWM介绍 PWM&#xff08;pulse Width Modulation&#xff09;简称脉宽调制&#xff0c;是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术&#xff0c;广泛应用在测量&#xff0c;通信&#xff0c;工控等方面 PWM的频率 是指在1秒钟内&#xff0c;信号从…...

编程日记 2024/12/19 14:00:15

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/12/19 19:20:34

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/12/17 20:27:08

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/12/17 11:45:21

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/22 15:10:06

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/12/22 8:31:54