Vue CLI 4与项目构建实战指南

news2024/12/26 23:49:20

title: Vue CLI 4与项目构建实战指南
date: 2024/6/9
updated: 2024/6/9

excerpt:
这篇文章介绍了如何使用Vue CLI优化项目构建配置，提高开发效率，涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。

categories:

  • 前端开发

tags:

  • Vue CLI
  • 优化构建
  • 配置管理
  • 项目部署
  • 插件系统
  • Webpack
  • TypeScript集成

在这里插入图片描述

第一部分：Vue CLI 4入门

第1章 Vue CLI概述

Vue CLI的作用和优势

Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。它具有以下作用和优势：

  • 标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。
  • 快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。
  • 丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。
  • 易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。

Vue CLI的发展历程

Vue CLI自Vue.js诞生以来，就作为官方推荐的脚手架工具，随着Vue.js的发展而不断迭代。从最初的Vue CLI 2到Vue CLI 3，再到现在的Vue
CLI 4，它一直在优化项目结构和构建配置，提高开发效率和用户体验。

Vue CLI 4的主要特性

Vue CLI 4带来了以下主要特性：

  • 更快的构建速度：利用Webpack 4和缓存优化，提高构建速度。
  • 零配置：默认配置即可满足大多数项目的需求，无需额外配置。
  • 插件系统：通过插件系统，可以轻松集成Vue Router、Vuex等Vue生态系统中的其他工具。
  • 图形化界面：提供了Vue UI，一个图形化的管理界面，用于创建和管理项目。
第2章 环境准备与安装

Node.js和npm的安装与配置
Vue CLI 4需要Node.js环境，因此首先需要安装Node.js。Node.js通常与npm（node package manager）一同安装。可以从
cmdragon’s Blog Node.js官网下载并安装最新版本的Node.js。

  • 确保安装Node.js版本在12以上。
  • 安装完成后，在命令行中执行node -v和npm -v，检查安装是否成功。

Vue CLI 4的安装

Vue CLI 4可以通过npm全局安装：

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

Vue CLI 4的升级

如果需要升级Vue CLI 4到最新版本，可以使用以下命令：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
第3章 创建和管理Vue项目

使用Vue CLI 4创建新项目

使用Vue CLI 4创建新项目，可以执行以下命令：

vue create project-name

在命令执行过程中，CLI会提供一系列选项，包括预设配置、Vue版本选择、添加插件等。

项目的目录结构和文件解释

Vue CLI 4创建的项目具有以下目录结构：

project-name/
│
├── node_modules/ # 项目依赖
├── public/        # 公共文件，如index.html
│   └── index.html
├── src/           # 源代码目录
│   ├── assets/    # 静态资源
│   ├── components/ # Vue组件
│   ├── App.vue    # 根组件
│   └── main.js    # 入口文件
├── .gitignore     # Git忽略文件
├── babel.config.js # Babel配置文件
├── package.json   # 项目配置文件
└── vue.config.js  # Vue项目配置文件

项目的配置和管理

项目的配置主要通过vue.config.js
文件进行。该文件提供了对Webpack配置的细粒度控制。此外，还可以通过环境变量来控制不同环境下的项目配置。项目的管理主要包括项目的启动、构建和测试等，这些都可以通过package.json
中的scripts字段来配置。
AD：等你探索

第二部分：Vue CLI 4高级配置

第4章 个性化项目配置

修改项目配置文件（vue.config.js）

vue.config.js是Vue CLI项目的可选配置文件，如果项目的构建系统和webpack配置满足你的需求，那么你不需要这个文件。但如果需要自定义配置，可以通过这个文件来修改。

例如，以下是一个简单的vue.config.js文件，它修改了基本的webpack配置：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // html的输出路径
  indexPath: 'index.html',
  // 文件名哈希
  filenameHashing: true,
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV !== 'production',

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,

  // 跨域设置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 设置代理
  },

  // webpack配置 - 简单配置方式
  configureWebpack: {
    // 插件等配置
  },

  // webpack配置 - 链式配置方式
  chainWebpack: (config) => {
    // 链式配置
  }
};

