vite的搭建與使用的詳細(xì)步驟
實(shí)際開(kāi)發(fā)中編寫(xiě)的代碼往往是不能被瀏覽器直接識(shí)別的,比如ES6,TypeScript,Vue文件等。所以此時(shí)我們必須通過(guò)構(gòu)建工具來(lái)對(duì)代碼進(jìn)行轉(zhuǎn)換,編譯,類(lèi)似的工具有webpack,rollup,parcel.但是隨著項(xiàng)目越來(lái)越大,需要處理的javascript呈指數(shù)級(jí)增長(zhǎng),模塊越來(lái)越多。構(gòu)建工具需要很長(zhǎng)時(shí)間才能開(kāi)啟服務(wù)器,HMR也需要幾秒鐘才能在瀏覽器反應(yīng)過(guò)來(lái)。所以出現(xiàn)了vite。
提示:vite僅支持vue3.0+的項(xiàng)目,也即是說(shuō)我們無(wú)法在其中使用vue2.x
1.安裝:
npm init vite-app //項(xiàng)目名字 cd 項(xiàng)目名字 //進(jìn)入項(xiàng)目 npm i //安裝依賴(lài) npm run dev //打開(kāi)項(xiàng)目

2.在vite項(xiàng)目中使用TypeScript
vite完全可以支持Typescript,不需要任何配置,只需要直接引入ts即可。
<script lang = "ts"> const abc: number = 123456789; //定義一個(gè)abc類(lèi)型是數(shù)字,為什么這么定義可以去看一下Typescript的數(shù)據(jù)類(lèi)型 console.log(abc, "abc"); </script>

3.vite項(xiàng)目使用less sass scss
安裝 less:npm install less less-loader -D
安裝 sass:npm install sass node-sass sass-loader -D
安裝好之后在<style lang="less" scoped></style>標(biāo)簽上面直接就可以用

4.vite打包
npm run build

5.下面就來(lái)創(chuàng)建一個(gè)標(biāo)準(zhǔn)的項(xiàng)目


安裝路由:npm install vue-router@4(這里我是指定安裝的版本)
在src文件夾下面建一個(gè)router的文件夾 里面放一個(gè)index.ts的路由文件,內(nèi)容如下:
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
//如果沒(méi)有在.d.ts文件中定義,在這里引入路徑時(shí)加后綴名.vue是會(huì)報(bào)錯(cuò)的
component: () => import("../pages/home/index.vue"),
children: [
{
path: '/news',
name: 'Hews',
component: () => import("../pages/news/index.vue")
}
]
},
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router;App.vue文件內(nèi)容如下:
<template>
<router-view />
</template>
<script>
import { defineComponent, onMounted } from "vue";
export default defineComponent({
name: "App",
});
</script>在src文件夾下面建一個(gè)后綴名為.d.ts的文件夾,內(nèi)容如下:
declare module "*.vue" {
import { ComponentOptions } from "vue";
const componentOptions: ComponentOptions;
export default componentOptions;
}
declare module "*.svg";
declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.gif";
declare module "*.bmp";
declare module "*.tiff";
declare module "lodash";
declare module "@/api/*";
兩個(gè)文件夾內(nèi)容大致一樣,在這里就只說(shuō)一個(gè)home,
home文件夾下面的index.vue里的內(nèi)容如下:
<template>
<div>
<h1>我是home頁(yè)面</h1>
</div>
</template>
<script lang="tsx"></script>
<style lang="less" src="./index.less" scoped></style>home文件夾下面的index.tsx里的內(nèi)容如下:
import { defineComponent } from "vue";
export default defineComponent({
name: "Home",
})到此這篇關(guān)于vite的搭建與使用的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vite搭建與使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例
今天小編就為大家分享一篇vue給對(duì)象動(dòng)態(tài)添加屬性和值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
vue手寫(xiě)<RouterLink/>組件實(shí)現(xiàn)demo詳解
這篇文章主要為大家介紹了vue手寫(xiě)<RouterLink/>組件實(shí)現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Vue封裝localStorage設(shè)置過(guò)期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過(guò)期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們?cè)贛yComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來(lái)設(shè)置和獲取帶有過(guò)期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲
這篇文章主要介紹了VUE+Canvas實(shí)現(xiàn)財(cái)神爺接元寶小游戲,需要的朋友可以參考下本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-04-04
vue props default Array或是Object的正確寫(xiě)法說(shuō)明
這篇文章主要介紹了vue props default Array或是Object的正確寫(xiě)法說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue內(nèi)聯(lián)處理器中訪問(wèn)方法和訪問(wèn)事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時(shí),可以通過(guò)內(nèi)聯(lián)事件處理器來(lái)直接在模板中編寫(xiě)事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡(jiǎn)單的操作,還可以調(diào)用組件中的方法,并訪問(wèn)事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問(wèn)事件參數(shù),需要的朋友可以參考下2024-12-12

