1.Vite創(chuàng)建vue3項(xiàng)目

使用 NPM:

npm init @vitejs/app

使用 Yarn:

yarn create @vitejs/app

一個(gè)命令快速安裝vite+ts+vue3項(xiàng)目：

npm init @vitejs/app vite-app --template vue-ts

默認(rèn)構(gòu)建好的目錄結(jié)構(gòu)是不包含router和vuex的需要手動(dòng)安裝并創(chuàng)建對應(yīng)目錄,使用命令：

npm i vue-router@next vuex@next -S

注意：vue3.0只支持router和vuex必須是4.0及以上版本

下面是我創(chuàng)建好的實(shí)戰(zhàn)項(xiàng)目目錄，僅供參考：

2.配置別名alias

vite構(gòu)建的vue默認(rèn)是沒有@別名的，所以需要我們手動(dòng)配置下，如下圖vite2.0配置方法僅供參考：

3.引入element-plus

如果需要使用element ui庫需要使用兼容vue3.0的element-plus庫才行

安裝element-plus:

npm i element-plus -S

是按需引入還是全局全部引入，看個(gè)人需求，具體引入方法請移步到element-plus官網(wǎng)里面介紹的很詳細(xì)，就不再贅述了

如果你是用按需加載可抽離成單獨(dú)文件，新建elementplus.ts代碼如下：

/*
 * @Author: 飛魚日記
 * @Date: 2021-04-18 16:12:26
 * @LastEditors: 飛魚日記
 * @LastEditTime: 2021-04-27 10:47:07
 * @Description: element-plus 組件全局按需加載文件
 */
// 官方網(wǎng)站：https://element-plus.gitee.io/#/zh-CN/component/installation
import {
  ElButton,
  ElLoading,
} from 'element-plus'

// 組件寫在components中
export const components: any[] = [
  ElButton,
]
// 插件寫在plugins中
export const plugins: any[] = [ElLoading]

在main.ts引入，如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { components, plugins } from './plugins/elementplus'
const app = createApp(App);

// 按需注冊elementplus的組插件
components.forEach(component => {
  app.component(component.name, component)
})
plugins.forEach(plugin => {
  app.use(plugin)
});

app.use(router).use(store).mount('#app');

4.glob全局導(dǎo)入

想要組件自動(dòng)注冊全局引入需要使用vite官方提供的導(dǎo)入方案，分為glob和globEager異步和同步兩種，但是在實(shí)踐中g(shù)lob純在一個(gè)神秘的bug，由于它是異步加載組件的，如果一個(gè)頁面模板引入了很多組件，多次秒刷新時(shí)會(huì)出現(xiàn)白屏或者有的組件加載了有的組件未加載空白的情況，不知道是因?yàn)槲宜⑿绿?，組件未來的及加載還是什么，所以最后采用了globEager同步加載組件的方法，這個(gè)方法是一刷新所有組件同步加載的，多次秒刷沒有發(fā)現(xiàn)bug；
在main.ts引入一段代碼：

/*****匹配根目錄文件將通過globEager動(dòng)態(tài)全局導(dǎo)入注冊組件--Start*****/
const modules = import.meta.globEager('./components/*/*.vue')
for (const path in modules) {
  app.component(modules[path].default.name,modules[path].default)
}

上面modules所匹配的目錄根據(jù)你自己的項(xiàng)目目錄配置即可，我傾向于匹配components下的所有子目錄下所有組件文件，如下圖：

注意：每個(gè)組件必須是具名組件（即組件name屬性必須設(shè)置名稱頁面應(yīng)用時(shí)需使用name名稱來調(diào)用）比如：

組件button：

頁面引入使用button組件里定義的name即可:

至此我們就可以暢快的使用組件了而且頁面無需使用import導(dǎo)入，是不是很爽- _ -

5.靜態(tài)資源導(dǎo)入

vite導(dǎo)入圖片方法，如果圖片放在assets里面不能使用絕對路徑引入比如

這樣引入打包時(shí)是不能夠被vite打包進(jìn)去的

官方推薦方法：

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

至于css中背景圖片的url（）同樣導(dǎo)入方法

總結(jié)：

暫時(shí)寫這么多，vite相對于webpack簡直質(zhì)的飛躍，如其名速度超快，但往往新的事物誕生也會(huì)伴隨著新的坑需要我們?nèi)ヌ?，加油，奧利給~

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

最新評(píng)論