超高清截圖手把手教你徹底學會Vite

語言: CN / TW / HK

本文已參與「新人創作禮」活動,一起開啟掘金創作之路。

什麼是Vite?

  • 法語:輕量化,快速
  • 基於VUE3 非 打包開發伺服器,請注意,它是個開發伺服器哇!!
  • 快速開發,按需編譯,不再等待整個應用編譯完成
  • 基於原生模組系統ESModule實現

實現原理

  • 使用export import 方式匯入匯出模組,同時實現按需載入
  • 高度依賴module script 特性

下面開始搞事情吧~~

  • 相容性注意
  • Vite 需要 Node.js 版本 >= 12.0.0。然而,有些模板需要依賴更高的 Node 版本才能正常執行,當你的包管理器發出警告時,請注意升級你的 Node 版本。 image.png

新建一個資料夾,執行命令,構建一個 Vite + Vue 專案

```

npm 6.x

npm create vite@latest my-vue-app --template vue

npm 7+, extra double-dash is needed:

npm create vite@latest my-vue-app -- --template vue ```

進入專案,執行

cd my-vue-app npm install npm run dev

恭喜哇,專案跑起來啦~

  • 複製地址用瀏覽器訪問

開啟專案看一下我們的目錄

看個厲害的e

是不是很好奇,為什麼會可以直接載入.vue檔案呢???接下來我們就開始探索一下吧

  • 新建一個資料夾 vite,然後進去執行下面命令 npm init -y
  • 然後生成了一個package.json檔案
  • 安裝依賴 koa 用來實現node伺服器,它幫我們封裝了node-http哦 npm install koa
  • 接下來我們看一下,當我們執行 npm run dev 的時候,實際是執行了下面的命令,如果我們想要實現這個命令,我們又該怎麼做呢?

新建命令執行入口 vite\bin\www.js

配置package.json

"bin":"./bin/www.js",

配置執行環境(這個是必須寫的哇)

```

! /usr/bin/env node

// 這個就是我們的入口檔案啦~~

console.log('xiaojin love code!') ```

配置環境對映?怎麼說,這個就是把這個環境臨時搞到全域性,讓cmd也可以用

npm link

當然,還有更好玩的東西

  • 我把命令改了一下,好玩多了 ``` { "name": "vite", "version": "1.0.0", "description": "", "main": "index.js", "bin":{ "xiaojin": "./bin/www.js" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "koa": "^2.13.4" } }

```

新建一個檔案編寫服務程式碼,先跑一把玩一下 vite\src\server.js

``` const Koa = require('koa') const { Static } = require('vue') function createServer() { let app = new Koa() // 實現靜態服務功能,訪問我們的伺服器可以返回對應的檔案koa-Static return app } createServer().listen(8088,()=>{ console.log('xiaojin server is start at 8088') })

```

使用nodemon來監控程式碼變化,然後來自動重新執行,我們要執行下面的命令,其實我之前用過另一個叫做 surpervisor,也是可以的

npm i nodemon

在外層新建一個配置檔案,監控這個目錄的程式碼變化 nodemon.json

{ "watch":["vite"], "exec":"xiaojin" }

記得配置這個

重新執行nodemon命令試一把,記得,是在外層哦

nodemon

下個步驟,等我今天晚上熬夜寫完繼續補充

歡迎大家指出文章需要改正之處~
學無止境,合作共贏 在這裡插入圖片描述

歡迎路過的小哥哥小姐姐們提出更好的意見哇~~