链接Webpack配置（chainWebpack）

Vue CLI 4推荐使用chainWebpack方法来修改Webpack配置，这是一个链式调用方法，可以更精细地控制Webpack配置。

chainWebpack: (config) => {
  // 修改loader
  config.module
    .rule('vue')
    .use('vue-loader')
    .loader('vue-loader/lib/loader.js')
    .tap(options => {
      // 修改选项...
      return options;
    });

  // 添加插件
  config.plugin('example').use(ExamplePlugin, [/* options */]);
}

插件的使用和自定义

Vue CLI 4允许通过vue.config.js文件中的plugins选项来添加自定义插件。

const ExamplePlugin = require('example-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ExamplePlugin({
      // 插件选项
    })
  ]
};
第5章 构建优化

代码分割和懒加载

Vue CLI 4支持动态导入，这可以让你的应用实现代码分割和懒加载。
AD：享受无干扰的沉浸式阅读之旅

// 示例：动态导入组件
const MyComponent = () => import('./MyComponent.vue');

Tree-shaking和依赖优化

Webpack 4支持tree-shaking，可以帮助你去除未使用的代码。在vue.config.js中，可以通过配置来启用这项功能。

module.exports = {
  // ...其他配置
  configureWebpack: {
    optimization: {
      usedExports: true,
    },
  },
};

使用CDN加速项目加载

在vue.config.js中，可以配置外部链接来使用CDN。

module.exports = {
  // ...其他配置
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      // ...其他库
    },
  },
};

在HTML模板中，通过<script>和<link>标签引入CDN资源。

第6章 多环境配置

开发环境、测试环境和生产环境的配置

Vue CLI 4支持通过.env文件来配置不同环境的环境变量。例如：

// .env.development
VUE_APP_API_URL=http://localhost:3000/api

// .env.production
VUE_APP_API_URL=https://production-api.com/api

在package.json中，可以定义不同的启动和构建命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test"
  }
}

环境变量的使用

环境变量可以通过process.env在代码中访问。Vue CLI会自动加载以VUE_APP_开头的环境变量到客户端侧的代码中。

构建命令的定制

Vue CLI 允许你自定义构建命令，以适应不同的构建需求。你可以通过修改package.json中的scripts字段来达到这个目的。

例如，你可能想要创建一个特定的构建命令来构建生产环境的版本，并且使用一个特定的配置文件：

{
  "scripts": {
    "build": "vue-cli-service build",
    "build:prod": "vue-cli-service build --mode production --config vue.config.prod.js"
  }
}

在上面的例子中，build:prod命令会使用生产环境的模式 (--mode production)
并指定一个特定的配置文件 (--config vue.config.prod.js) 来进行构建。

此外，你还可以创建自定义的启动命令，以便在不同的开发环境中使用：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "serve:mock": "vue-cli-service serve --mode mock --config vue.config.mock.js"
  }
}

在这里，serve:mock命令会使用模拟数据的环境 (--mode mock) 并指定一个模拟数据的配置文件 (--config vue.config.mock.js)
来启动开发服务器。

总结

Vue CLI 4 提供了强大的配置选项，允许开发者根据具体需求定制化项目配置。通过vue.config.js文件，你可以修改 Webpack
配置、定义环境变量、使用插件以及优化构建过程。同时，CLI 也支持多环境配置，使得开发者能够更容易地管理不同环境下的项目设置。掌握这些高级配置技巧，可以帮助开发者更高效地开发和管理
Vue 项目。
AD：覆盖广泛主题工具可供使用

第三部分：项目构建与部署

第7章 项目构建流程

7.1 构建命令的使用

在 Vue CLI 项目中，构建命令通常指的是用来编译和打包项目文件的命令。Vue CLI 提供了以下常用的构建命令：

  • vue-cli-service build：这是默认的构建命令，用于构建生产环境的代码。它将编译源码并生成dist目录，其中包含了压缩后的静态文件。
  • vue-cli-service serve：这个命令用于启动开发服务器，通常在开发阶段使用。
