Vue 3入門指南

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

title: Vue 3入門指南 date: 2024/5/23 19:37:34 updated: 2024/5/23 19:37:34 categories: 前端開發 tags: 框架對比 環境搭建 基礎語法 組件開發 響應式系統 狀態管理 路由配置 第1章：Vue 3簡介 1.1 Vue.j ...


title: Vue 3入門指南
date: 2024/5/23 19:37:34
updated: 2024/5/23 19:37:34
categories:

  • 前端開發

tags:

  • 框架對比
  • 環境搭建
  • 基礎語法
  • 組件開發
  • 響應式系統
  • 狀態管理
  • 路由配置

image

第1章：Vue 3簡介

1.1 Vue.js的歷史與發展

Vue.js由前谷歌工程師尤雨溪（Evan
You）在2014年發佈。它的設計目標是提供一個輕量級、漸進式的JavaScript框架，用於構建用戶界面。Vue的核心庫專註於視圖層，易於上手，同時也便於與第三方庫或既有項目整合。隨著時間的推移，Vue.js因其簡潔的API、靈活的組件系統和高效的性能而受到開發者的廣泛歡迎。

1.2 Vue 3的新特性

Vue 3在2020年發佈，帶來了許多重要的更新和改進：

  • Composition API：提供了一種更靈活的方式來組織和重用組件邏輯，特別是在處理複雜組件時。
  • 性能提升：通過優化虛擬DOM的演算法和編譯時的優化，Vue 3在渲染大型應用時更加高效。
  • 更好的TypeScript支持：Vue 3的內部架構完全使用TypeScript重寫，提供了更好的類型推斷和集成。
  • Fragments：允許組件返回多個根節點，而不需要額外的包裝元素。
  • Teleport（傳送門） ：允許將組件的內容渲染到DOM中的不同位置。
  • Suspense：一種新的內置組件，用於處理非同步組件的載入狀態。
  • 響應式系統的重構：使用Proxy替代了Object.defineProperty，提高了響應式系統的性能和功能。

1.3 Vue 3與其他框架的比較

Vue 3與其他流行的前端框架（如React和Angular）相比，有其獨特的優勢和差異：

  • React：React是一個由Facebook開發的庫，以其高效的虛擬DOM演算法和組件化開發模式而聞名。Vue
    3提供了更簡單的API和更直觀的模板語法，而React則依賴於JSX。Vue 3的Composition API在某些方面類似於React的Hooks，但提供了更多的靈活性和控制。
  • Angular：Angular是一個由Google開發的全功能框架，提供了大量的內置功能，如依賴註入、表單處理和路由。Vue
    3相比之下更加輕量級，易於上手，但仍然提供了足夠的工具和庫來構建複雜的應用。Angular的學習曲線較陡峭，而Vue 3則更加平滑。

每個框架都有其適用的場景和優勢，選擇哪個框架通常取決於項目需求、團隊熟悉度和個人偏好。Vue 3因其平衡的性能、靈活性和易用性，成為了許多開發者的首選。

第2章：環境搭建與項目初始化

2.1 安裝Node.js和npm

Node.js是一個開源的JavaScript運行環境，它允許在伺服器端運行JavaScript代碼。npm（Node Package
Manager）是隨Node.js一同發佈的包管理器，用於安裝和管理JavaScript項目的依賴。如果你尚未安裝，可以訪問官方網站（https://nodejs.org/）下載適合你操作系統的安裝包。安裝完成後，可以通過命令行驗證Node.js和npm是否已安裝：

node -v  # 顯示Node.js版本
npm -v  # 顯示npm版本

2.2 安裝Vue CLI

Vue CLI（Vue Create App）是Vue.js官方推薦的項目初始化工具，它能快速創建並配置Vue 3項目。在終端或命令提示符中，運行以下命令安裝Vue
CLI全球：

npm install -g @vue/cli

或者使用yarn：

yarn global add @vue/cli

安裝完成後，可以使用vue create命令創建新項目。

2.3 創建Vue 3項目

創建新項目時，可以使用以下命令，其中my-project是你的項目名：

vue create my-project

它會詢問你選擇哪些特性，如是否包含路由、Vuex和測試等。選擇完成後，Vue CLI會自動下載並配置項目。

2.4 項目結構概覽

