vite的搭建與使用的詳細步驟
實際開發(fā)中編寫的代碼往往是不能被瀏覽器直接識別的，比如ES6，TypeScript,Vue文件等。所以此時我們必須通過構(gòu)建工具來對代碼進行轉(zhuǎn)換，編譯，類似的工具有webpack,rollup,parcel.但是隨著項目越來越大，需要處理的javascript呈指數(shù)級增長，模塊越來越多。構(gòu)建工具需要很長時間才能開啟服務器，HMR也需要幾秒鐘才能在瀏覽器反應過來。所以出現(xiàn)了vite。
提示：vite僅支持vue3.0+的項目，也即是說我們無法在其中使用vue2.x
1.安裝：
npm init vite-app //項目名字 cd 項目名字 //進入項目 npm i //安裝依賴 npm run dev //打開項目
2.在vite項目中使用TypeScript
vite完全可以支持Typescript,不需要任何配置，只需要直接引入ts即可。
<script lang = "ts"> const abc: number = 123456789; //定義一個abc類型是數(shù)字，為什么這么定義可以去看一下Typescript的數(shù)據(jù)類型 console.log(abc, "abc"); </script>
3.vite項目使用less sass scss
安裝 less：npm install less less-loader -D
安裝 sass：npm install sass node-sass sass-loader -D
安裝好之后在<style lang="less" scoped></style>標簽上面直接就可以用
4.vite打包
npm run build
5.下面就來創(chuàng)建一個標準的項目
安裝路由：npm install vue-router@4（這里我是指定安裝的版本）
在src文件夾下面建一個router的文件夾 里面放一個index.ts的路由文件，內(nèi)容如下：
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
//如果沒有在.d.ts文件中定義，在這里引入路徑時加后綴名.vue是會報錯的
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文件夾下面建一個后綴名為.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/*";
兩個文件夾內(nèi)容大致一樣，在這里就只說一個home，
home文件夾下面的index.vue里的內(nèi)容如下：
<template>
<div>
<h1>我是home頁面</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的搭建與使用的詳細步驟的文章就介紹到這了,更多相關(guān)vite搭建與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+vue-meta-info動態(tài)設置meta標簽教程
這篇文章主要介紹了vue+vue-meta-info動態(tài)設置meta標簽教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue給對象動態(tài)添加屬性和值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
vue手寫<RouterLink/>組件實現(xiàn)demo詳解
這篇文章主要為大家介紹了vue手寫<RouterLink/>組件實現(xiàn)demo詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本文介紹了如何在Vue中定義和使用自定義指令,包括指令的注冊、鉤子函數(shù)、參數(shù)以及常見指令的封裝,如v-copy、v-longpress等,自定義指令在處理某些底層DOM操作時非常便捷,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了Vue封裝localStorage設置過期時間的相關(guān)資料,在這個示例中,我們在MyComponent.vue組件的setup函數(shù)中導入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設置和獲取帶有過期時間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
這篇文章主要介紹了VUE+Canvas實現(xiàn)財神爺接元寶小游戲,需要的朋友可以參考下本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-04-04
本篇文章主要介紹了vue2 前端搜索實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue props default Array或是Object的正確寫法說明
這篇文章主要介紹了vue props default Array或是Object的正確寫法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Vue內(nèi)聯(lián)處理器中訪問方法和訪問事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時,可以通過內(nèi)聯(lián)事件處理器來直接在模板中編寫事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡單的操作,還可以調(diào)用組件中的方法,并訪問事件參數(shù),下面將詳細講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問事件參數(shù),需要的朋友可以參考下2024-12-12