7.2 项目的编译和打包

项目的编译和打包通常指的是将.vue文件和其他资源文件（如 JavaScript、CSS、图片等）转换成浏览器可以理解的静态文件的过程。Vue
CLI 使用 Webpack 来处理这一过程，以下是编译和打包的基本步骤：

  1. 依赖安装：确保所有项目依赖都已正确安装。
  2. 配置检查：检查vue.config.js文件中的配置是否正确。
  3. 编译：Webpack 开始编译源码，将.vue文件编译成 JavaScript 代码，同时处理 CSS 预处理器、图片等资源。
  4. 打包：编译后的代码和资源被打包成一个或多个 bundle 文件。
  5. 优化：Webpack 会进行代码分割、压缩等优化操作。
  6. 输出：最终生成的静态文件被放置在dist目录下。
7.3 热重载和监控

热重载（Hot Module Replacement，HMR）是 Vue CLI 提供的一个功能，它可以在不刷新整个页面的情况下，通过替换更新的模块来实现实时预览更新。使用
Vue CLI 的vue-cli-service serve命令启动开发服务器时，默认就开启了热重载功能。

监控通常指的是对构建过程的监控，Vue CLI 提供了详细的构建日志和进度指示，以便开发者了解构建过程的状态。

第8章 部署与自动化

8.1 静态资源的部署

静态资源的部署通常涉及到将构建后的dist目录中的文件上传到服务器或 CDN。以下是一些常见的部署方式：

  • FTP：使用 FTP 将文件上传到服务器。
  • SCP：使用 SCP 命令通过 SSH 将文件复制到服务器。
  • CDN：将文件上传到 CDN 提供商，然后通过 CDN 分发到用户。
8.2 CI/CD流程的集成

持续集成（CI）和持续部署（CD）是现代软件开发的重要组成部分。集成 Vue CLI 项目到 CI/CD 流程通常涉及以下步骤：

  1. 代码提交：当代码被提交到版本控制系统时，CI 流程被触发。
  2. 自动化测试：运行自动化测试来验证代码更改。
  3. 构建：执行构建命令，生成生产环境的代码。
  4. 部署：将构建后的代码部署到生产环境或测试环境。
8.3 自动化部署脚本编写

自动化部署脚本可以帮助开发者自动化部署过程。以下是一个简单的自动化部署脚本的示例，使用 SSH 和 SCP 命令将文件部署到远程服务器：

#!/bin/bash

# 服务器配置
SERVER_IP="123.45.67.89"
SERVER_USER="username"
SERVER_PATH="/var/www/html"

# 本地构建目录
BUILD_PATH="./dist"

# 构建项目
npm run build