Vue CLI生成的項目結構通常包含以下主要部分：

  • src/：源代碼目錄，包含應用的核心邏輯和組件。

    • main.js：入口文件，啟動應用。
    • components/：存放應用的組件。
    • views/（或pages/）：存放應用的主要視圖或頁面。
    • router/：存放應用的路由配置。

  • public/：靜態資源目錄，如HTML、CSS和JavaScript文件。

  • package.json：項目依賴和配置信息。

  • .env（或.env.production）：環境變數配置文件。

  • vue.config.js：自定義配置文件，用於調整構建設置。

在開發過程中，你可以根據需要添加、修改或刪除這個結構中的文件和目錄。Vue CLI會根據這些結構生成構建過程，確保項目的可維護性和擴展性。

第3章：Vue 3基礎

3.1 Vue實例與生命周期

在Vue中，每個應用都是通過創建Vue實例來啟動的。Vue實例是Vue應用的根組件，它包含了數據、模板、掛載元素、方法、生命周期鉤子等選項。生命周期鉤子是Vue實例在創建、更新和銷毀過程中自動調用的函數，允許你在特定階段執行自定義邏輯。

例如，created鉤子在實例被創建後立即調用，而mounted鉤子在實例掛載到DOM後調用。

new Vue({
    data: {
        message: 'Hello Vue!'
    },
    created() {
        console.log('實例創建完成');
    },
    mounted() {
        console.log('實例已掛載到DOM');
    }
});

3.2 模板語法

Vue使用基於HTML的模板語法，允許開發者聲明式地將DOM綁定到底層Vue實例的數據。Vue模板是語法層面的純粹HTML，會被Vue解析器解析為渲染函數，生成虛擬DOM並最終渲染成真實DOM。


<div id="app">
  {{ message }}
</div>

3.3 數據綁定與響應式原理

Vue的核心特性之一是響應式數據綁定。當實例的數據發生變化時，視圖會自動更新。這是通過使用ES5的Object.defineProperty
方法將數據屬性轉換為getter/setter來實現的。

new Vue({
    data: {
        message: 'Hello Vue!'
    }
});

3.4 計算屬性與偵聽器

計算屬性是基於它們的依賴進行緩存的，只有在相關依賴發生改變時才會重新求值。這使得計算屬性在處理複雜邏輯時比普通方法更高效。

new Vue({
    data: {
        firstName: 'Foo',
        lastName: 'Bar'
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName;
        }
    }
});

偵聽器（watch）用於觀察和響應Vue實例上的數據變動。當你有一些數據需要隨著其他數據變動而變動時，使用偵聽器非常合適。

new Vue({
    data: {
        message: 'Hello Vue!'
    },
    watch: {
        message(newVal, oldVal) {
            console.log('Message changed:', newVal, oldVal);
        }
    }
});

3.5 條件渲染與列表渲染

Vue提供了v-if、v-else和v-show指令來控制元素的顯示與隱藏。v-if在條件變化時會完全移除或插入元素，而v-show
只是簡單地切換元素的CSS屬性display。


<div v-if="seen">現在你看到我了</div>
<div v-show="seen">現在你看到我了</div>

列表渲染通過v-for指令實現，它可以遍曆數組、對象甚至整數。


<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

3.6 事件處理

Vue使用v-on指令（簡寫為@）來監聽DOM事件，併在觸發時執行一些JavaScript代碼。


<button v-on:click="counter += 1">增加 1</button>

3.7 表單輸入綁定

Vue提供了v-model指令，用於在表單控制項（如<input>、<textarea>和<select>）和Vue實例的數據之間創建雙向數據綁定。

<input v-model="message" placeholder="編輯我">
<p>Message is: {{ message }}</p>

這些基礎知識是理解和使用Vue 3進行開發的關鍵。通過這些概念和工具，你可以開始構建功能豐富的Vue應用。

第4章：組件化開發

4.1 組件基礎

在Vue中，組件是可復用的Vue實例。組件可以擁有自己的數據、方法、生命周期鉤子等，並且可以被其他組件包含或嵌套。組件通過<component>
標簽或在模板中直接使用組件的標簽來使用。


<my-component></my-component>

在Vue 3中，組件的定義使用defineComponent函數，這提供了一種類型安全的定義方式。

const MyComponent = defineComponent({
data() {
return {
message: 'Hello'
};
},
template: '
<div>{{ message }}</div>'
});

4.2 組件通信

Vue組件之間的通信有多種方式，包括父子組件通過props和事件通信，以及祖先與後代組件間的通信通過provide / inject或事件匯流排。

