文章

npm 專案版號管理指令

圖片
前言 npm 做為 node 套件版本管理工具,今天來學習如何使用 npm 升級 package.json 版號管理,可以對一個專案版號管理更加制式化 major 目標升級版號 指令 npm version --new-version major 範例 v1.0.0 ->  v2.0.0 minor 目標升級版號 指令 npm version --new-version minor 範例 v1.0.0 -> v1.1.0 patch 目標升級版號 指令 npm version --new-version patch 範例 v1.0.0 -> v1.0.1 premajor 目標升級版號 指令 npm version --new-version premajor 範例 v1.0.0 -> v2.0.0-0 preminor 目標升級版號 指令 npm version --new-version preminor 範例 v1.0.0 -> v1.1.0-0 prepatch 目標升級版號 指令 npm version --new-version prepatch 範例 v1.0.0 -> v1.0.1-0 prerelease 目標升級版號 指令 npm version --new-version prerelease 範例 v1.0.0 -> v1.0.1-0 若再一次的話 v1.0.1-0 -> v1.0.1-1

docker 如何不使用 sudo 管理權限身份執行

圖片
一般來說 Docker 剛安裝完成時,會需要使用管理權限來運行 Docker,那如果不想使用 sudo 權限運行,又想直接使用 Docker 命令,以下有幾種遵循方式 1. 將使用者名稱加入至 Docker 中 sudo usermod -aG docker $USER 2. 再來切換使用者使用的群組 newgrp docker

Vue2 及 Vue3 生命週期改變

圖片
前言 Vue 是一個現代開發框架,擁有完尚的生態系,讓我們可以將須多元件客製化,做出組件,並且可重複利用,高擴充性。在開發組件時,每個組件都擁有自己的生命周期,Vue 組件會偵測每個變數值,是否有變,並且更新內容,今天要一個一個了解 Vue 的生命週期,讓大家有更多認識。 Vue 的生命週期 hook 名稱(v2.x Options Api) 對應 hook 名稱(v3.x Composition API) 說明 beforeCreate setup() vue 被建立實體尚未初始化 created setup() vue 被建立實體尚未初始化 beforeMount onBeforeMonut Vue 實體尚未與模板 (DOM 節點) 綁定 mounted onMonut Vue 實體尚未與模板 (DOM 節點) 綁定 beforeUpdate onBeforeUate 當狀態被變動時,畫面同步更新前 update onUpdated 當狀態被變動時,畫面已同步更新完成 beforeDestroy onBeforeUnmount Vue 實體物件被銷毀前 destroy ...

react + typescript + webpack 如何設定 webpack alias

圖片
前言 create react app 是一個可以快速設定 react 專案的一個工具,在建立專案時已經把 babel,webpack 都已經預先封裝設置好,如果我們要修改 webpack alias 設定該如何設定呢 什麼是 alias alias 在 webpack 設定意義叫做,檔案路徑別名系統,意思就是可以使用一種別稱,讓 webpack 抓取這個別稱找到這個檔案路徑,這篇章節教大家如何設定 webpack alias 可以不需要那麼辛苦的一直點點斜 例子 // 平常引入檔案方式 import Menu from '../../components/Menu.jsx' // 使用 alias 之後 import Menu from '@/components/Menu.jsx' 建置步驟 建置步驟有四部,我會一步一步教大家 建立 react 專案 建立新的 react 專案並開啟專案, crate-react-app 為建立專案工具, react-demo 專案名稱,建立好之後將專案打開 create-react-app react-demo 執行 npm run eject 指令 在此專案可打開 package.json 裡面有個 scripts 部分,裡面提供了一些指令 "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"  } 在這裡面可以看到 eject 這個 script,使用 npm 執行以下使令,會將 webpack 設定建置好 npm run eject 安裝 tsconfig-paths-webpack-plugin 套件 使用 npm 安...