# 使用 SSH 连接到服务器，并使用 SCP 部署文件
scp -r $BUILD_PATH/* $SERVER_USER@$SERVER_IP:$SERVER_PATH

echo "部署完成"

这个脚本首先定义了服务器的 IP 地址、用户名和路径，然后构建项目，最后通过 SCP
将构建后的文件上传到服务器指定目录。在实际使用中，需要根据具体的服务器配置和项目需求来编写脚本。

第9章 商城项目实战

9.1 项目需求分析和设计

在开始一个商城项目之前，需要进行详细的需求分析和设计。以下是一些关键步骤：

  • 需求收集：与客户沟通，了解商城的基本功能，如商品展示、购物车、订单管理、支付接口等。
  • 功能规划：根据需求确定功能模块，如用户模块、商品模块、订单模块等。
  • 界面设计：设计用户界面，包括首页、商品列表、商品详情、购物车页面等。
  • 技术选型：选择合适的技术栈，如前端使用 Vue CLI 4，后端可能使用 Node.js、Express、MongoDB 等。
  • 数据库设计：设计数据库模型，确定数据存储结构。
9.2 使用Vue CLI 4构建项目

使用 Vue CLI 4 创建项目的基本步骤如下：

  1. 安装 Vue CLI 4：

    npm install -g @vue/cli

  2. 创建新项目：

    vue create mall-project

    在创建过程中，可以选择预设配置或手动设置，包括 Vue 版本、添加的插件等。

  3. 进入项目并添加所需依赖：

    cd mall-project
npm install vue-router vuex axios --save

  4. 根据设计图和功能规划，编写前端代码，配置路由和状态管理。

9.3 项目构建和部署

项目开发完成后，需要构建和部署：

  1. 构建项目：

    npm run build

    这将生成dist目录，包含了生产环境下的静态文件。

  2. 部署到服务器或云平台，可以使用自动化部署脚本或 CI/CD 工具。

第10章 企业官网项目实战

10.1 项目需求分析和设计

企业官网的项目需求分析和设计通常包括以下内容：

  • 需求调研：了解企业的业务和目标受众，确定网站需要展示的内容和信息架构。
  • 设计风格：根据企业的品牌形象设计网站的整体风格和布局。
  • 功能规划：确定网站的功能，如公司介绍、产品展示、新闻动态、联系我们等页面。
  • 响应式设计：确保网站在不同设备上都能良好展示。
10.2 使用Vue CLI 4构建项目

构建企业官网的步骤与商城项目类似：

  1. 使用 Vue CLI 4 创建项目。
  2. 安装必要的依赖，如路由、状态管理、UI 库等。
  3. 根据设计图实现页面布局和交互。
10.3 优化和部署

项目完成后，进行优化和部署：

  1. 性能优化：优化图片、代码，减少HTTP请求，使用Webpack的优化功能等。
  2. SEO优化：确保网站内容对搜索引擎友好，提高搜索排名。
  3. 部署：将构建后的静态文件部署到服务器或云平台，如 Netlify、Vercel 等。
  4. 监控和维护：部署后监控网站性能，定期进行内容更新和维护。

附录A Vue CLI 4常见问题解答

常见错误和解决方案

  1. 错误：Error: Invalid or unexpected token

    • 解决方案：通常是语法错误，检查代码中的语法，特别是 JSON 配置文件中是否使用了错误的引号。

  2. 错误：Module not found

    • 解决方案：确保已经正确安装了所有依赖。如果问题仍然存在，尝试删除node_modules目录和package-lock.json
      文件，然后重新安装依赖。

  3. 错误：Cannot find name 'xxx'

    • 解决方案：检查是否正确导入了所需的模块或组件。
性能优化建议
  • 代码分割：使用动态导入（import()）实现代码分割，减少初始加载时间。
  • Tree Shaking：移除未使用的代码，减少最终构建的文件大小。
  • 图片优化：使用图片压缩工具减小图片文件大小。
  • 缓存策略：合理设置 HTTP 缓存头，利用浏览器缓存。
版本更新和迁移指南
  • 备份：在进行版本更新前，备份当前项目。
  • 更新 CLI：使用npm update -g @vue/cli更新 Vue CLI。
  • 更新项目：在项目目录中运行vue upgrade。
  • 检查配置：检查项目配置文件，确保兼容新版本。

附录B Vue CLI 4插件列表

官方插件介绍
  • @vue/cli-plugin-babel：Babel 插件，用于转译 JavaScript 代码。
  • @vue/cli-plugin-eslint：ESLint 插件，用于代码质量和风格检查。
  • @vue/cli-plugin-router：Vue Router 插件，用于页面路由管理。
  • @vue/cli-plugin Vuex：Vuex 插件，用于状态管理。
第三方插件推荐
  • vue-cli-plugin-element：Element UI 插件，用于快速搭建界面。
  • vue-cli-plugin-i18n：国际化插件，用于多语言支持。
  • vue-cli-plugin-lighthouse：Lighthouse 插件，用于性能检测。
插件的安装和使用方法

安装插件：

vue add plugin-name

或在vue.config.js中配置：

module.exports = {
  plugins: [
    ['plugin-name', { /* 配置选项 */ }]
  ]
}

