本篇文章主要目的是將vite+vue3+vue-router+ts+pinia+element-plus結(jié)合搭建一個(gè)基本項(xiàng)目框架套媚,用于快速搭建項(xiàng)目,不會(huì)具體介紹每個(gè)庫或者api調(diào)用方式,需要詳細(xì)了解可以去官網(wǎng)
vite創(chuàng)建項(xiàng)目
編輯器如果使用的vscode 將vetur升級為volar 否則項(xiàng)目可以啟動(dòng)成功但是代碼會(huì)有很多報(bào)錯(cuò)
yarn create vite
1.選擇vue
2.選擇vue-ts
3.安裝依賴 yarn
執(zhí)行 yarn dev 打開瀏覽器出現(xiàn)如下則說明項(xiàng)目啟動(dòng)成功
基礎(chǔ)配置
針對我們使用vuecli 腳手架創(chuàng)建項(xiàng)目的習(xí)慣码党,我會(huì)把注意點(diǎn)在下面列出來
- 配置別名:我們習(xí)慣使用“@”代替src目錄稠肘,在vite中直接使用“@”會(huì)報(bào)錯(cuò),因?yàn)関ite沒有內(nèi)置荔睹,需要我們手動(dòng)添加狸演,path 直接使用會(huì)提示找到不到模塊,安裝@types/node 即可
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
配置完別名我們就可以在代碼中使用“@”替代src目錄僻他,當(dāng)然也可以配置多個(gè)別名宵距。這樣配置完后有一個(gè)問題就是代碼不報(bào)錯(cuò)了,但是也沒有提示了吨拗,輸入@后沒有提示满哪,只能手動(dòng)輸入路徑,這樣可太不智能了
其實(shí)這個(gè)時(shí)候就是ts配置文件的問題劝篷,因?yàn)閠s不知道“@”代表啥路徑哨鸭,所以在tsconfig.json中配置,
然后在輸入“@”后就會(huì)智能提示路徑了
好了娇妓,現(xiàn)在可以愉快的進(jìn)行vue3+ts開發(fā)了像鸡,但是我們在開發(fā)過程中會(huì)發(fā)現(xiàn)一個(gè)問題,如果要使用vue3的api
必須要引入哈恰,vue2則不用只估,那么如何解決這個(gè)問題呢志群?
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
當(dāng)然是插件啦!unplugin-auto-import
在vite.config.ts中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'], // 需要自動(dòng)引入api的庫
dts: resolve(__dirname, 'src/auto-import.d.ts') //可以選擇auto-import.d.ts生成的位置蛔钙,使用ts建議設(shè)置為'src/auto-import.d.ts' ,注意:這里配置之后會(huì)在啟動(dòng)之后多次編譯锌云,具體原因無法找到,可以選擇注釋掉吁脱,不影響使用
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})
然后在代碼中就可以隨意使用vue3的api而不用每次都導(dǎo)入了
好了,現(xiàn)在可以愉快的進(jìn)行開發(fā)了宾抓,我們搭建完后一定要運(yùn)行build執(zhí)行打包看一下,要不然等項(xiàng)目開發(fā)完了在打包如果出現(xiàn)問題豫喧,那就不好排查了石洗,果然現(xiàn)在打包會(huì)有錯(cuò)誤!=粝浴讲衫!
yarn run v1.22.10
$ vue-tsc --noEmit && vite build
node_modules/@vue/reactivity/dist/reactivity.d.ts:26:15 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
26 readonly [ReactiveFlags.IS_READONLY]: boolean;
~~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1208 [BooleanFlags.shouldCast]?: boolean;
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1209:6 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1209 [BooleanFlags.shouldCastTrue]?: boolean;
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1400:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1400 export { ReactiveFlags }
~~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1753:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1753 export { TrackOpTypes }
~~~~~~~~~~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1782:10 - error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.
1782 export { TriggerOpTypes }
~~~~~~~~~~~~~~
Found 6 errors in 2 files.
Errors Files
1 node_modules/@vue/reactivity/dist/reactivity.d.ts:26
5 node_modules/@vue/runtime-core/dist/runtime-core.d.ts:1208
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
這個(gè)就很煩!7醢唷涉兽!
找到vite官網(wǎng),官網(wǎng)給出了解釋篙程,所以我們把isolatedModules 設(shè)置為false枷畏,好了,可以打包了 ---- 或者在build腳本里面注釋掉vue-tsc --noEmit
打包后我們肯定要預(yù)覽一下打包后的項(xiàng)目是否正常虱饿,我們打開index.html期待出現(xiàn)頁面拥诡,結(jié)果是空白 !5ⅰ渴肉!是不是很郁悶
其實(shí)這是vite打包的路徑問題,我們打開控制臺(tái)查看爽冕,index.html可以正常請求仇祭,但是js和css請求404,看一下請求URL明顯是路徑問題
vite.config.ts配置base就可以解決問題了
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
base:'./',
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'], // 需要自動(dòng)引入api的庫
dts: resolve(__dirname, 'src/auto-import.d.ts') //可以選擇auto-import.d.ts生成的位置颈畸,使用ts建議設(shè)置為'src/auto-import.d.ts'
})
],
resolve: {
alias: {
'@': resolve(__dirname, 'src')
}
}
})