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

Vue 项目搭建

news 文章来源：https://blog.csdn.net/Komorebi_00/article/details/132376683 2024/10/7 10:18:36

环境配置

1. 安装node.js

官网：nodejs（推荐 v10 以上）
官网：npm 是什么？

由于vue的安装与创建依赖node.js（JavaScript的运行环境）里的npm（包管理和分发工具），因此需要先确保安装node.js。

检测方式：打开cmd命令窗口（Window + R，输入cmd然后回车），输入 node -v 回车，正常显示node.js版本代表已安装。

因为npm会随着node.js一起安装，所以，只要是node.js正常安装，就代表npm已经安装。

检测方式：cmd命令窗口输入 npm -v 回车，能正常显示npm版本。

2. 安装vue脚手架：Vue CLI

官网：https://cli.vuejs.org/zh/

按照官方文档说明，安装命令为 npm install -g @vue/cli 。然而，原生npm的下载速度，大家都懂的…

因此，我们使用淘宝镜像来安装，命令：npm install -g @vue/cli --registry=https://registry.npm.taobao.org

等个三分钟左右，安装完成。cmd命令窗口输入 vue -V（V大写） 回车，能正常显示@vue/cli版本。

用 vue cli 自动搭建项目

  1. 创建vue项目

    vue-cli2.x 版本
    1. 创建一个基于 webpack 模板的新项目 :【vue init webpack ”项目名称“】
    2. 输入属性
    3. 安装项目：npm install
    4. 运行项目：npm run dev
    vue-cli3.x 版本
    1. 创建新项目 :【vue create ”项目名称“】
    2. 输入属性
    3. 运行项目：npm run serve

    由于vue-cli3 最大的特点就是零配置，脚手架把webpack相关的配置都隐藏在@vue\preload-webpack-plugin中，默认的配置可以满足大部分应用场景。
    使用 vue inspect 可以查看到详细的配置列表。
    当我们需要修改或者扩展webpack配置项时，可以在根目录下新增 vue.config.js 文件

    ui界面创建

    vue2项目ui界面创建

  2. 创建项目时“因为在此系统上禁止运行脚本，需要管理员权限等“报错问题解决

    1. 以管理员身份运行vscode,右键点击VScode选择以管理员身份运行;
2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的;
3. 执行：set-ExecutionPolicy RemoteSigned;
4. 之后再执行get-ExecutionPolicy，就显示RemoteSigned;

手动搭建项目

用cmd命令创建目录并进入：

mkdir myproject && cd myproject

初始化项目

用 npm init 初始化项目：
过程中会让你填写项目名、版本、描述、仓库地址、关键字等信息，执行完毕后会在根目录下生成一个 package.json 文件，这样就初始化结束了。

也可以不填直接回车，或者直接输入 npm init -y，表明所有都默认配置，生成的默认的package.json。不过没关系的，这些配置我们都可以在package.json中手动配置的。

在这里插入图片描述

配置打包工具 webpack

1. 安装webpack

目前最新的webpack版本是5.10.1，但目前市面上大部分项目还都是以webpack4作为项目依赖的，所以我们学习也以webpack4为主。

安装 webpack 和 webpack-cli（此工具用于在命令行中运行 webpack）

# 这里安装的版本较低，所以后面的一些插件和依赖也都尽量安装低版本，否则报错
npm i webpack@4.44.2 webpack-cli@3.3.12 -D

安装完成后我们会发现根目录下新增了一个 node_modules 文件 和 package-lock.json 文件。

2. 了解 webpack 打包

在根目录新建 ./src/index.js 文件，index.js内写个 alert('hello webpack') 来测试。
在 package.json 中，我们在 scripts 中再添加一个打包命令：

"build": "webpack"

运行 npm run build，我们会发现新增了一个 dist 目录，里边存放的是 webpack 构建好的 main.js 文件。在 main.js 里可以找到我们刚才写的 alert(‘hello webpack’) ；

在这里插入图片描述

我们会发现经过 webpack 打包后的代码莫名的多出了那么多代码，而且代码被压缩了，也不方便阅读。同时，看控制台也会警告提示我们mode没有配置。

那我们修改一下打包命令：

"build": "webpack --mode development"

再次执行 npm run build ，这时候代码不压缩了，警告也没了；

在这里插入图片描述

