好久沒有寫了，最近看到Vue3.2 發(fā)布了，害，又要開始卷了么。
其實(shí)我自己本身還沒有使用過Vue3 做過實(shí)際的項(xiàng)目開發(fā)，然鵝又出新東西了……，
新時(shí)代農(nóng)民工真的是左手工作，右手游戲，還要用jio去學(xué)習(xí)呢。

什么？ 你說談對(duì)象？ xswl，我特么一個(gè)農(nóng)民工也配談對(duì)象？

不卷不行啊，我踏馬再看看自己盆友圈發(fā)的什么玩意？嗯 ，還是永劫無間香

好了，廢話不多說，我們直接開始吧~

使用 Vite 創(chuàng)建 vue + ts 項(xiàng)目

參考 Vite 官方指南

執(zhí)行執(zhí)行，創(chuàng)建項(xiàng)目模板

	$ 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

項(xiàng)目目錄結(jié)構(gòu)說明

	
	├── public                  # 不需要打包的靜態(tài)資源
	│   └── favicon.ico
	├── src
	│   ├── api                 # 后臺(tái) API 接口封裝
	│   ├── assets              # 需要打包的靜態(tài)資源
	│   ├── components          # 公共組件
	│   ├── composables         # 通用的組合式 API
	│   ├── layout              # 頁面布局模板
	│   ├── plugins             # 插件
	│   ├── router              # 路由
	│   ├── store               # Vuex 存儲(chǔ)
	│   ├── styles              # 樣式
	│     └── index.scss        # 全局通用樣式
	│   ├── utils               # 工具模塊
	│   ├── views               # 路由頁面
	│   ├── App.vue             # 根組件
	│   ├── main.ts             # 入口模塊
	│   ├── shims-vue.d.ts      # 補(bǔ)充 .vue 模塊類型聲明
	│   └── vite-env.d.ts       # 補(bǔ)充 vite 類型聲明
	├── .gitignore
	├── README.md
	├── index.html
	├── package-lock.json
	├── package.json
	├── tsconfig.json
	└── vite.config.ts

vite新建vue3項(xiàng)目運(yùn)行報(bào)錯(cuò)
創(chuàng)建完項(xiàng)目，肯定是要安裝依賴包，再運(yùn)行，但是盆友們會(huì)發(fā)現(xiàn)，運(yùn)行直接報(bào)錯(cuò)了

admin@DESKTOP-ABKQLS5 C:\Users\admin\Desktop\v3_demo
$ npm run dev

> v3_demo@0.0.0 dev
> vite

events.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 創(chuàng)建的項(xiàng)目中，是默認(rèn)沒有ESLint的

Vite中 TS 的說明

Vite 天然支持引入 .ts 文件。
Vite 僅執(zhí)行 .ts 文件的轉(zhuǎn)譯工作，并 不 執(zhí)行任何類型檢查。并假設(shè)類型檢查已經(jīng)被你的 IDE 或構(gòu)建過程接管了（你可以在構(gòu)建腳本中運(yùn)行 tsc --noEmit 或者安裝 vue-tsc 然后運(yùn)行 vue-tsc --noEmit 來對(duì)你的 *.vue 文件做類型檢查）。
Vite 使用 esbuild 將 TypeScript 轉(zhuǎn)譯到 JavaScript，約是 tsc 速度的 20~30 倍，同時(shí) HMR 更新反映到瀏覽器的時(shí)間小于 50ms。
注意因?yàn)?esbuild 只執(zhí)行轉(zhuǎn)譯工作而不含類型信息，所以它不支持 TypeScript 的特定功能例如常量枚舉和隱式 “type-only” 導(dǎo)入。你必須在你的 tsconfig.json 中的 compilerOptions 里設(shè)置 “isolatedModules”: true，這樣 TS 才會(huì)警告你哪些功能無法與獨(dú)立編譯模式一同工作

vue-tsc 和 tsc
tsc 只能驗(yàn)證 ts 代碼類型
vue-tsc 可以驗(yàn)證 ts + Vue Template 中的類型（基于 Volar）
建議在 package.json 中新增一個(gè) scripts 腳本用來單獨(dú)執(zhí)行 TS 類型驗(yàn)證：

"scripts": {
	  ...
	  "build": "npm run tsc && vite build",
	  "tsc": "vue-tsc -noEmit"
	}

