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

Vue脚手架相关记录

news 文章来源：https://blog.csdn.net/weixin_52232901/article/details/144463230 2025/5/12 7:12:00

脚手架

安装与配置

安装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解…...

编程日记 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存储集群，并配以nginx反向代理及负载均衡作为访问入口。…...

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

Scala 的迭代器

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

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

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

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

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

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

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

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

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

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

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

CTFshow-文件上传(Web151-170)

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

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

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

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

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

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

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

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

leetcode437.路径总和III

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

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

WebGPU、WebGL 和 OpenGL/Vulkan对比分析

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

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

不可重入锁与死锁

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

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

XXE-Lab靶场漏洞复现

1.尝试登录输入账号admin/密码admin进行登录，并未有页面进行跳转 2.尝试抓包分析请求包数据我们可以发现页面中存在xml请求，我们就可以构造我们的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. 引言在不同的操作系统间进行数据库迁移时，命令行工具是我们的…...

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

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…...

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

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

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

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

牛客周赛 Round 72 题解

本次牛客最后一个线段树之前我也没碰到过，等后续复习到线段树再把那个题当例题发出来小红的01串（一） 思路：正常模拟，从前往后遍历一遍去统计即可 #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 模型系列，分别对应我们熟悉的 ControlNets、Image Variation（IP Adapter）和 Inpainting 三种图片条件控制方法。虽然实现功能是相同的，但是其具体…...

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

0 前言

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

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

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

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

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

遇到“REMOTE HOST IDENTIFICATION HAS CHANGED!”（远程主机识别已更改）的警告

连接虚拟机时提示报错： [insocoperhq-soc-cap-raw3 ~]$ ssh root10.99.141.104WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-midd…...

编程日记 2024/12/19 13:56:07

vue3前端组件库的搭建与发布（一）

前言： 最近在做公司项目中，有这么一件事情，很是头疼，就是同一套代码，不同项目，要改相同bug，改好多遍，改的都想吐，于是就想做一个组件库，这样更新一下就全都可…...

编程日记 2024/12/19 13:51:00

COMSOL快捷键及内置函数

文章目录 COMSOL快捷键使用COMSOL算子求最大值和最小值COMSOL内置函数3.1 解析函数3.2 插值函数3.3 分段函数3.4 高斯脉冲函数3.5 斜坡函数3.6 矩形函数3.7 波形函数3.8 随机函数3.9 Matlab函数3.10 SWITCH函数 COMSOL快捷键 Ctrl＋/ 可快速打开预定义的物理量列表。…...

编程日记 2024/12/19 13:48:58