使用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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
這篇文章主要介紹了Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2021-03-03
Vue使用QrcodeVue生成二維碼并下載的示例代碼
這篇文章主要給大家介紹了Vue使用QrcodeVue生成二維碼并下載的示例,文章中有詳細的代碼示例供大家參考,感興趣的小伙伴可以參考閱讀下
2023-08-08
nuxt+axios解決前后端分離SSR的示例代碼
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
詳解Vue的mixin策略
這篇文章主要介紹了Vue的mixin策略的相關資料，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下
2020-11-11
Vue組件間的樣式?jīng)_突污染問題詳解
默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下
2022-11-11
vue實現(xiàn)書籍購物車功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)書籍購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
antd中table展開行默認展示,且不需要前邊的加號操作
這篇文章主要介紹了antd中table展開行默認展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue組件之間數(shù)據(jù)共享淺析
本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實例、應用技巧、基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下
2022-11-11
vue+iview使用樹形控件的具體使用
這篇文章主要介紹了vue+iview使用樹形控件的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-11-11
詳解關于Vue單元測試的幾個坑
這篇文章主要介紹了關于Vue單元測試的幾個坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04