Vue3+script setup+ts+Vite+Volar搭建項目
好久沒有寫瞭,最近看到Vue3.2 發佈瞭,害,又要開始卷瞭麼。
其實我自己本身還沒有使用過Vue3 做過實際的項目開發,然鵝又出新東西瞭……,
新時代農民工真的是左手工作,右手遊戲,還要用jio去學習呢。
什麼? 你說談對象? xswl,我特麼一個農民工也配談對象?
不卷不行啊,我踏馬再看看自己盆友圈發的什麼玩意?嗯 ,還是永劫無間香
好瞭,廢話不多說,我們直接開始吧~
使用 Vite 創建 vue + ts 項目
參考 Vite 官方指南
執行執行,創建項目模板
$ npm init vite@latest √ Project name: ... v3_demo √ Select a framework: » vue √ Select a variant: » vue-ts Scaffolding project in C:\Users\admin\Desktop\v3_demo... Done. Now run: cd v3_demo npm install npm run dev
項目目錄結構說明
├── public # 不需要打包的靜態資源 │ └── favicon.ico ├── src │ ├── api # 後臺 API 接口封裝 │ ├── assets # 需要打包的靜態資源 │ ├── components # 公共組件 │ ├── composables # 通用的組合式 API │ ├── layout # 頁面佈局模板 │ ├── plugins # 插件 │ ├── router # 路由 │ ├── store # Vuex 存儲 │ ├── styles # 樣式 │ └── index.scss # 全局通用樣式 │ ├── utils # 工具模塊 │ ├── views # 路由頁面 │ ├── App.vue # 根組件 │ ├── main.ts # 入口模塊 │ ├── shims-vue.d.ts # 補充 .vue 模塊類型聲明 │ └── vite-env.d.ts # 補充 vite 類型聲明 ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── tsconfig.json └── vite.config.ts
vite新建vue3項目運行報錯
創建完項目,肯定是要安裝依賴包,再運行,但是盆友們會發現,運行直接報錯瞭
admin@DESKTOP-ABKQLS5 C:\Users\admin\Desktop\v3_demo
$ npm run dev> [email protected] dev
> viteevents.js:292
throw er; // Unhandled ‘error’ event
^Error: spawn C:\Users\admin\Desktop\v3_demo\node_modules\esbuild\esbuild.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted ‘error’ event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4058,
code: ‘ENOENT’,
syscall: ‘spawn C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe’,
path: ‘C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe’,
spawnargs: [ ‘–service=0.12.22’, ‘–ping’ ]
}
解決辦法: node ./node_modules/esbuild/install.js
在 Vite 創建的項目中,是默認沒有ESLint的
Vite中 TS 的說明
Vite 天然支持引入 .ts 文件。
Vite 僅執行 .ts 文件的轉譯工作,並 不 執行任何類型檢查。並假設類型檢查已經被你的 IDE 或構建過程接管瞭(你可以在構建腳本中運行 tsc –noEmit 或者安裝 vue-tsc 然後運行 vue-tsc –noEmit 來對你的 *.vue 文件做類型檢查)。
Vite 使用 esbuild 將 TypeScript 轉譯到 JavaScript,約是 tsc 速度的 20~30 倍,同時 HMR 更新反映到瀏覽器的時間小於 50ms。
註意因為 esbuild 隻執行轉譯工作而不含類型信息,所以它不支持 TypeScript 的特定功能例如常量枚舉和隱式 “type-only” 導入。你必須在你的 tsconfig.json 中的 compilerOptions 裡設置 “isolatedModules”: true,這樣 TS 才會警告你哪些功能無法與獨立編譯模式一同工作
vue-tsc 和 tsc
tsc 隻能驗證 ts 代碼類型
vue-tsc 可以驗證 ts + Vue Template 中的類型(基於 Volar)
建議在 package.json 中新增一個 scripts 腳本用來單獨執行 TS 類型驗證:
"scripts": { ... "build": "npm run tsc && vite build", "tsc": "vue-tsc -noEmit" }
-noEmit 表示隻驗證類型,不輸出編譯結果
跳過第三方包類型檢查, 在tsconfig.json中添加:
{ "compilerOptions": { ... "baseUrl": "./", "skipLibCheck": true } }
Vue3 的TS具體語法,這裡不再贅述,不會的小夥伴可以直接參考 官方文檔
Vue 3 的三種語法
茴香豆的茴字 有四種寫法,而打工人的Vue3 也有三種語法,時代在變,初心不變,各位孔老爺請看下文。
Option API
這個不多贅述瞭,會寫vue的都會,這就是vue2 大傢最常用的 選項式API
Composition API
組合式API,也就是Vue3誕生以來,最為人津津樂道的語法更新,也是我們下面script setup 語法的基礎
如果還不會的前端盆友們,趕緊卷起來吧! Composition API
script setup(Composition API 的語法糖)
<script setup>
是在單文件組件 (SFC) 中使用組合式 API 的編譯時語法糖。相比於普通的
更少的樣板內容,更簡潔的代碼。
能夠使用純 Typescript 聲明 props 和發出事件。
更好的運行時性能 (其模板會被編譯成與其同一作用域的渲染函數,沒有任何的中間代理)。
更好的 IDE 類型推斷性能 (減少語言服務器從代碼中抽離類型的工作)。
這裡就不貼尤雨溪的文章截圖瞭,script setup 已經由實驗狀態正式畢業,現提供穩定版本
在添加瞭setup的script標簽中,我們不必聲明和方法,這種寫法會自動將所有頂級變量、函數,均會自動暴露給模板(template)使用
這裡強調一句 “暴露給模板,跟暴露給外部不是一回事”
以項目模板的 HelloWorld.vue 為例,Composition API的語法:
<script lang="ts"> import { ref, defineComponent } from "vue"; export default defineComponent({ name: "HelloWorld", props: { msg: { type: String, required: true, }, }, setup: () => { const count = ref(0); return { count }; }, }); </script>
采用 setup 之後:
<script lang="ts" setup> import { ref, defineProps } from "vue"; const count = ref(0); const props = defineProps({ msg: { type: String, required: true, }, }); </script>
具體的語法,參考 script setup
安裝 Volar
Volar 是一個 vscode 的插件,volar提供瞭非常臥槽的功能。
安裝的方式很簡單,直接在vscode的插件市場搜索volar,然後點擊安裝就可以瞭。
這裡簡單列幾個我趕腳非常快樂的功能:
編輯器快捷分割
vue單文件組件,按照功能,存在template、script、style三個根元素。
安裝完 Volar之後 vscode 右上角會多出來一個小圖標
點它一下,我們的vue文件,按照功能,被拆分成瞭三個視窗,並且每個視窗都負責自己的功能,其他的兩個根元素都被合並瞭。
也就是說,我們可以非常容易的進行區分開template、script、style瞭,把一個文件拆成三個窗口,當三個文件來用,而且全部由插件來幫你完成,我們隻需要點一下即可
style裡面的class引用
可以看到,在.someclass這個類名上面,出現瞭一個1 reference的小圖標,代表著當前class有一次引用,我們點擊一下這個1 reference,會出現一個彈窗,裡面是當前class的具體使用位置
class追溯
在template中的一個使用class屬性的元素上,按住ctrl + 鼠標左鍵點擊
就會直接跳轉到類名所在的位置
結尾
以上,就是創建一個vue3 + script setup + ts + vite + volar 項目的基本流程,當然還沒有結束,因為我們還需要安裝vue-router@4 和 vuex@next 以及 UI 組件庫之類的,不過那些都比較基礎瞭,小夥伴們可以輕松搞定。
到此這篇關於Vue3+script setup+ts+Vite+Volar搭建項目的文章就介紹到這瞭,更多相關Vue3+script setup+ts+Vite+Volar內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 代號為Naruto的Vue 2.7正式發佈功能詳解
- 詳解vue3.2中setup語法糖<script lang="ts" setup>
- vue-admin-element項目突然就起不來瞭的解決
- node獲取命令行中的參數詳解
- Vue3編程流暢技巧使用setup語法糖拒絕寫return