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實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼
這里提供一個(gè)Vue單點(diǎn)登錄的demo給大家參考,對(duì)Vue實(shí)現(xiàn)單點(diǎn)登錄控件的完整代碼感興趣的朋友跟隨小編一起看看吧2021-11-11
<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接
這篇文章主要介紹了<el-button>點(diǎn)擊后如何跳轉(zhuǎn)指定url鏈接問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
Vue element-UI el-select循環(huán)選中的問(wèn)題
這篇文章主要介紹了Vue element-UI el-select循環(huán)選中的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue利用draggable實(shí)現(xiàn)多選拖拽效果
這篇文章主要為大家詳細(xì)介紹了如何利用vue中的draggable插件實(shí)現(xiàn)多選拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
vue中跨域以及sessionId不一致問(wèn)題及解決
這篇文章主要介紹了vue中跨域以及sessionId不一致問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理
這篇文章主要介紹了vue-admin-box第一步npm?install時(shí)報(bào)錯(cuò)的處理方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

