timBaiii 程式教學

前言 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

前言 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 安