使用Vite搭建vue3+TS項目的實現(xiàn)步驟
更新時間：2023年01月11日 08:24:39 作者：喝西瓜汁的兔嘰Yan
本文主要介紹了使用Vite搭建vue3+TS項目的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
vite簡介
vite 是一個基于 Vue3 單文件組件的非打包開發(fā)服務器，它具有快速的冷啟動，不需要等待打包操作；并且官網(wǎng)說是下一代的前端構(gòu)建工具。
初始化項目
npm init vite@latest
1.輸入項目名稱
2.選擇Vue
3.選擇TS
4.啟動項目
5.項目啟動成功
注意
用vscode進行開發(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認識到@根目錄符號
1.TS依賴
npm install @types/node --save-dev
配置ts文件采用@方式導入
在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,//允許字符串用作下標
"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中導入掛載路由
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", // 基準地址
timeout: 5000 // 超時時間
})
// 添加請求攔截器
service .interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
// 添加響應攔截器
service .interceptors.response.use(function (response) {
// 對響應數(shù)據(jù)做點什么
return response;
}, function (error) {
// 對響應錯誤做點什么
return Promise.reject(error);
});
// 最后導出
export default service
2.新建api文件夾，xxx.ts
import service from "@/utils/request"
//寫對應的接口
export let getList=(params)=>{
return service({
url:"/getlist",
method:"get",
params
})
}
//然后在對應的頁面引入使用即可。
配置跨域
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,這些我們只需要去對應的官網(wǎng)有指導安裝。
到此這篇關于使用Vite搭建vue3+TS項目的實現(xiàn)步驟的文章就介紹到這了,更多相關Vite搭建vue3+TS項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 如何搭建一個完整的Vue3.0+ts的項目步驟
- vite+vue3.0+ts+element-plus快速搭建項目的實現(xiàn)
- Vue3+script setup+ts+Vite+Volar搭建項目
- 一個基于vue3+ts+vite項目搭建初探
- 從零搭建一個vite+vue3+ts規(guī)范基礎項目(搭建過程問題小結(jié))
- Vue3+TS+Vite+NaiveUI搭建一個項目骨架實現(xiàn)
- 一步步帶你用vite簡單搭建ts+vue3全家桶
- 如何使用Vue3+Vite+TS快速搭建一套實用的腳手架
- vue3+ts+vite+electron搭建桌面應用的過程
- vue3+ts項目搭建的實現(xiàn)示例
相關文章
這篇文章主要為大家詳細介紹了VUE遞歸樹形實現(xiàn)多級列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Vite?Vue3?EsLint?Prettier配置步驟極簡方法詳解
這篇文章主要為大家介紹了Vite?Vue3?EsLint?Prettier配置步驟的極簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要給大家介紹了關于uniapp微信小程序axios庫的封裝及使用的相關資料,Axios是一個基于promise網(wǎng)絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了如何使用yarn創(chuàng)建vite項目+vue3,詳細介紹了使用vite創(chuàng)建vue3過程,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
MPEGTS.js是一個輕量級的JavaScript庫,用于處理MPEG-TS流,這篇文章主要給大家介紹了關于vue使用mpegts.js的詳細步驟記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3中使用echarts的簡單七個步驟(易懂,附緊急避坑)
近期在做一個vue3的項目,里面有個圖表需求,因公司之前使用第三方封裝的圖表缺少文檔,就去看了echars的官網(wǎng)文檔,引入原生echars來實現(xiàn),下面這篇文章主要給大家介紹了關于Vue3中使用echarts的簡單七個步驟,需要的朋友可以參考下2023-01-01
vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)
這篇文章主要介紹了vue 使用vant插件做tabs切換和無限加載功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
今天小編就為大家分享一篇VUEX采坑之路之獲取不到$store的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖
ApexCharts 是一個功能強大的 JavaScript 庫,用于創(chuàng)建交互式、可定制的圖表,在 Vue.js 中,它可以通過 vue3-apexcharts 插件輕松集成,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)交互式3D折線圖,需要的朋友可以參考下2024-06-06