Vue CLI 4與項目構建實戰指南

来源:https://www.cnblogs.com/Amd794/p/18239161
-Advertisement-
Play Games

這篇文章介紹瞭如何使用Vue CLI優化項目構建配置，提高開發效率，涉及配置管理、項目部署策略、插件系統定製以及Webpack和TypeScript的深度集成技巧。 ...


title: Vue CLI 4與項目構建實戰指南
date: 2024/6/9
updated: 2024/6/9

excerpt:
這篇文章介紹瞭如何使用Vue CLI優化項目構建配置，提高開發效率，涉及配置管理、項目部署策略、插件系統定製以及Webpack和TypeScript的深度集成技巧。

categories:

  • 前端開發

tags:

  • Vue CLI
  • 優化構建
  • 配置管理
  • 項目部署
  • 插件系統
  • Webpack
  • TypeScript集成

image

第一部分：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 等。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • FRDM-MCXN947開發板之i2c應用
    介紹 MCXN947 NXP FRDM-MCXN947開發板是一款基於MCXN947 MCU的低成本評估板，MCU集成了雙核Arm Cortex-M33微控制器和一個神經處理單元(NPU)。開發板由一個MCXN947控制器和一個64 Mbit外部串列快閃記憶體組成。該板還具有P3T1755DP I3C溫度 ...
  • oracle的鎖
    註意：本教程不適用舊版本，Mysql 8.4.0 和 舊版本，主從複製相關命令有所變化，具體區別請看文末參考 軟體版本 Docker：26.1.3 Mysql：8.4.0 GTID主從複製 1.準備主從兩台伺服器 2.兩台伺服器分別創建 docker-compose.yml 文件 services: ...
  • 一文搞懂DevOps、DataOps、MLOps、AIOps：所有“Ops”的比較
    引言 近年來，“Ops”一詞在 IT 運維領域的使用迅速增加。IT 運維正在向自動化過程轉變，以改善客戶交付。傳統的應用程式開發採用 DevOps 實施持續集成（CI）和持續部署（CD）。但對於數據密集型的機器學習和人工智慧（AI）應用，精確的交付和部署過程可能並不適用。 本文將定義不同的“Ops” ...
  • 袋鼠雲產品功能更新報告10期｜智能進化，近百項功能升級加速數智化轉型
    歡迎查閱袋鼠雲第10期產品功能更新報告。本期，我們精心推出了72項新增和優化功能，致力於在數字化浪潮中為您提供更高效、更智能的服務。我們相信，這些新特性將為您的業務註入新活力，確保您在數字化轉型的每一步都堅實而有力。 以下為袋鼠雲產品功能更新報告第10期內容，更多探索，請繼續閱讀。 離線開發平臺 新 ...
  • HarmonyOS ArkTS組件 | Flex 以彈性方式佈局子組件的容器組件 學習記錄
    HarmonyOS ArkTS組件 | Flex 以彈性方式佈局子組件的容器組件 學習記錄 前言：最近需要用到彈性佈局，記錄一下。（忽略圖片水印QAQ） 說明： Flex組件在渲染時存在二次佈局過程，因此在對性能有嚴格要求的場景下建議使用Column、Row代替。 Flex組件主軸預設不設置時撐滿父 ...
  • 一文搞懂 ARM 64 系列: 寄存器
    ARM 64中包含多種寄存器，下麵介紹一些常見的寄存器。 1 通用寄存器 ARM 64包含31個64bit寄存器，記為X0~X30。 每一個通用寄存器，它的低32bit都可以被訪問，記為W0~W30。 在這31個通用寄存器中，有2個寄存器比較特殊。 X29寄存器被作為棧幀寄存器，也被稱為FP(Fra ...
  • 鴻蒙HarmonyOS實戰-ArkTS語言基礎類庫（通知）
    前言 移動應用中的通知是指應用程式發送給用戶的一種提示或提醒消息。這些通知可以在用戶設備的通知中心或狀態欄中顯示，以提醒用戶有關應用程式的活動、事件或重要信息。 移動應用中的通知可以分為兩種類型：本地通知和遠程通知。 本地通知是由應用程式自身發起的通知，不需要連接到遠程伺服器。應用程式可以根據特 ...
  • Vue TypeScript 實戰：掌握靜態類型編程
    這篇文章介紹瞭如何在TypeScript環境下為Vue.js應用搭建項目結構，包括初始化配置、創建Vue組件、實現狀態管理利用Vuex、配置路由以及性能優化的方法，旨在提升開發效率與應用性能。 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類