詳解vite2.0配置學(xué)習(xí)(typescript版本)
介紹
尤于溪的原話(huà)。
- vite與 Vue CLI 類(lèi)似,vite 也是一個(gè)提供基本項(xiàng)目腳手架和開(kāi)發(fā)服務(wù)器的構(gòu)建工具。
- vite基于瀏覽器原生ES imports的開(kāi)發(fā)服務(wù)器。跳過(guò)打包這個(gè)概念,服務(wù)端按需編譯返回。
- vite速度比webpack快10+倍,支持熱跟新, 但是出于處于測(cè)試階段。
- 配置文件也支持熱跟新?。。?/li>
創(chuàng)建
執(zhí)行npm init @vitejs/app ,我這里選擇的是vue-ts
版本
"vite": "^2.0.0-beta.48"
alias別名
vite.config.ts
const path = require('path') alias: { "@": path.resolve(__dirname, "src"), "@c": path.resolve(__dirname, "src/components") },
環(huán)境變量配置
1、在根目錄創(chuàng)建
2、只有前綴為的變量VITE_才對(duì)Vite處理的代碼公開(kāi)。一以下為.env.production文件,其它類(lèi)似。
shell # 開(kāi)發(fā)環(huán)境 VITE_APP_ENV = 'development' # api 地址 VITE_APP_PATH = 'dev/...'
3、啟動(dòng)文件package.json,在命令后面加上--mode test就好了,這個(gè)跟vue2一樣
"dev:test": "vite --mode test",
4、使用,跟vue2有些區(qū)別,在vite.config.ts內(nèi)讀取不到,其它文件可以拿到
import.meta.env
輸出為:
添加vue-router(vue3使用4.0+版本)
1、安裝
npm i vue-router@4.0.2 --save,安裝4.0版本
2、index.ts
import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router' // @ts-ignore const test = () => import('../views/test1.vue') const routes: Array<RouteRecordRaw> = [ {path: "/", redirect: "/test1"}, { path: "/test1", name: 'test1', component: test, } ] const router = createRouter({ history: createWebHashHistory(), routes: routes }) export default router
3、 main.ts
import router from "./router" createApp(App) .use(router) .mount('#app')
添加vuex(版本同樣要4以上)
1、安裝
npm i vuex@index -D
2、store/index.ts
import { createStore } from 'vuex' export default createStore({ state: { }, //... })
3、main.ts
import store from './store' createApp(App) .use(store) .mount('#app')
scss環(huán)境
1、安裝npm i sass -D,可以直接使用sass語(yǔ)法了
2、vite.config.ts,全局引入scss文件
css: { preprocessorOptions: { scss: { additionalData: `@import "./src/assets/scss/global.scss";`//你的scss文件路徑 } } },
到此這篇關(guān)于詳解vite2.0配置學(xué)習(xí)(typescript版本)的文章就介紹到這了,更多相關(guān)vite2.0配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解vue中使用transition和animation的實(shí)例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法
最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁(yè)面應(yīng)用。下面小編通過(guò)本文給大家介紹vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法 ,感興趣的朋友一起看看吧2018-11-11Element?UI中v-infinite-scroll無(wú)限滾動(dòng)組件使用詳解
在移動(dòng)端數(shù)據(jù)的更新中許多方法孕育而生,無(wú)限滾輪也是解決的方案一種,Element-ui為vue開(kāi)發(fā)了一個(gè)事件(v-infinite-scroll),下面這篇文章主要給大家介紹了關(guān)于Element?UI中v-infinite-scroll無(wú)限滾動(dòng)組件使用的相關(guān)資料,需要的朋友可以參考下2023-02-02Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn)的示例詳解
這篇文章主要介紹了Vue引入高德地圖并觸發(fā)實(shí)現(xiàn)多個(gè)標(biāo)點(diǎn),主要是在public下的index.html中引入地圖,引入組件設(shè)置寬高100%,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
這篇文章主要介紹了Vue切換組件實(shí)現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue項(xiàng)目中使用tinymce編輯器的步驟詳解
本文分步驟給大家介紹了vue項(xiàng)目中使用tinymce編輯器的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能(完整代碼)
驗(yàn)證碼功能在我們的身邊用處極廣,今天小編給大家分享基于vue實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能,感興趣的朋友跟隨小編一起看看吧2019-12-12