父子組件通過props傳遞數據，子組件可以通過事件向父組件發送消息。


<child-component :parent-message="message" @child-event="handleChildEvent"></child-component>

4.3 插槽（Slots）

插槽允許開發者向組件的模板中插入內容。插槽的內容會被插入到組件的<slot>標簽中。


<template>
  <div>
    <slot></slot>
  </div>
</template>

使用插槽時，你可以為插槽提供預設內容，如果組件的使用者沒有提供內容，則預設內容會顯示。


<template>
  <div>
    <slot>預設內容</slot>
  </div>
</template>

4.4 動態組件與非同步組件

動態組件允許你在運行時根據條件切換組件。通過<component>標簽的is屬性，你可以指定當前要顯示的組件。


<component :is="currentComponent"></component>

非同步組件則是先載入組件的定義，而不是立即渲染。這在載入較大或者可能不存在的組件時非常有用。

const AsyncComponent = defineAsyncComponent(() =>
    import('./MyComponent.vue')
);

第5章：Vue 3的響應式系統與Composition API

5.1 響應式基礎

Vue 3的響應式系統是基於數據劫持和依賴收集機制。當數據發生變化時，Vue會自動更新視圖。這主要依賴於reactive和ref。

5.2 Composition API簡介

Composition API是Vue 3引入的新的編程模型，它通過函數式編程的方式，將組件的邏輯分解為一系列函數，如setup、onMounted
等，而不是傳統的created、mounted這樣的生命周期鉤子。這使得代碼更易於理解和測試。

5.3 使用ref和reactive創建響應式數據

  • ref：用於創建響應式的變數，它返回一個對象，包含當前值和value屬性，可以用來直接修改值。
const count = ref(0);
count.value = 10; // 監聽count的變化
  • reactive：用於創建響應式對象，對象的所有屬性都會被追蹤。
const obj = reactive({count: 0});
obj.count = 10; // 監聽obj.count的變化

5.4 使用computed和watch

  • computed：用於創建計算屬性，它會根據依賴的值自動計算並返回結果，且只在依賴值改變時重新計算。
const doubleCount = computed(() => obj.count * 2);
  • watch：用於監聽數據變化，可以執行特定的函數，但它不會自動響應數據的改變。
watch(obj.count, (newCount) => {
    console.log('Count changed:', newCount);
});

5.5 生命周期鉤子與Composition API

在Composition API中，生命周期鉤子被替換為更靈活的函數，如setup、onMounted、onUnmounted等。這些函數在組件實例創建、掛載、卸載時執行。

setup()
{
    const count = ref(0);
    onMounted(() => {
        // 在組件掛載後執行
    });
}

5.6 自定義Hooks

雖然Vue官方推薦使用Composition API，但你也可以自定義類似Hook的函數來組織代碼，但這些不是官方提供的API，而是開發者實踐中的常見做法。

function useCount(initialValue) {
    const count = ref(initialValue);
    // ...
    return {count};
}

在使用時：

const {count} = useCount(0);

這有助於將組件邏輯分解為更小、更可復用的部分。

第6章：高級特性

6.1 渲染函數與JSX

渲染函數是一種用於渲染Vue組件的替代方法，它允許你在JavaScript函數中直接定義組件的渲染輸出。JSX是一種在JavaScript中編寫HTML的語法，可以更方便地編寫渲染函數。

6.2 自定義指令

自定義指令是Vue中定義的一種底層的擴展機制，可以用來在組件中對普通DOM元素進行低級別操作。

6.3 過渡與動畫

Vue提供了一系列內置的過渡和動畫效果，包括transition、transition-group等。可以使用CSS或JavaScript來實現過渡和動畫效果。

6.4 混入（Mixins）

混入是一種在組件之間復用代碼的方式，它允許在多個組件中重用一組相同的選項。混入可以包含數據、方法、生命周期鉤子等，但需要註意有時候可能會導致數據衝突。

6.5 插件開發

插件是一種Vue的擴展機制，它可以在Vue的構造函數上添加全局方法、指令、過濾器等。開發插件需要遵循一定的規範，如提供一個安裝函數，併在安裝時調用Vue實例的use
方法。

const MyPlugin = {
    install(Vue) {
        Vue.directive('my-directive', {
            bind(el, binding, vnode) {
                // ...
            }
        });
    }
};

Vue.use(MyPlugin);

第7章：狀態管理與Vuex

7.1 Vuex簡介

Vuex是一個專為Vue.js應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

