無聊看看

Nuxt vs Vue 技術選型與渲染模式比較 為 Dashboard 管理介面選擇最適合您的開發與部署模式 ⚖️ Vue + Element UI vs. Vue + Nuxt 面向 Vue + Element UI Vue + Nuxt UI 整合 內建套件，快速上手 須選擇 UI 套件，如 Element Plus、Naive UI、Tailwind 開發體驗 需手動整合 router、store、i18n 自動化，結構規範清楚 (auto-import, DevTools) ...

摘要 Vue 3.0 -2 Ref&reactive教學 摘要 Vue 3 不用使用data()的方式去定義響應式數據，我們利用ref()和reactive()來定義響應式數據 ref 當我們宣告 let name= ref("張三") 可以使用 console.log(name) 打印出來，發現張三被宣告為一個RefImpl對象。而address 就是一般的字串，表示該屬性未來不會做任何變更。 ref建立的響應式對象必須使用.value來取得/更新數據 ref()用來宣告基本類型數據 <template> < div class = "person" > < h2 > Ref 宣告範例 </ h2 > < br > < h3 > 姓名: {{name}} </ h3 > < h3 > 地址: {{address}} </ h3 > < button @ click = "UpdateName" > 更改為李四 </ button > </ div > </ template > < script lang = "ts" setup name = "MainPersonRef" > import {ref} from 'vue' //加上ref宣告為響應式數據 let name= ref ( "張三" ) let address = "高雄市" c...

摘要 Vue 3.0 -1 摘要 vue 3.0 2020年9月18日所發布，最新公開版本為v3.3.4，(1)性能提升 (2)支援TypeScript (3)新增setup語法糖 建立一個Vue3的專案 官方建議vite建立vue專案，快速建立、按需求編譯、快速熱重載 使用vite建立專案，需要先安裝nodejs 安裝指令: npm create vue@latest 安裝流程如下，依照自己需求安裝 < styl 安裝VS code 套件 (1) Vue - Official (2) Vue 3 Support - All In One 需要安裝專案裡面的npm套件，安裝完後，重開VS code，可以看到index.html為web application的入口 npm i 執行web application npm run dev 我們只要開發網頁應用程式元件、配置等等，都會在src資料夾 首先認識main.ts，將vue框架引入並掛載#app，#app為index.html的id=app，這是網站的根目錄 src/ /assets 靜態css、圖檔 /components vue元件 Composition API 風格 優勢相對於vue2使用的opton API的方式，利用函數的方式來組織代碼，可以將相關的功能寫在一起。 App.vue <template> < div class = "app" > < hl > 您好 </ hl > < main-person > </ main-person > </ div > </template> < script lang = "ts" ...