# Vite by Anthony Fu https://www.youtube.com/watch?v=xx8gEHet6n8 ###### tags: `VUE` ### /vit/ - fast > 不需要編譯 建置 擴充 ### 傳統做法 啟動伺服器時，他會綁定整個app 伺服器只有在建構完成之後才準備好，這可能要花費伺服器相當長的時間 基於原生ESM的伺服器不需要花時間建構 將伺服器準備好，只需要針對你打開的頁面翻譯 ### Fast Transpling ###### no bundling needed * Transpile TypeScript, JSX,TSX into ESM powered by esbuild * Written in Go * Optimized with speed in mind and utilizes parallelism * No Babel involved ### Vue2 for Vite ###### vite-plugin-vue2 by @underfin 雖然vue插件是為了vue3開發的 但是vue的成員underfin為了vue2開發了一個插件 只需要一個配置，即可 nuxt2 用於 vite 兼容性也可 vitejs/awesome-vite#vue ```javascript= import { defineConfig } from 'vite' import { createVuePlugin } from 'vite-plugin-vue2' export default defineConfig({ plugins:{ createVuePlugin() } }) ``` ### Support for Legacy Browsers? ###### Sure, officially supported 不支持ＥＳＭ的舊瀏覽器 ### Legacy browser support ###### @vitejs/plugin-legacy ```javascript= //vite.config.js import legacy from '@vitejs/plugin-legacy' export default{ plugins:[ legacy({ targets:['defaults','not IE 11'] }) ] } ``` * 這是一個使用Babel來轉換模型的官方插件 * For supporting legacy browers that do not support native ESM * Generate a corresponding legacy chunk in the final bundle * Babel + System JS module ### vite2 搞 vue2 >Vue2 + router + vuex + + less + ts + prettier https://juejin.cn/post/6927919518777868295 # .scss and .sass ```javascript= npm install -D sass ``` ###### 參考 https://www.codegrepper.com/code-examples/css/setup+vite+vue+3+sass ```javascript= npm i bootstrap jquery popper.js ``` 再在 plugins/element.ts 添加 >import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.use(BootstrapVue) ```javascript= npm install @popperjs/core --save ``` ###### 參考 https://stackoverflow.com/questions/57459917/how-to-fix-this-error-module-not-found-cant-resolve-popper-js # Nuxt Vite2 use front https://github.com/nuxt/vite ![](https://i.imgur.com/TmGSsmn.png) ```javascript= current: {"node":"10.19.0","npm":"6.13.4"} wanted: {"node":">=12"} ``` 安裝版本 https://juejin.cn/post/6844903733239742477 2021/09/06 ```javascript= npm install --save-dev nuxt-vite ``` Q: node npm 升級對環境有影響嗎？我可以升級嗎？ A: --save-dev 會儲存到 package.json -D 則只會存入 本機不會存入環境中 以上出現的 WARN 是建議可以升級到 node版本12 若安裝套件時，將node_modules資料夾刪除重新安裝，要讓環境版本都一樣 > config設定要另外設定