经过上述打包，我们可以了解到的信息和产生的疑问：

  • webpack 的作用：打包我们的代码（疑问：可是明明我们的代码直接就能用，为什么还要打包一下，还多出那么多别的代码？多出来的代码是干嘛的？）

  • 打包命令是执行webpack

  • webpack 4.x 的版本可以零配置就进行构建

  • 构建默认的入口文件就是 ./src/index.js

  • 默认打包到 dist 目录里的 main.js

  • 打包默认是压缩的，也就是默认按生产环境去打包（疑问：--mode development是什么作用？）

  • 以上这些默认我们是否可以自己配置呢？

3. webpack 打包配置

在实际项目中，默认配置基本也满足不了我们的需要，所以我们还是要根据项目来配置webpack。

3.1 配置打包出入口

在根目录新建 webpack 配置文件 webpack.config.js 。注意，一定是这个名字，webpack 打包时会自动寻找这个作为配置文件。

const path = require('path') // 一个 Node.js 核心模块，用于操作文件路径module.exports = {mode: 'none', // 在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，设置为 'none' ，来避免默认操作// path.resolve() 把一个路径或路径片段的序列解析为一个绝对路径。// “__dirname”是node.js中的一个全局变量，指向当前执行脚本所在的目录（此时为根路径）。entry: path.resolve(__dirname, './src/main.js'),output: {// 打包后输出文件的文件名filename: '[name].bundle.js', // [name] 表示入口的名称，此处就是 main// 打包后的文件存放的地方path: path.resolve(__dirname, './dist')}
}

entry 指定的是你想要打包的入口文件， output 指定的是打包后的出口文件。

现在将src目录下的入口文件 index.js 文件重命名为 main.js 文件。

3.2 关联html

要展示给用户，我们需要一个html页面才行，所以我们新建一个index.html ，放在public目录下，并把我们的打包js放进来：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Webpack</title><script src="../dist/main.bundle.js"></script>
</head>
<body>这是一个页面
</body>
</html>

3.3 安装html-webpack-plugin

那我们实际项目中，我们会有很多打包好的文件需要引入，而且路径也是不固定的，手动引入肯定是不行的。所以我们希望webpack帮我们自动的把打包好的文件插入到html中。

这时候我们就会用到一个插件 html-webpack-plugin

安装：

npm install html-webpack-plugin -D

如果安装报错的话使用 --force 或 --legacy-peer-deps 可解决这种情况。

  • 报错原因：
    在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。

  • 解决办法：
    –force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。
    –legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。

建议用–legacy-peer-deps 比较保险一点。在终端重新安装：

npm install --save-dev html-webpack-plugin --legacy-peer-deps

在 webpack 配置中，将 html-webpack-plugin 添加到 plugins 列表中：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// ...plugins: [// html-webpack-plugin 可以将我们的页面和构建 JS 关联起来new HtmlWebpackPlugin({filename: 'index.html', // 配置输出文件名和路径template: path.resolve(__dirname, './public/index.html'), // 配置文件模板inject: true, // 设为 true 表示把JS文件注入到body结尾，CSS文件注入到head中minify: {removeComments: true // 表示删除模版文件中的注释，minify还有很多配置：https://github.com/jantimon/html-webpack-plugin#minification}})],
}

配置好后，我们再次执行打包，可以看到dist目录多了个 index.html 文件，而且我们打包的 js 也自动的插入到 html 中了。

实际开发中，我们会有许多类型文件需要打包，针对不同的类型，webpack有不同的插件来处理，接下来我们来一 一安装配置。

3.4 打包css，css预处理器

使用 style-loader 和 css-loader 来解析和处理 CSS 文件。

  • css-loader 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明；
  • style-loader 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。

安装：

npm i css-loader style-loader -D

配置：

module.exports = {// ...module: {rules: [{test: /\.css/,include: [path.resolve(__dirname, 'src')],use: ['style-loader', 'css-loader'] // 这里放置的顺序不能变，webpack是从下面往上调用的，也就是先调用 css-loader 再调用 style-loader}]}
}

通常我们会使用 Less/Sass 等 CSS 预处理器，webpack 可以通过添加对应的 loader 来支持，以使用 Less 为例，我们使用 less-loader：

安装：

npm install -D less-loader less

配置：