-noEmit 表示只驗(yàn)證類型，不輸出編譯結(jié)果

跳過第三方包類型檢查, 在tsconfig.json中添加:

	{
	  "compilerOptions": {
	    ...
	    "baseUrl": "./",
	    "skipLibCheck": true
	  }
	}

Vue3 的TS具體語法，這里不再贅述，不會(huì)的小伙伴可以直接參考 官方文檔

Vue 3 的三種語法

茴香豆的茴字 有四種寫法，而打工人的Vue3 也有三種語法，時(shí)代在變，初心不變，各位孔老爺請(qǐng)看下文。

Option API

這個(gè)不多贅述了，會(huì)寫vue的都會(huì)，這就是vue2 大家最常用的 選項(xiàng)式API

Composition API

組合式API，也就是Vue3誕生以來，最為人津津樂道的語法更新，也是我們下面script setup 語法的基礎(chǔ)

如果還不會(huì)的前端盆友們，趕緊卷起來吧！ Composition API

script setup（Composition API 的語法糖）

<script setup> 是在單文件組件 (SFC) 中使用組合式 API 的編譯時(shí)語法糖。相比于普通的

更少的樣板內(nèi)容，更簡潔的代碼。
能夠使用純 Typescript 聲明 props 和發(fā)出事件。
更好的運(yùn)行時(shí)性能 (其模板會(huì)被編譯成與其同一作用域的渲染函數(shù)，沒有任何的中間代理)。
更好的 IDE 類型推斷性能 (減少語言服務(wù)器從代碼中抽離類型的工作)。

這里就不貼尤雨溪的文章截圖了，script setup 已經(jīng)由實(shí)驗(yàn)狀態(tài)正式畢業(yè)，現(xiàn)提供穩(wěn)定版本

在添加了setup的script標(biāo)簽中，我們不必聲明和方法，這種寫法會(huì)自動(dòng)將所有頂級(jí)變量、函數(shù)，均會(huì)自動(dòng)暴露給模板（template）使用

這里強(qiáng)調(diào)一句 “暴露給模板，跟暴露給外部不是一回事”

以項(xiàng)目模板的 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 是一個(gè) vscode 的插件，volar提供了非常臥槽的功能。

安裝的方式很簡單，直接在vscode的插件市場搜索volar，然后點(diǎn)擊安裝就可以了。

這里簡單列幾個(gè)我趕腳非?？鞓返墓δ埽?/p>

編輯器快捷分割
vue單文件組件，按照功能，存在template、script、style三個(gè)根元素。
安裝完 Volar之后 vscode 右上角會(huì)多出來一個(gè)小圖標(biāo)

點(diǎn)它一下，我們的vue文件，按照功能，被拆分成了三個(gè)視窗，并且每個(gè)視窗都負(fù)責(zé)自己的功能，其他的兩個(gè)根元素都被合并了。

也就是說，我們可以非常容易的進(jìn)行區(qū)分開template、script、style了，把一個(gè)文件拆成三個(gè)窗口，當(dāng)三個(gè)文件來用，而且全部由插件來幫你完成，我們只需要點(diǎn)一下即可

style里面的class引用

可以看到，在.someclass這個(gè)類名上面，出現(xiàn)了一個(gè)1 reference的小圖標(biāo)，代表著當(dāng)前class有一次引用，我們點(diǎn)擊一下這個(gè)1 reference,會(huì)出現(xiàn)一個(gè)彈窗，里面是當(dāng)前class的具體使用位置

class追溯

在template中的一個(gè)使用class屬性的元素上，按住ctrl + 鼠標(biāo)左鍵點(diǎn)擊

就會(huì)直接跳轉(zhuǎn)到類名所在的位置

結(jié)尾

以上，就是創(chuàng)建一個(gè)vue3 + script setup + ts + vite + volar 項(xiàng)目的基本流程，當(dāng)然還沒有結(jié)束，因?yàn)槲覀冞€需要安裝vue-router@4 和 vuex@next 以及 UI 組件庫之類的，不過那些都比較基礎(chǔ)了，小伙伴們可以輕松搞定。

到此這篇關(guān)于Vue3+script setup+ts+Vite+Volar搭建項(xiàng)目的文章就介紹到這了,更多相關(guān)Vue3+script setup+ts+Vite+Volar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論