# 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

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

//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

npm install -D sass

###### 參考 https://www.codegrepper.com/code-examples/css/setup+vite+vue+3+sass

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)

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


current: {"node":"10.19.0","npm":"6.13.4"}
wanted: {"node":">=12"}

安裝版本
https://juejin.cn/post/6844903733239742477

2021/09/06

npm install --save-dev nuxt-vite

Q: node npm 升級對環境有影響嗎？我可以升級嗎？
A: --save-dev 會儲存到 package.json
-D 則只會存入 本機不會存入環境中
以上出現的 WARN 是建議可以升級到 node版本12
若安裝套件時，將node_modules資料夾刪除重新安裝，要讓環境版本都一樣
> config設定要另外設定