module: {rules: [// ...{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析原则}]
}

3.5 打包图片与文件

使用 file-loader 处理很多类型的文件，它的主要作用是直接输出文件，把构建后的文件路径返回。也可以使用 url-loader 。

file-loader与url-loader的区别： url-loader可以设置图片大小限制，当图片超过限制时，换成file-loader处理，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。

安装：

npm install url-loader file-loader --save-dev

使用：

// 处理图片
module: {rules: [// ...// 处理图片{test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,loader: 'url-loader',options: {limit: 10240,name: 'img/[name].[hash:7].[ext]' // [ext]目标文件/资源​​的文件扩展名}}]
}

3.6 处理JS

这里处理js是指将高级的js代码（ES5+）处理成浏览器认识的js代码（ES5）。

使用 Babel ，这是一个让我们能够使用 ES 新特性的 JS 编译工具，我们可以在 webpack 中配置 Babel，以便使用 ES6、ES7 标准来编写 JS 代码。

安装：

  • babel-loader：作用是实现对使用了ES2015+语法的.js文件进行处理

  • @babel/core：作用在于提供一系列api，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api

  • @babel/preset-env：作用是告诉babel使用哪种 转码规则 进行文件处理

注意 babel-loader 与 babel-core 的版本对应关系：

  1. babel-loader 8.x 对应babel-core 7.x
  2. babel-loader 7.x 对应babel-core 6.x
# webpack 4.x | babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env

配置：

// ----------------------第一种方式----------------------// 在package.json里配置要转码的规则：
"babel": {"presets": ["@babel/preset-env"]
}
// 或者在项目根目录下新建 .babelrc 文件，webpack会自动调用.babelrc里的babel配置选项，然后配置好转码规则：（推荐）
{"presets": ["@babel/preset-env"]
}
// 然后在 webpack.config.js 配置 babel-loader
// 处理js，jsx
{test: /\.jsx?/,exclude: /node_modules/,loader: 'babel-loader'
}// ----------------------第二种方式----------------------// 直接在 webpack.config.js 里配置
{test: /\.jsx?/,exclude: /node_modules/,loader: 'babel-loader',use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}
}

4. 启动本地服务

webpack-dev-server 是一个简单的小型的web服务器，默认端口是8080，并且能够实时重载。

安装：

npm install --save-dev webpack-dev-server

配置：

devServer: {host: 'localhost', // 指定使用一个 host，默认是 localhost。port: '3000', // 设置默认监听端口，如果省略，默认为“8080”publicPath: '/', // 本地服务器的默认地址，默认为 '/'，确保 publicPath 总是以斜杠(/)开头和结尾。contentBase: path.join(__dirname, 'dist'), // 本地服务器所加载的页面所在的目录watchContentBase: true, // 监听 contentBase，文件改变将触发整个页面刷新，默认禁用compress: false, // 是否启用 gzip 压缩inline: true, // 实时刷新hot: true, // 相当于 --hot，启用 webpack.HotModuleReplacementPlugin 插件来实现热加载hotOnly: true, // 类似hotopen: true, // 相当于 --open，打开浏览器historyApiFallback: true, // 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的404响应都将跳转指向 index.htmlheaders: {}, // 头信息overlay: {// 在浏览器全屏展示编译错误与警告warnings: true,errors: true}
}

配置启动命令：

// 可以加上--hot，效果与设置 devServer.hot: true 相同
"script": {"start": "webpack-dev-server --mode development --open"
}

5. 引入 Vue

安装：

npm i vue

在 src 文件夹里面新建 App.vue 文件：

<template><div id="app">Welcome Vue</div>
</template><style lang="less">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;font-size: 48px;margin-top: 100px;
}
</style>

修改main.js：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App)
}).$mount('#app')

执行 npm run start ，发现报错，原因是我们还没配置 Vue Loader ，webpack还不能解析vue文件。

安装：

npm install -D vue-loader vue-template-compiler

在 webpack.config.js 里配置：