7.2 安裝與配置Vuex

要使用Vuex，首先需要通過npm或yarn安裝Vuex庫。安裝完成後，在Vue項目中創建一個Vuex實例，並將其作為插件安裝到Vue應用中。

npm install vuex --save


import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    // 狀態、getters、mutations和actions配置
});

new Vue({
    el: '#app',
    store,
    // ...
});

7.3 State、Getters、Mutations和Actions

  • State：存儲應用狀態的對象。
  • Getters：從state中派生出一些狀態，類似於計算屬性。
  • Mutations：更改state中狀態的唯一方法，必須是同步函數。
  • Actions：類似於mutations，但可以包含任意非同步操作，並通過提交mutations來改變狀態。
const store = new Vuex.Store({
    state: {
        count: 0
    },
    getters: {
        doubleCount(state) {
            return state.count * 2;
        }
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        incrementAsync({commit}) {
            setTimeout(() => {
                commit('increment');
            }, 1000);
        }
    }
});

7.4 Modules

當應用變得複雜時，可以將store分割成模塊（modules）。每個模塊擁有自己的state、getters、mutations和actions。

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {...},
    actions: {...}
};

const store = new Vuex.Store({
    modules: {
        a: moduleA
    }
});

7.5 Vuex與Composition API

Vuex與Vue 3的Composition API可以很好地結合使用。使用setup函數時，可以通過useStore函數來訪問Vuex store。

import {useStore} from 'vuex';

export default {
    setup() {
        const store = useStore();
        // 使用store
    }
};

Vuex提供了一種集中式存儲管理應用狀態的方式，使得狀態的變化可以被追蹤，並且可以方便地在組件之間共用狀態。通過合理地使用Vuex，可以提高應用的可維護性和可擴展性。

第8章：Vue Router

8.1 Vue Router簡介

Vue Router是Vue.js官方的路由管理器。它與Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。

8.2 安裝與配置Vue Router

要使用Vue Router，首先需要通過npm或yarn安裝Vue Router庫。安裝完成後，在Vue項目中創建一個路由器實例，並將其安裝到Vue應用中。

npm install vue-router --save


import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
    // 路由配置
});

new Vue({
    el: '#app',
    router,
    // ...
});

8.3 路由配置

在路由器實例中，可以配置多個路由，每個路由都對應一個組件。

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: HomeView
        },
        {
            path: '/about',
            name: 'About',
            component: AboutView
        }
    ]
});

8.4 導航守衛

導航守衛主要用於過濾不符合條件的導航，或者在導航前後執行一些操作。

  • 全局前置守衛：在路由導航發生之前調用，可以通過beforeEach函數進行配置。
const router = new VueRouter({
    // ...
});

router.beforeEach((to, from, next) => {
    // ...
});
  • 路由獨享守衛：在路由配置中，通過beforeEnter函數進行配置。
const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: HomeView,
            beforeEnter: (to, from, next) => {
                // ...
            }
        }
    ]
});
  • 組件內守衛：在組件內，通過beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave函數進行配置。
export default {
    beforeRouteEnter(to, from, next) {
        // ...
    },
    beforeRouteUpdate(to, from, next) {
        // ...
    },
    beforeRouteLeave(to, from, next) {
        // ...
    }
};

8.5 路由懶載入

在路由配置中，可以使用動態導入（import）語法，將組件按需載入，以實現路由懶載入。

const router = new VueRouter({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: () => import('@/views/HomeView.vue')
        }
    ]
});

路由器提供了一種強大的方式，用於管理應用的導航和狀態。通過合理地使用Vue Router，可以提高應用的性能和可維護性。

第9章：構建與部署

9.1 使用Vue CLI進行構建

Vue CLI是Vue.js的官方構建工具，提供了一系列的工具和功能，用於構建生產環境的Vue應用。

要使用Vue CLI構建生產環境的Vue應用，需要執行以下步驟：

  1. 在應用的根目錄下，運行npm run build命令。
  2. 構建後的文件將位於dist目錄下。
  3. 將dist目錄中的文件部署到伺服器上。

9.2 分析與優化生產構建

在構建生產環境的Vue應用時，可以使用Vue CLI提供的分析報告，來分析應用的構建情況。

  1. 在應用的根目錄下，運行npm run build --report命令。
  2. 在dist目錄下會生成一個report.html文件，該文件包含了應用的構建報告。
  3. 根據報告中的信息，可以對構建進行優化。

9.3 部署Vue應用

