使用Vite搭建vue3+TS項目的實現(xiàn)步驟
更新時間：2023年01月11日 08:24:39 作者：喝西瓜汁的兔嘰Yan
本文主要介紹了使用Vite搭建vue3+TS項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
vite簡介
vite 是一個基于 Vue3 單文件組件的非打包開發(fā)服務(wù)器，它具有快速的冷啟動，不需要等待打包操作；并且官網(wǎng)說是下一代的前端構(gòu)建工具。
初始化項目
npm init vite@latest
1.輸入項目名稱
2.選擇Vue
3.選擇TS
4.啟動項目
5.項目啟動成功
注意
用vscode進(jìn)行開發(fā)的時候，推薦使用volar,禁用以前vue2常使用的插件Vetur。
修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
//解決“vite use `--host` to expose”
base: './', //不加打包后白屏
server: {
host: 'localhost',
port: 9527,
open: true
},
resolve:{
//別名配置，引用src路徑下的東西可以通過@如：import Layout from '@/layout/index.vue'
alias:[
{
find:'@',
replacement:resolve(__dirname,'src')
}
]
}
})
安裝ts依賴和ESLint
這個依賴就讓TS認(rèn)識到@根目錄符號
1.TS依賴
npm install @types/node --save-dev
配置ts文件采用@方式導(dǎo)入
在tsconfig.json文件中添加配置（下圖打注釋的都是添加的，也可自己豐富，其中只打//的是@配置，其余是其他配置）
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noImplicitAny": false, //any報錯
"lib": ["esnext", "dom"],
"suppressImplicitAnyIndexErrors": true,//允許字符串用作下標(biāo)
"skipLibCheck": true,
"baseUrl": ".", //
"paths": { //
"@/*":[ //
"src/*" //
] //
} //
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }],
"exclude":["node_modules"] // // ts排除的文件
}
2.ESLint
npm install --save-dev eslint eslint-plugin-vue
在根目錄創(chuàng)建.eslintrc.js文件
在rules可以添加自己的驗證規(guī)則
module.exports = {
root: true,
parserOptions: {
sourceType: 'module'
},
parser: 'vue-eslint-parser',
extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
env: {
browser: true,
node: true,
es6: true
},
rules: {
'no-console': 'off',
'comma-dangle': [2, 'never'] //禁止使用拖尾逗號
}
}
安裝路由
npm install vue-router@4
1.src下創(chuàng)建router文件夾,新建index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'HelloWorld',
component:()=>import('@/components/HelloWorld.vue'),
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
2.main.ts中導(dǎo)入掛載路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
3.修改App.vue路由出口
<script setup lang="ts"> </script> <template> <router-view></router-view> </template> <style> </style>
安裝Axios
npm install axios
1.新建utils–request.ts
// 首先先引入aixos
import axios from 'axios'
// 創(chuàng)建一個axios 實例
const service = axios.create({
baseURL: "/api", // 基準(zhǔn)地址
timeout: 5000 // 超時時間
})
// 添加請求攔截器
service .interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
service .interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點什么
return Promise.reject(error);
});
// 最后導(dǎo)出
export default service
2.新建api文件夾，xxx.ts
import service from "@/utils/request"
//寫對應(yīng)的接口
export let getList=(params)=>{
return service({
url:"/getlist",
method:"get",
params
})
}
//然后在對應(yīng)的頁面引入使用即可。
配置跨域
vite.config.ts
server: {
proxy: {
'/api': {
target: 'https://baidu.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
安裝Less
npm install -D less less-loader
使用：
<style scoped lang="scss">
.read-the-docs {
color: #888;
}
</style>
其他
我們還可以安裝ElementUI-plus和狀態(tài)管理Pinia,這些我們只需要去對應(yīng)的官網(wǎng)有指導(dǎo)安裝。
到此這篇關(guān)于使用Vite搭建vue3+TS項目的實現(xiàn)步驟的文章就介紹到這了,更多相關(guān)Vite搭建vue3+TS項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 如何搭建一個完整的Vue3.0+ts的項目步驟
- vite+vue3.0+ts+element-plus快速搭建項目的實現(xiàn)
- Vue3+script setup+ts+Vite+Volar搭建項目
- 一個基于vue3+ts+vite項目搭建初探
- 從零搭建一個vite+vue3+ts規(guī)范基礎(chǔ)項目(搭建過程問題小結(jié))
- Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)
- 一步步帶你用vite簡單搭建ts+vue3全家桶
- 如何使用Vue3+Vite+TS快速搭建一套實用的腳手架
- vue3+ts+vite+electron搭建桌面應(yīng)用的過程
- vue3+ts項目搭建的實現(xiàn)示例
相關(guān)文章
Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下2023-08-08
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
默認(rèn)情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導(dǎo)致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)書籍購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
antd中table展開行默認(rèn)展示,且不需要前邊的加號操作
這篇文章主要介紹了antd中table展開行默認(rèn)展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實例、應(yīng)用技巧、基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下2022-11-11
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了關(guān)于Vue單元測試的幾個坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04