const VueLoaderPlugin = require('vue-loader/lib/plugin')module: {rules: [// ...{test: /\.vue$/,loader: 'vue-loader'}]
},
plugins: [// ...// 请确保引入这个插件！new VueLoaderPlugin()
]

注意： 16.x之后版本的 vue-loader 改以解构引入方式引入VueLoaderPlugin：
const { VueLoaderPlugin } = require('vue-loader')

在 public/index.html 里设置：<div id="app"></div>

再次执行 npm run start ，页面成功显示，没有报错：

在这里插入图片描述

相关文章：

Vue 项目搭建

环境配置 1. 安装node.js 官网&#xff1a;nodejs&#xff08;推荐 v10 以上&#xff09; 官网&#xff1a;npm 是什么&#xff1f; 由于vue的安装与创建依赖node.js&#xff08;JavaScript的运行环境&#xff09;里的npm&#xff08;包管理和分发工具&#xff09;&#xff…...

编程日记 2023/8/20 9:17:16

【NetCore】09-中间件

文章目录 中间件&#xff1a;掌控请求处理过程的关键1. 中间件1.1 中间件工作原理1.2 中间件核心对象 2.异常处理中间件:区分真异常和逻辑异常2.1 处理异常的方式2.1.1 日常错误处理--定义错误页的方法2.1.2 使用代理方法处理异常2.1.3 异常过滤器 IExceptionFilter2.1.4 特性过…...

编程日记 2023/8/20 9:16:15

机器学习深度学习——BERT（来自transformer的双向编码器表示）

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位即将上大四&#xff0c;正专攻机器学习的保研er &#x1f30c;上期文章&#xff1a;机器学习&&深度学习——transformer&#xff08;机器翻译的再实现&#xff09; &#x1f4da;订阅专栏&#xff1a;机器学习&am…...

编程日记 2023/8/20 9:15:14

Datawhale Django后端开发入门 Vscode TASK02 Admin管理员、外键的使用

一.Admin管理员的使用 1、启动django服务 使用创建管理员之前&#xff0c;一定要先启动django服务&#xff0c;虽然TASK01和TASK02是分开的&#xff0c;但是进行第二个流程的时候记得先启动django服务&#xff0c;注意此时是在你的项目文件夹下启动的&#xff0c;时刻注意要执…...

编程日记 2023/8/20 9:14:13

【ES5和ES6】数组遍历的各种方法集合

一、ES5的方法 1.for循环 let arr [1, 2, 3] for (let i 0; i < arr.length; i) {console.log(arr[i]) } // 1 // 2 // 32.forEach() 特点&#xff1a; 没有返回值&#xff0c;只是针对每个元素调用func三个参数&#xff1a;item, index, arr &#xff1b;当前项&#…...

编程日记 2023/8/20 9:13:12

学科在线教育元宇宙VR虚拟仿真平台落实更高质量的交互学习

为推动教育数字化&#xff0c;建设全民终身学习的学习型社会、学习型大国&#xff0c;元宇宙企业深圳华锐视点深度融合VR虚拟现实、数字孪生、云计算和三维建模等技术&#xff0c;搭建教育元宇宙平台&#xff0c;为学生提供更加沉浸式的学习体验&#xff0c;提高学习效果和兴趣…...

编程日记 2023/8/20 9:12:10

[python爬虫] 爬取图片无法打开或已损坏的简单探讨

本文主要针对python使用urlretrieve或urlopen下载百度、搜狗、googto&#xff08;谷歌镜像&#xff09;等图片时&#xff0c;出现"无法打开图片或已损坏"的问题&#xff0c;作者对它进行简单的探讨。同时&#xff0c;作者将进一步帮你巩固selenium自动化操作和urllib…...

编程日记 2023/8/20 9:11:07

vue项目预览pdf功能（解决动态文字无法显示的问题）

最近&#xff0c;因为公司项目需要预览pdf的功能&#xff0c;开始的时候找了市面上的一些pdf插件&#xff0c;都能用&#xff0c;但是&#xff0c;后面因为pdf变成了需要根据内容进行变化的&#xff0c;然后&#xff0c;就出现了需要动态生成的文字不显示了。换了好多好多的插件…...

编程日记 2023/8/20 9:10:06

vue3 样式穿透:deep不生效

初学vue3&#xff0c;今天需要修改el-input组件的属性&#xff08;去掉border和文字居右&#xff09; 网上搜了一下&#xff0c;大致都是采用:deep 样式穿透来修改el-input的属性 <div class"input-container"><el-input placeholder"请输入111&qu…...

编程日记 2023/8/20 9:09:05

云原生反模式

通过了解这些反模式并遵循云原生最佳实践&#xff0c;您可以设计、构建和运营更加强大、可扩展和成本效益高的云原生应用程序。 1.单体架构&#xff1a;在云上运行一个大而紧密耦合的应用程序&#xff0c;妨碍了可扩展性和敏捷性。2.忽略成本优化&#xff1a;云服务可能昂贵&am…...

编程日记 2023/8/20 9:08:02

【2023年11月第四版教材】《第5章-信息系统工程（合集篇）》

《第5章-信息系统工程&#xff08;合集篇&#xff09;》 章节说明1 软件工程1.1 架构设计1.2 需求分析1.3 软件设计1.4 软件实现&#xff3b;补充第三版教材内容&#xff3d; 1.5 部署交付 2 数据工程2.1 数据建模2.2 数据标准化2.3 数据运维2.4 数据开发利用2.5 数据库安全 3 …...

编程日记 2023/8/20 9:07:01

【qiankun】微前端在项目中的具体使用

1、安装qiankun npm install qiankun --save2、主应用中注册和配置qiankun 在主应用的入口文件main.ts中&#xff0c;引入qiankun的注册方法&#xff1a; import { registerMicroApps, start } from qiankun;创建一个数组&#xff0c;用于配置子应用的相关信息。每个子应用都…...

编程日记 2023/8/20 9:06:00

云安全与多云环境管理：讨论在云计算和多云环境下如何保护数据、应用程序和基础设施的安全

随着云计算和多云环境的广泛应用&#xff0c;企业正面临着数据、应用程序和基础设施安全的新挑战。在这个数字化时代&#xff0c;保护敏感信息和业务运作的连续性变得尤为重要。本文将深入探讨在云计算和多云环境下如何有效地保护数据、应用程序和基础设施的安全。 章节一&…...

编程日记 2023/8/20 9:04:59

npm install ffi各种失败，换命令npm i ffi-napi成功

网上各种帖子安装ffi&#xff0c;基本上到了windows build tools这里会卡住。 使用命令npm install --global --production windows-build-tools 安装报错信息如下&#xff1a; PS E:\codes\nodejsPath\tcpTest> npm install --global --production windows-build-tools …...

编程日记 2023/8/20 9:03:58

0.flink学习资料

论文&#xff1a; &#xff08;1&#xff09;google dataflow model 下载链接&#xff1a;p1792-Akidau.pdf (vldb.org) Akidau T, Bradshaw R, Chambers C, et al. The dataflow model: a practical approach to balancing correctness, latency, and cost in massive-scal…...

编程日记 2023/8/20 9:02:56

C语言：字符函数和字符串函数

往期文章 C语言&#xff1a;初识C语言C语言&#xff1a;分支语句和循环语句C语言&#xff1a;函数C语言&#xff1a;数组C语言&#xff1a;操作符详解C语言&#xff1a;指针详解C语言&#xff1a;结构体C语言&#xff1a;数据的存储 目录 往期文章前言1. 函数介绍1.1 strlen1.…...

编程日记 2023/8/20 9:01:54

基于.Net Core开发的医疗信息LIS系统源码

SaaS模式.Net Core版云LIS系统源码 医疗信息LIS系统是专为医院检验科设计的一套实验室信息管理系统&#xff0c;能将实验仪器与计算机组成网络&#xff0c;使病人样品登录、实验数据存取、报告审核、打印分发&#xff0c;实验数据统计分析等繁杂的操作过程实现了智能化、自动化…...

编程日记 2023/8/20 9:00:52

部署工业物联网可以选择哪些通信方案？

部署工业物联网有诸多意义&#xff0c;诸如提升生产效率&#xff0c;降低管理成本&#xff0c;保障生产品质稳定&#xff0c;应对长期从业劳动力变化趋势等。针对不同行业、场景&#xff0c;工业物联网需要选择不同的通信方案&#xff0c;以达到成本和效益的最佳平衡。本篇就简…...

编程日记 2023/8/20 8:59:51

flutter-移动端适配

不同屏幕之间的尺寸适配 使用插件 flutter_screenutil flutter_screenutil flutter 屏幕适配方案&#xff0c;用于调整屏幕和字体大小的flutter插件&#xff0c;让你的UI在不同尺寸的屏幕上都能显示合理的布局! 安装 # add flutter_screenutil flutter_screenutil: ^5.8.4 o…...

编程日记 2023/8/20 8:58:49

MySQL 常用函数

一、数学函数 1、ABS(x) 返回绝对值。 mysql> select abs(-4); --------- | abs(-4) | --------- | 4 | --------- 1 row in set (0.00 sec) 2、PI&#xff08;&#xff09; 返回圆周率&#xff0c;并四舍五入保留五位小数。 mysql> select pi(); ----------…...

编程日记 2023/8/20 8:57:48

动态路由的实现—正则表达式

文章目录 前言一、什么是正则表达式&#xff1f;二、正则表达式在动态路由中的作用三、实现一个简单的路由调度器总结 前言 动态路由有很多种实现方式&#xff0c;支持的规则、性能等有很大的差异。例如开源的路由实现gorouter支持在路由规则中嵌入正则表达式&#xff0c;例如…...

编程日记 2023/8/20 8:56:47

Android实现超出固定行数折叠文字“查看全文“、“收起全文“

先上效果图 分析问题 网上有很多关于这个的代码&#xff0c;实现都过于复杂了&#xff0c;github上甚至还看到一篇文章600多行代码&#xff0c;结果一跑起来全是bug。还是自己写吧&#xff01;&#xff01;&#xff01; 如果我们需要换行的"查看全文"、"收起全…...

编程日记 2023/8/20 8:55:45

Python上楼梯问题：递归解法探究（斐波那契变种）（记忆化递归）

文章目录 上楼梯问题&#xff1a;递归解法探究问题定义解决方案1. 递归2. 记忆化递归关于python memo{}默认参数和字典的语法语法功能版本信息注意事项 结论 上楼梯问题&#xff1a;递归解法探究 在这篇文章中&#xff0c;将对上楼梯问题进行深入探讨。上楼梯问题是一种常见的…...

编程日记 2023/8/20 8:54:44

AI重新定义音视频生产力“新范式”

// 编者按&#xff1a;AIGC无疑是当下的热门话题和场景。面对AI带来的技术变革和算力挑战&#xff0c;该如何应对&#xff1f;LiveVideoStackCon 2023上海站邀请到了网心科技副总裁武磊为我们分享网心在面对AI应用场景和业务需求下的实践经验。 文/武磊 编辑/LiveVideoStack …...

编程日记 2023/8/20 8:53:42

Jmeter生成可视化的HTML测试报告

Jmeter也是可以生成测试报告的。 性能测试工具Jmeter由于其体积小、使用方便、学习成本低等原因&#xff0c;在现在的性能测试过程中&#xff0c;使用率越来越高&#xff0c;但其本身也有一定的缺点&#xff0c;比如提供的测试结果可视化做的很一般。 不过从3.0版本开始&…...

编程日记 2023/8/20 8:52:41

5G技术与其对智能城市、物联网和虚拟现实领域的影响

随着第五代移动通信技术&#xff08;5G&#xff09;的到来&#xff0c;我们即将迈向一个全新的数字化世界。5G技术的引入将带来更高的速度、更低的延迟和更大的连接性&#xff0c;推动了智能城市、物联网和虚拟现实等领域的发展。 首先&#xff0c;5G技术将带来超越以往的网络速…...

编程日记 2023/8/20 8:51:40

leetcode做题笔记88. 合并两个有序数组

给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xff0c;合并后数组…...

编程日记 2023/8/20 8:50:37

stm32开关控制led灯泡（附Proteus电路图）

说明&#xff1a;我的灯泡工作电压2V&#xff0c;电流设置为10um,注意了不是10毫安时微安啊&#xff0c;要不然电流太小亮不起来的。 2&#xff1a;我用的开关不是按钮button而是switch, 3&#xff1a;PB0,PB1默认都是低电平&#xff0c;采用了PULLDOWN模式&#xff0c;如果设…...

编程日记 2023/8/20 8:49:35

win10 wsl ubuntu 更换版本为18.04 apt换国内源Python换国内源；默认root

控制面板里面应用模块找到Ubuntu&#xff0c;可以卸载或者移动到其他盘。 Microsoft 应用程序 - ubuntu https://apps.microsoft.com/store/search/ubuntu?hlzh-cn&glcn&rtc1 选择想要的版本安装。 cp /etc/apt/sources.list /etc/apt/sources.list.bak nano /etc/ap…...

编程日记 2023/8/20 8:48:33

C++ Primer 第1章 开始

C Primer 第1章 开始 1.1 编写一个简单的C程序1.1.1 编译、运行程序一、程序源文件命名约定二、从命令行运行编译器 练习 1.2 初识输入输出一、标准输入输出对象二、一个使用IO库的程序三、向流写入数据四、使用标准库中的名字五、从流读取数据六、完成程序 1.3 注释简介一、C中…...

编程日记 2023/8/20 8:47:31

【STM32 学习】电源解析（VCC、VDD、VREF+、VBAT）

VCC电源电压GND电源供电负电压&#xff08;通常接地&#xff09;VDD模块工作正电压VSS模块工作负电压VREFADC参考正电压VREF-ADC参考负电压VBAT电池或其他电源供电VDDA模拟供电正电压VSSA模拟供电负电压 一、VCC&#xff08;供电电压&#xff09; VCC是指芯片的电源电压&#…...

编程日记 2023/8/20 8:46:30

C语言实例_解析GPS源数据

一、GPS数据格式介绍 GPS&#xff08;全球定位系统&#xff09;数据格式常见的是NMEA 0183格式&#xff0c;NMEA 0183格式是一种用于导航设备间传输数据的标准格式&#xff0c;定义了一套规范&#xff0c;使得不同厂商的设备可以通过串行通信接口&#xff08;常见的是RS-232&a…...

编程日记 2023/8/20 8:45:29

LVS+Keepalived

Keepalived概述&#xff1a; keepalived软件 就是通过vrrp协议实现高可用功能 vrrp通信原理&#xff1a; vrrp就是虚拟路由冗余协议&#xff0c;它的出现就是为了解决静态路由的单点故障vrrp是通过一种竞选的一种协议机制将路由交给某台vrrp路由器vrrp用ip多播的方式【多播地…...

编程日记 2023/8/20 8:44:28

uni-app根据经纬度逆解析详细地址

uni-app中的getLocation()方法可以获取到用户当前的地理位置&#xff08;经纬度&#xff09;、速度。 但是返回参数中的address在app中才会显示&#xff0c;小程序中不会显示&#xff0c;所以我们需要进行逆解析其地址&#xff0c;解析出它的地址信息。 1.首先要在腾讯位置服务…...

编程日记 2023/8/20 8:43:27

【数据结构】吃透单链表！！！（详细解析~）

目录 前言&#xff1a;一.顺序表的缺陷 && 介绍链表1.顺序表的缺陷2.介绍链表&#xff08;1&#xff09;链表的概念&#xff08;2&#xff09;链表的结构&#xff08;3&#xff09;链表的功能 二.单链表的实现1.创建节点的结构2.头文件函数的声明3.函数的实现&#xff…...

编程日记 2023/8/20 8:42:26

Linux 安全技术和防火墙

目录 1 安全技术 2 防火墙 2.1 防火墙的分类 2.1.1 包过滤防火墙 2.1.2 应用层防火墙 3 Linux 防火墙的基本认识 3.1 iptables & netfilter 3.2 四表五链 4 iptables 4.2 数据包的常见控制类型 4.3 实际操作 4.3.1 加新的防火墙规则 4.3.2 查看规则表 4.3.…...

编程日记 2023/8/20 8:41:25

Mac 开发 Tang Nano FPGA 指南（使用终端和使用 VS Code 和插件，适用所有 Gowin FPGA）

最近收到了一个 Tang nano 9K FPGA开发板&#xff0c;就想借此机会研究一下。 官方文档里介绍如果想使用高云的 FPGA&#xff0c;就需要使用 GOWIN IDE&#xff0c;但是需要申请 license 提交一堆资料&#xff0c;我是别人送的就不太方便让别人弄。加上 IDE 其实并不是很适合学…...

编程日记 2023/8/20 8:40:21

基于深度学习的铁路异物侵限检测算法研究_整体认知感觉欠点意思，但是有一个新的变形卷积-Octave 卷积

相比于其他的交通运输方式&#xff0c;铁路运输具有准时性高、连续性强、速度快、运输量大、运输成本低以及安全可靠等优点。同时由于国家高速铁路网络建设的不断推进&#xff0c;铁路运输逐渐成为我国客运与货运的主要运输方式。虽然铁路运输为人们出行和货物运输带来的极大的…...

编程日记 2023/8/20 8:39:20

Spring项目使用Redis限制用户登录失败的次数以及暂时锁定用户登录权限

文章目录 背景环境代码实现0. 项目结构图&#xff08;供参考&#xff09;1. 数据库中的表&#xff08;供参考&#xff09;2. 依赖&#xff08;pom.xml&#xff09;3. 配置文件&#xff08;application.yml&#xff09;4. 配置文件&#xff08;application-dev.yml&#xff09;5…...

编程日记 2023/8/20 8:38:20

2023.8 - java - 变量类型

在Java语言中&#xff0c;所有的变量在使用前必须声明。声明变量的基本格式如下&#xff1a; type identifier [ value][, identifier [ value] ...] ; 格式说明&#xff1a; type -- 数据类型。identifier -- 是变量名&#xff0c;可以使用逗号 , 隔开来声明多个同类型变量…...

编程日记 2023/8/20 8:37:17

【Kubernetes】Kubernetes的Pod控制器

Pod控制器 一、Pod 控制器的概念1. Pod 控制器及其功用2. Pod 控制器有多种类型2.1 ReplicaSet2.2 Deployment2.3 DaemonSet2.4 StatefulSet2.5 Job2.6 Cronjob 3. Pod 与控制器之间的关系 二、Pod 控制器的使用1. Deployment2. SatefulSet2.1 为什么要有headless&#xff1f;2…...

编程日记 2023/8/20 8:36:16

Ubuntu20.04安装Nvidia显卡驱动教程

1、禁用nouveau 1、创建文件&#xff0c;如果没有下载vim编辑器&#xff0c;将vim换成gedit即可 $ sudo vim /etc/modprobe.d/blacklist-nouveau.conf 2、在文件中插入以下内容&#xff0c;将nouveau加入黑名单&#xff0c;默认不开启 blacklist nouveau options nouveau m…...

编程日记 2023/8/20 8:35:14

视频汇聚/视频云存储/视频监控管理平台EasyCVR添加萤石云设备详细操作来啦！

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2023/8/20 8:34:12

AI 绘画Stable Diffusion 研究（十二）SD数字人制作工具SadTlaker插件安装教程

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 想必大家经常看到&#xff0c;无论是在产品营销还是品牌推广时&#xff0c;很多人经常以数字人的方式来为自己创造财富。而市面上的数字人收费都比较昂贵&#xff0c;少则几…...

编程日记 2023/8/20 8:33:10

数据结构——链表详解

链表 文章目录 链表前言认识链表单链表结构图带头单循环链表结构图双向循环链表结构图带头双向循环链表结构图 链表特点 链表实现(带头双向循环链表实现)链表结构体(1) 新建头节点(2) 建立新节点(3)尾部插入节点(4)删除节点(5)头部插入节点(6) 头删节点(7) 寻找节点(8) pos位置…...

编程日记 2023/8/20 8:32:09

（学习笔记-进程管理）什么是悲观锁、乐观锁？

互斥锁与自旋锁 最底层的两种就是 [互斥锁和自旋锁]&#xff0c;有很多高级的锁都是基于它们实现的。可以认为它们是各种锁的地基&#xff0c;所以我们必须清楚它们之间的区别和应用。 加锁的目的就是保证共享资源在任意时间内&#xff0c;只有一个线程访问&#xff0c;这样就…...

编程日记 2023/8/20 8:31:07

actuator/prometheus使用pushgateway上传jvm监控数据

场景 准备 prometheus已经部署pushgateway服务&#xff0c;访问{pushgateway.server:9091}可以看到面板 实现 基于springboot引入支持组件&#xff0c;版本可以 <!--监控检查--><dependency><groupId>org.springframework.boot</groupId><artifa…...

编程日记 2023/8/20 8:30:05

Linux设置临时目录路径的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2023/8/20 8:29:03

19-普通组件的注册使用

普通组件的注册使用-局部注册 一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件 import 组件对象 from.vue文件路径 import HmHeader from ./…...

编程日记 2023/8/20 8:28:01

Java基础篇：抽象类与接口

1、抽象类和接口的定义&#xff1a; &#xff08;1&#xff09;抽象类主要用来抽取子类的通用特性&#xff0c;作为子类的模板&#xff0c;它不能被实例化&#xff0c;只能被用作为子类的超类。 &#xff08;2&#xff09;接口是抽象方法的集合&#xff0c;声明了一系列的方法…...

编程日记 2023/8/20 8:27:00