一步步帶你用vite簡(jiǎn)單搭建ts+vue3全家桶
一、vite環(huán)境搭建，構(gòu)建vite-vue-ts項(xiàng)目
1、安裝vite環(huán)境
npm init @vitejs/app
或者
yarn create @vitejs/app
2、使用vite初始化vite+vue+ts的項(xiàng)目
npm init @vitejs/app app-name
或者
yarn create @vitejs/app app-name
3、選擇項(xiàng)目類型為vue+ts
（小tips:git bash中直接按上下鍵切換選擇自己想要的選項(xiàng)，雖然界面中不會(huì)動(dòng)態(tài)展示切換的用戶交互過(guò)程，但是別擔(dān)心，在回車后可以看到是切換到了對(duì)應(yīng)選項(xiàng)的）
如此一來(lái)，項(xiàng)目初始化完成，我們會(huì)得到一個(gè)文件結(jié)構(gòu)如下圖的項(xiàng)目：
此時(shí)，ts文件都會(huì)報(bào)此類錯(cuò)誤： 找不到依賴
因此我們需要執(zhí)行npm install來(lái)安裝依賴，安裝完成后就ok了。如果編輯器此時(shí)還是有報(bào)錯(cuò)提示可以重新打開(kāi)文件試試。
此時(shí)已無(wú)報(bào)錯(cuò)：
跟著package.json中的腳本設(shè)定，嘗試啟動(dòng)項(xiàng)目，結(jié)果如下：
此時(shí)，項(xiàng)目初始化就算是完成了。
二、項(xiàng)目配置
1、vue-router 配置
（1）安裝vue-router
npm install vue-router@4
或者
yarn add vue-router@4
（2）在src下新建一個(gè)router文件夾，作為vue-router的配置目錄。此目錄下再新建index.ts文件，編輯內(nèi)容如下：
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
{
path: "/",
redirect: "/home",
},
{
path: "/home",
name: "home",
component: () => import("../views/home/index.vue"),
},
];
const router = createRouter({
history,
routes
})
export default router（3）新建一個(gè)views文件夾，作為項(xiàng)目界面開(kāi)發(fā)目錄。參考router中的配置可知，在views目錄下新建home目錄并新建index.vue，編輯文件如下：
<script setup lang="ts">
import { ref } from 'vue'
const msg = ref('Hello')
const count = ref(710)
</script>
<template>
<h2>{{ msg }}</h2>
<h2>{{ count }}</h2>
</template>
<style scoped>
</style>（4）在main.ts中引入vue-router
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");（5）在App.vue中使用vue-router
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>
<template>
<router-view />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>配置結(jié)束，實(shí)現(xiàn)界面如下：
2、vuex 配置
（1）安裝vuex
npm install vuex@next --save
或者
yarn add vuex@next --save
（2）在 src目錄下創(chuàng)建一個(gè)store文件夾，在里面新建 index.ts、state.ts、mutations.ts、actions.ts
（3）編輯index.ts如下：
import { createStore, } from "vueX";
import state from './state'
import mutations from './mutations'
import actions from './actions'
const store = createStore({
state,
mutations,
actions,
modules: {
}
})
export default store（4）在main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
const app = createApp(App)
app.use(router).use(store).mount('#app')3、vite.config.ts 配置
（1）配置路徑別名
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()], // 注冊(cè)插件
server: {
open: true
},
resolve: {
alias: {
// 如果報(bào)錯(cuò)__dirname找不到，需要安裝node,執(zhí)行yarn add @types/node --save-dev
"@": path.resolve(__dirname, "src"),
"comps": path.resolve(__dirname, "src/components"),
}
}
})出現(xiàn)報(bào)錯(cuò)，無(wú)法識(shí)別path模塊：
path模塊是node中的一個(gè)核心模塊，需要安裝讓 TypeScript 支持 node.js 的依賴包—— @types/node（This package contains type definitions for Node.js）
npm install @types/node --save-dev
安裝成功后，就可以獲得有關(guān)node.js v6.x 的API的 類型說(shuō)明文件，之后就可以順利的導(dǎo)入需要的模塊了，問(wèn)題解決。
總結(jié)
到此這篇關(guān)于用vite簡(jiǎn)單搭建ts+vue3全家桶的文章就介紹到這了,更多相關(guān)vite搭建ts+vue3全家桶內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼
本篇文章主要介紹了Vue配合iView實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
Uniapp打包到線上,會(huì)出現(xiàn)雙標(biāo)題問(wèn)題,原因是：通過(guò)地址鏈接訪問(wèn)時(shí),會(huì)有個(gè)瀏覽器自身的標(biāo)題,和uniapp自身的導(dǎo)航欄標(biāo)題重復(fù),本文給大家介紹了uniapp如何解決H5頁(yè)面雙標(biāo)題,需要的朋友可以參考下2024-10-10
一文帶你了解vite對(duì)瀏覽器的請(qǐng)求做了什么
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開(kāi)發(fā)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于vite對(duì)瀏覽器的請(qǐng)求做了什么的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
vue3的ref,computed,reactive和toRefs你都了解嗎
這篇文章主要為大家詳細(xì)介紹了vue3的ref,computed,reactive和toRefs，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識(shí),前者能做到全部復(fù)用,本文給大家詳細(xì)講解,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vue抽出組件并傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue響應(yīng)式原理模擬實(shí)現(xiàn)原理探究
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對(duì)象本身（對(duì)象的增刪值）或者對(duì)象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見(jiàn)的示render函數(shù)2022-09-09
這篇文章主要介紹了Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
VUE3開(kāi)箱即用的音頻播放組件完整代碼(基于原生audio)
Vue3開(kāi)箱即用的框架有很多選擇,下面這篇文章主要介紹了VUE3開(kāi)箱即用的音頻播放組件(基于原生audio)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09