鳥毅的Blog

 在2022年寫過一篇 Vue CLI move to Vite ，裡頭提到高手MakotoAtsu寫的範本，但後來沒有更新就很可惜。現在微軟終於在 Visual Studio 2022內建 Vue 範本，並且使用Vite與Web API，完全滿足我們程序猿的需求。

在Vue 2時我都用 Vue.Draggable ，到Vue 3時代一直沒找到好的替代品；試過 Vue.Draggable.Next ，效果很差完全不建議使用，不要去試。 直到前幾天找到  VueDraggablePlus   ，終於完美替代 Vue.Draggable ，誠心推薦。

最近將前陣子用 Vue CLI 寫的專案改為 Vite ，之所以能順利進行主要是找到了一位高手做的Template：  AspNetCore_Vite_Starter  。

從vue/cli改為vite時，首先遇到 Property 'xxx' does not exist on type ，這種很鳥的錯誤，不知道為什麼沒找到很好的解法，但我就先把package.json裡的 "build": "vue-tsc --noEmit  && vite build" 直接改成  "build": "vite build" ，等正式發行 vite 3.0時應該這些設定檔都會校調好吧？

使用新版(2021年底到2022年初)的Vue 3樣板時，會出現很多奇怪的錯誤，我又遇到一個：error  Component name "XXX" should always be multi-word 。 查了原廠手冊，發現是 Vue Style Guide  裡有提到要使用 Multi-word component names ，可是我抓 Vue Mastery的 Github 範例 也有使用 Single word component name 耶！ 無論如何，總是要讓現有的程式能夠成功編譯，查到是在eslint-plugin-vue 裡檢查的，所以只要改　.eslintrc.js ，加上  rules: {    "vue/multi-word-component-names": "off" }, 就可以忽視這個規則，成功編譯。

當使用<script setup> 語法撰寫時，若出現 defineEmits is not defined 或 defineProps is not defined 時，不一定是真的錯，很可能只是eslint檢查出錯。 解決方法：  加上import { defineEmits, defineProps } from "vue";  直接在 .eslintrc.js 加上 env: { "vue/setup-compiler-macros": true }, ，就不必在每個vue檔裡加入上述引用

尤雨溪開發的產品特色就是執行速度很快 Vite 的速度也是飛快，但前端技術一直在改變，若不使用正確的方式，光是node modules相依性就處理不完，特此紀錄現在2021年的vite用法。 以前是create-vite-app，現在改為 yarn create @vitejs/app  ，更快的方法是輸入  yarn create @vitejs/app 目錄名 或是 yarn create @vitejs/app 目錄名 --template vue-ts   註：現在vue 3相容性還是偶有問題，像我 vue add bootstrap 之後，會造成 yarn build 出錯 所以要把package.json裡 "build": "vuedx-typecheck . && vite build"改成"build": "vite build" 如果發現使用TypeScript出現以下錯誤： 就在專案根目錄增加一個shims-vue.d.ts declare module '*.vue' { import type {DefineComponent, defineComponent} from 'vue'; const component: DefineComponent export default component; } 就可以看到 如果還有問題，就是要調整其他的設定，待補...