附录C Vue CLI 4配置参考

配置文件的结构和示例

Vue CLI 4 项目通常包含一个vue.config.js文件，用于配置项目：

module.exports = {
  // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  // 构建时的输出目录
  outputDir: 'dist',
  // 放置静态资源的目录
  assetsDir: 'static',
  // html的输出路径
  indexPath: 'index.html',
  // 文件名哈希
  filenameHashing: true,
  // eslint-loader 是否在保存的时候检查
  lintOnSave: process.env.NODE_ENV !== 'production',
  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,
  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],
  // 生产环境 sourceMap
  productionSourceMap: false,
  // 跨域设置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null // 设置代理
  },
  // webpack配置 - 简单配置方式
  configureWebpack: {
    // 插件等配置
  },
  // webpack配置 - 链式配置方式
  chainWebpack: (config) => {
    // 链式配置
  },
  // PWA 插件相关配置
  pwa: {},
  // 第三方插件配置
  pluginOptions: {}
}
常用配置项详解
  • publicPath：设置基础路径，用于部署到非根路径。
  • outputDir：设置构建输出目录。
  • assetsDir：设置放置静态资源的目录。
  • indexPath：设置 HTML 输出路径。
  • filenameHashing：设置文件名是否包含hash，用于缓存控制。
  • lintOnSave：设置是否在保存时进行ESLint检查。
  • devServer：设置开发服务器相关配置。
高级配置技巧

  • 链式配置：使用chainWebpack方法进行细粒度的配置。

  • 环境变量：通过 process.env访问环境变量，可以在vue.config.js中使用环境变量来设置不同的配置。

  • 多环境配置
    ：通过设置不同的环境变量，可以实现开发环境、测试环境和生产环境的配置切换。可以在项目根目录下创建.env.development、.env.test
    和.env.production文件，分别配置不同环境的变量。

  • 外部配置文件：如果配置信息较为复杂，可以将配置抽离到外部的 JSON 或 YAML 文件中，然后在vue.config.js中引入。

  • 自定义插件：如果官方插件或第三方插件不能满足需求，可以开发自定义插件。通过webpack的插件系统，可以创建具有特定功能的插件。

  • 优化构建性能：通过配置webpack的externals选项，可以将一些大型库如lodash或moment等排除在构建之外，减少构建时间。

  • 缓存策略：配置webpack的cache选项，可以提高构建的缓存命中率，加快构建速度。

  • CSS 相关配置：通过css选项，可以配置 CSS 的相关处理，如提取 CSS 文件、启用 CSS Modules 等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1804157.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

接口自动化Requests+Pytest基础实现

接口自动化Requests+Pytest基础实现

目录 1. 数据库以及数据库操作1.1 概念1.2 分类1.3 作用 2 python操作数据库的相关实现2.1 背景2.2 相关实现 3. pymysql基础3.1 整个流程3.2 案例3.3 Pymysql工具类封装 4 事务4.1 案例4.2 事务概念4.3 事务特征 5. requests库5.1 概念5.2 角色定位5.3 安装5.4 校验5.5 reques…
阅读更多...
如何微调 Llama 3 进行序列分类？

如何微调 Llama 3 进行序列分类？

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学. 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总合集&…
阅读更多...
GDPU unity游戏开发 寻路与导航

GDPU unity游戏开发 寻路与导航

学会寻路&#xff0c;出门在外&#xff0c;身份不是他给的&#xff0c;他做不了你一直的导航。 角色寻路 角色控制器替换为普通的角色控制器&#xff0c;给实验九的地形增加NavMesh Surface组件&#xff0c;然后给角色增加NavMesh Agent组件&#xff0c;并选择合适的参数。通过…
阅读更多...
Ubuntu24.04基本配置

Ubuntu24.04基本配置

