• 九、VueCLI和Vite
  • 1、VueCLI安裝和使用
  • 2、Vite安裝和使用
  • 3、Vite腳手架工具

九、VueCLI和Vite

1、VueCLI安裝和使用

• 安裝

# 安裝腳手架
npm i @vue/cli -g
# 更新腳手架
npm update @vue/cli -g
# 建立專案
vue create 專案的名稱

• 專案的目錄結構

• vue-cli-service原始碼閱讀

* vue-cli-service：
  (node_modules/@vue/cli-service/bin/vue-cli-service.js:14)
* webpack：
  (node_modules/@vue/cli-service/lib/commands/serve.js:163)
* vue.config.js：
  (node_modules/@vue/cli-service/lib/Service.js:304)
 

2、Vite安裝和使用

• 安裝

npm i -D vite

• vite的理解

* 專案目錄下執行vite命令，vite會起一個服務，供客戶端請求專案目錄下的資源，
      - webpack-dev-server（express）
      - vite1（koa）
      - vite2（connect）
* 對於js檔案，因為現在的瀏覽器已經支援了ES6標準（ESModule程式碼），
  所以在開發階段其實並不需要構建工具的參與，
  但在打包階段需要將ES6轉成ES5，所以需要構建工具的參與
* 對於其他檔案，vite會對這些檔案做一個簡單的轉化（ESModule程式碼），
  瀏覽器請求這些檔案的時候，vite服務會對這些請求做請求轉發，
  轉發到轉化後的ESModule程式碼並返回
 

• vite + postcss-preset-env

##################
# // 配置（postcss.config.js）
# module.exports = {
#     plugins: [
#         require("postcss-preset-env")
#     ]
# }
##################
npm i -D postcss-preset-env

• vite + sass

npm i -D sass

• vite + ts

預設支援

• vite + vue

npm i -S vue@next
##################
# // vue3單檔案元件支援
# @vitejs/plugin-vue
# // vue3 jsx支援
# @vitejs/plugin-vue-jsx
# // vue2支援
# underfin/vite-plugin-vue2
##################
##################
# // 安裝：npm i -D @vitejs/plugin-vue
# // 安裝：npm i -D @vue/compiler-sfc（測試結果並不需要）
# // 配置（vite.config.js）
# import {defineConfig} from "vite";
# import vue from "@vitejs/plugin-vue"
# 
# export default defineConfig({
#     plugins: [vue()]
# })
##################
 

• vite預打包

vite會對node_modules下專案依賴的模組做預打包，預打包目錄node_modules/.vite

• vite的命令

# 開發
npx vite
# 打包
npx vite build
# 打包後預覽
npx vite preview

• vite基於ESBuild

* ESBuild使用Go語言編寫，可以直接轉換成機器程式碼，而無需經過位元組碼
* ESBuild對比babel，具有超快的構建速度，並且不需要快取

3、Vite腳手架工具

• 安裝

# 相當於：npm init @vitejs/app
npm i -g @vitejs/create-app
create-app 專案名