使用vite搭建vue3項目(一) 創建一個工程

vite目的是以后替代webpack，原理是利用瀏覽器現在已經支持es6的import了，遇到import會發送一個http請求去加載文件，vite攔截這些請求，做一些預編譯，省去了webpack冗長打包的時間，提升開發體驗。

 

1.  使用npm創建工程，node版本必須在12以上

npm init @vitejs/app

 輸入工程名，選擇vue框架，選擇vue-ts即使用typescript版本開發vue

PS D:\workspace\test> npm init @vitejs/app

@vitejs/create-app is deprecated, use npm init vite instead

√ Project name: ... element-plus-ts
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in D:\workspace\test\element-plus-ts...

Done. Now run:

  cd element-plus-ts
  npm install
  npm run dev

進入工廠目錄，安裝，運行

PS D:\workspace\test\element-plus-ts> npm run dev

> element-plus-ts@0.0.0 dev
> vite


  vite v2.6.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 294ms.