目录 0. 前言1. 连接网络2. 更新源3. 安装并配置vim4. 设置用户sudo免密5. 同步双系统时间6. 设置终端颜色主题7. 设置中文输入法8. 调整Dock位置等9. 设置Grub10. 其它美化设置10.1 夜灯10.2 壁纸10.3 终端加强gnome-tweaks10.4 字体 11. 常用工具11.1 邮箱配置11.2 翻译工具1…
阅读更多...
【机器学习】机器学习与医疗健康在智能诊疗中的融合应用与性能优化新探索

【机器学习】机器学习与医疗健康在智能诊疗中的融合应用与性能优化新探索

文章目录 引言机器学习与医疗健康的基本概念机器学习概述监督学习无监督学习强化学习 医疗健康概述疾病预测诊断辅助个性化治疗方案制定 机器学习与医疗健康的融合应用实时健康监测数据预处理特征工程 疾病预测与优化模型训练模型评估 诊断辅助与优化深度学习应用 个性化治疗方…
阅读更多...
【C++11】多线程常用知识

【C++11】多线程常用知识

知识体系 thread C++ thread中最常用的两个函数是join和detach，怎么选择呢，简单来说，如果希望等待线程结束，用join，如果希望异步执行，且不等待执行结果，那么就用detach；thread_local可以简单理解为一个线程级别的全局变量；线程id在调试多线程程序时是非常有用的东西；…
阅读更多...
Responder工具

Responder工具

简介 Responder是一种网络安全工具&#xff0c;用于嗅探和抓取网络流量中的凭证信息&#xff08;如用户名、密码等&#xff09;。它可以在本地网络中创建一个伪造的服务&#xff08;如HTTP、SMB等&#xff09;&#xff0c;并捕获客户端与该服务的通信中的凭证信息。 Responder工…
阅读更多...
华为云耀云服务器L实例规则配置教程（亲自实操经验）

华为云耀云服务器L实例规则配置教程（亲自实操经验）

我刚买了这个最基础的36&#xffe5;的L实例的云服务器&#xff0c;这个实例是自带公网ip的&#xff0c;不需要额外购买。我准备先配置好&#xff0c;能够通过公网ip访问&#xff0c;以便之后上传javaweb项目可以直接访问&#xff0c;不过中途遇到了点问题&#xff0c;但是已解…
阅读更多...
Linux内核下网卡硬件 MAC 和PHY分析笔记

Linux内核下网卡硬件 MAC 和PHY分析笔记

1 简介 通常CPU自带的以太网接口是MAC控制器&#xff0c;为了实现完整的功能&#xff0c;外围硬件还需要增加一个PHY芯片。 PHY芯片在建立网络连接时负责协商确定网速、全双工 或者 半双工等。在正常通讯时负责在MAC控制器的MII信号 与 网线中的信号之间做转换。 本文的内核代…
阅读更多...
pyinstall 打包 paddleocr 成为.exe文件步骤

pyinstall 打包 paddleocr 成为.exe文件步骤

一、首先进入虚拟环境 使用pip安装pyinstaller pip install pyinstaller我的已经安装完成 二、用cmd进入当前打包文件夹下&#xff0c;新建使spec文件内容如下 注意&#xff1a;其中需要修改的部分是pathex中文件所在路径文件内容摘抄自另一篇博文(❄点击可查看❄) # -*- m…
阅读更多...
第二讲笔记：隐私计算助力数据要素流通

第二讲笔记：隐私计算助力数据要素流通

1、数据要素流转与数据 2、数据外循环中的信任 焦虑 信任焦虑背后的代表性案例 内鬼门 &#xff1a; 2023 年 &#xff0c; 美国科技公司 Ubiquiti在2021年1月曝出数据泄露事 件&#xff0c; “攻击者”在随后的“谈判”中试 图向该企业勒索近200万美元&#xff08;50比特 币&…
阅读更多...
Steam游戏如何选择适合的服务器

Steam游戏如何选择适合的服务器

在Steam平台上&#xff0c;玩家可以享受到来自世界各地开发者的游戏作品。然而&#xff0c;要获得最佳的游戏体验&#xff0c;选择合适的服务器至关重要。本文将从网络延迟、服务器位置、游戏类型和个人偏好等多个方面&#xff0c;为玩家提供选择Steam游戏服务器的实用指南。 如…
阅读更多...
设计模式-中介者（调停者）模式（行为型）