在構建完成後，可以將dist目錄中的文件部署到伺服器上。部署方式取決於伺服器的類型和配置，常見的部署方式包括：

  • 靜態伺服器：將dist目錄中的文件直接放到靜態伺服器上，例如Nginx或Apache。
  • Node.js伺服器：將dist目錄中的文件放到Node.js伺服器上，並使用express.static中間件進行服務。
const express = require('express');
const app = express();

app.use(express.static('dist'));

app.listen(3000, () => {
    console.log('Server listening on port 3000!');
});
  • 雲伺服器：將dist目錄中的文件放到雲伺服器上，例如AWS S3、Azure Blob Storage或Google Cloud Storage。

在部署Vue應用時，需要註意以下問題：

  • URL路徑：確保伺服器的URL路徑與應用的構建路徑一致，以避免資源載入失敗。
  • SSL證書：確保伺服器使用正確的SSL證書，以確保應用的安全性。
  • CDN加速：使用CDN加速，可以提高應用的載入速度。

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

-Advertisement-
Play Games
更多相關文章
  • 一文瞭解npm install -g和npm install --save-dev的關係
    本文分享自華為雲社區《npm install -g 和 npm install --save-dev 的關係》，作者： SHQ5785。 一、npm install 本地安裝 將安裝包放在 ./node_modules 下（運行 npm 命令時所在的目錄），如果沒有 node_modules 目錄， ...
  • form-create-designer中怎麼擴展自定義組件
    form-create-designer 是基於 @form-create/element-ui實現的表單設計器組件。可以通過拖拽的方式快速創建表單，提高開發者對錶單的開發效率，節省開發者的時間。 ...
  • 【日記】今天好睏（407 字）
    正文 4T 硬碟降價了，好心動。雖然只降了 10 塊錢……. 為什麼硬碟這麼貴啊！哼。 櫃面上雜事好多。雖然一天到晚見不到幾個客戶，但雜事就是很多。一個頭兩個大。也不知道從哪兒冒出來的這麼多事。 芒果乾到了！還沒去取，希望好吃 w。 今天真的好睏好睏，感覺從沒這麼困過。早上一睜眼，剛剛好 8:30， ...
  • 5 月，Java 崗位爆了？？？
    大家好，我是R哥。 最近，R哥分享了兩個特別有意思的面試輔導成功案例： 35K*14 薪入職了，這公司只要不裁員，我能一直呆下去。。 幹了 2 年多 Java 外包，終於脫離了！ 今天再分享一個振奮人心的面試輔導 case： 這個兄弟空窗期 5 個月，0 Offer，面試一問項目就掛，報名面試輔導， ...
  • Nginx R31 doc-09-Serving Static Content 靜態內容
    提供靜態內容 配置 NGINX 和 NGINX Plus 以提供靜態內容，使用類型特定的根目錄，檢查文件存在性，併進行性能優化。 本節介紹如何配置 NGINX 和 NGINX Plus 以提供靜態內容，如何定義搜索請求文件的路徑，如何設置索引文件，以及如何調整 NGINX 和 NGINX Plus ...
  • MySQL-10.索引優化與查詢優化
    C-10.索引優化與查詢優化 都有那些維度可以進行資料庫調優？簡言之： 索引失效，沒有充分利用到索引 -- 索引建立 關聯查詢太多JOIN(設計缺陷或不得已的需求) -- SQL優化 伺服器調優及各個參數設置(緩衝，線程數等) -- 調整my.cnf 數據過多 -- 分庫分表 關於資料庫調優的知識點 ...
  • NumPy 正態分佈與 Seaborn 可視化指南
    正態分佈（高斯分佈）是重要的概率模型，具有鐘形曲線特征，由均值μ和標準差σ描述。NumPy的`random.normal()`可生成正態分佈隨機數，Seaborn庫方便繪製分佈圖。正態分佈廣泛應用於統計學、機器學習、金融和工程等領域。練習包括生成正態分佈數據、比較不同標準差影響及模擬考試成績計算平均... ...
  • rbenv：Ruby 多版本管理利器
    在 Ruby 開發的世界中，經常需要面對不同項目使用不同 Ruby 版本的情況。這時，一個高效、靈活且易於使用的 Ruby 版本管理工具就顯得尤為重要。 rbenv 正是這樣一個工具，它允許開發者在同一臺電腦上輕鬆安裝、切換和管理多個 Ruby 版本。本文將詳細介紹 rbenv 的安裝、基本使用以... ...