设计模式-中介者（调停者）模式（行为型）

中介者模式 中介者模式是一种行为型模式&#xff0c;又叫调停者模式&#xff0c;它是为了解决多个对象之间&#xff0c;多个类之间通信的复杂性&#xff0c;定义一个中介者对象来封装一些列对象之间的交互&#xff0c;使各个对象之间不同持有对方的引用就可以实现交互&#xf…
阅读更多...
湖南源点（市场研究咨询）如何产出更加有意义的竞品调研

湖南源点（市场研究咨询）如何产出更加有意义的竞品调研

湖南源点咨询认为&#xff1a;当前&#xff0c;任何项目都不能盲目开始&#xff0c;前期的准备工作必不可少。在基础架构搭建的同时&#xff0c;设计上对于前端功能、用户体验的调研就优先开始了。在这个阶段&#xff0c;大部分设计师都会分配很多调研任务&#xff0c;疯狂对竞…
阅读更多...
BC C language

BC C language

题目汇总 No.1 打印有规律的字符(牛牛的字符菱形) 代码展示 #include<stdio.h> int main() {char ch0;scanf("%c",&ch);for(int i0;i<5;i){for(int j0;j<5;j){if((i0||i4)&&j2)printf("%c", ch);else if ((i 1||i3) &&…
阅读更多...
大疆智图_空三二维重建成果传输

大疆智图_空三二维重建成果传输

一、软件环境 1.1 所需软件 1、 大疆智图&#xff1a;点击下载&#xff1b;   2、 ArcGIS Pro 3.1.5&#xff1a;点击下载&#xff0c;建议使用IDM或Aria2等多线程下载器&#xff1b;   3、 IDM下载器&#xff1a;点击下载&#xff0c;或自行搜索&#xff1b;   4、 Fas…
阅读更多...
最近一直没动静的Pika Labs原来在筹集融资，加快构建视频基础模型

最近一直没动静的Pika Labs原来在筹集融资，加快构建视频基础模型

Pika 筹集了 8000 万美元&#xff0c;因此任何人都可以根据命令制作视频。 今天对我们来说是一个重要的日子。自从我们从斯坦福大学退学去构建 Pika 以来已经一年了&#xff0c;在这段时间里&#xff0c;我们在 Discord 上进行了秘密发布&#xff0c;发布了我们的 1.0 模型和 …
阅读更多...
找了半天，还不如自己写一个图片转ico格式的程序

找了半天，还不如自己写一个图片转ico格式的程序

关于jpg、png等图片转ICO格式 最近突然急需一张ico格式的文件&#xff0c;就拿着处理好的png图片出网上找在线转换器&#xff0c;找了一个小时&#xff0c;绝了&#xff0c;不是需要注册充钱就是下载不下来&#xff0c;好不容易下载下来还是个文件错误。想着找个PS插件直接导出…
阅读更多...
2024 cicsn ezbuf

2024 cicsn ezbuf

文章目录 参考protobuf逆向学习复原结构思路exp 参考 https://www.y4ng.cn/posts/pwn/protobuf/#ciscn-2024-ezbuf protobuf 当时压根不知道用了protobuf这个玩意&#xff0c;提取工具也没提取出来&#xff0c;还是做题做太少了&#xff0c;很多关键性的结构都没看出来是pro…
阅读更多...
WEB漏洞服务能提供哪些帮助

WEB漏洞服务能提供哪些帮助

在数字化浪潮的推动下&#xff0c;Web应用程序已成为企业展示形象、提供服务、与用户进行交互的重要平台。然而&#xff0c;随着技术的飞速发展&#xff0c;Web应用程序中的安全漏洞也日益显现&#xff0c;成为网络安全的重大隐患。这些漏洞一旦被恶意攻击者利用&#xff0c;可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023