一周排行
    -Advertisement-
    Play Games
  • .NET下 支持大小寫不敏感的JSON Schema驗證方法
    問題 有很多應用程式在驗證JSON數據的時候用到了JSON Schema。 在微服務架構下，有時候各個微服務由於各種歷史原因，它們所生成的數據對JSON Object屬性名的大小寫規則可能並不統一，它們需要消費的JSON數據的屬性名可能需要大小寫無關。 遺憾的是，目前的JSON Schema沒有這方 ...
  • 虛擬機安裝Linux CENTOS 07 部署NET8 踩坑大全
    首先下載centos07鏡像，建議使用阿裡雲推薦的地址： https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/?spm=a2c6h.25603864.0.0.59b5f5ad5Nfr0X 其實這裡就已經出現第一個坑了 centos 07 /u ...
  • 為什麼不推薦使用Linq?
    相信很多.NETer看了標題，都會忍不住好奇，點進來看看，並且順便準備要噴作者！ 這裡，首先要申明一下，作者本人也非常喜歡Linq，也在各個項目中常用Linq。 我愛Linq，Linq優雅萬歲！！！（PS：順便吐槽一下，隔壁Java從8.0版本推出的Streams API，抄了個四不像，一點都不優雅 ...
  • 碼農的轉型之路-全力以赴升級物聯網瀏覽器(IoTBrowser)
    在人生的重要時刻，我站在了畢業的門檻上，望著前方的道路，心中涌動著對未來的無限憧憬與些許忐忑。面前，兩條道路蜿蜒伸展：一是繼續在職場中尋求穩定，一是勇敢地走出一條屬於自己的創新之路。儘管面臨年齡和現實的挑戰，我仍舊選擇勇往直前，用技術這把鑰匙，開啟新的人生篇章。 迴首過去，我深知時間寶貴，精力有限。 ...
  • [C#] 在非同步請求併發情況下，dbcontext的安全問題
    單元測試 前言 時隔多個月，終於抽空學習了點新知識，那麼這次來記錄一下C#怎麼進行單元測試，單元測試是做什麼的。 我相信大部分剛畢業的都很疑惑單元測試是乾什麼的？在小廠實習了6個月後，我發現每天除了寫CRUD就是寫CRUD，幾乎用不到單元測試。寫完一個功能直接上手去測，當然這隻是我個人感受，僅供參考 ...
  • [WPF]用HtmlTextBlock實現消息對話框的內容高亮和跳轉
    一：背景 1. 講故事 最近在分析dump時，發現有程式的卡死和WeakReference有關，在以前只知道怎麼用，但不清楚底層邏輯走向是什麼樣的，藉著這個dump的契機來簡單研究下。 二：弱引用的玩法 1. 一些基礎概念 用過WeakReference的朋友都知道這裡面又可以分為弱短和弱長兩個概念 ...
  • Dotnet core Console調用WIndows.Forms的MessageBox提示
    最近想把ET打表工具的報錯提示直接調用win系統彈窗，好讓策劃明顯的知道表格哪裡填錯數據，彈窗需要調用System.Windows.Forms庫。操作如下： 需要在 .csproj 文件中添加： <UseWindowsForms>true</UseWindowsForms> 須將目標平臺設置為 Wi ...
  • C# 13前瞻:Extensions
    從C#3開始，拓展方法這一特性就得到了廣泛的應用。 此功能允許你能夠使用實例方法的語法調用某個靜態方法，以下是一個獲取/創建文件的靜態方法: public static async Task<StorageFile> GetOrCreateFileAsync(this StorageFolder f ...
  • 修複Win10上ListView樣式不正確的問題
    在Windows 11下，使用WinUI2.6以上版本的ListView長這樣： 然而到了Win10上，儘管其他控制項的樣式沒有改變，但ListViewItem變成了預設樣式（初代Fluent） 最重大的問題是，Win10上的HorizontalAlignment未被設置成Stretch，可能造成嚴重 ...
  • 記錄一次Windows下安裝RabbitMQ
    前言 周六在公司加班，幹完活後越顯無聊，想著下載RabbiitMQ做個小項目玩玩。然而這一下就下載了2個小時，真讓人頭痛。 簡單的講一下如何安裝吧，網上教程和踩坑文章還是很多的，我講我感覺有用的文章放在本文末尾。 安裝地址 erlang 下載 - Erlang/OTP https://www.erl ...
所有分類