1、vue creat 項目名稱
選擇自定義
?選擇需要的依賴
?選擇vue3
?一路enter，選擇eslist+prettier
?繼續(xù)enter，等待安裝
按步驟操作，項目啟動成功
?2、vscode安裝5款插件
?2、代碼保存自動格式化，保證每個開發(fā)人員代碼一致，根目錄新建三個文件.editorconfig和.prettierrc和.prettierignore
.editorconfig文件如下，無論什么編輯器都按這個格式執(zhí)行
# http://editorconfig.org
root = true
[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
indent_style = space # 縮進風(fēng)格（tab | space）
indent_size = 2 # 縮進大小
end_of_line = lf # 控制換行類型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始終在文件末尾插入一個新行
[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off
trim_trailing_whitespace = false?.prettierrc文件如下，保存代碼格式化
{
"printWidth": 80,//每行多少代碼
"semi": false, // 末尾使用分號
"singleQuote": true, // 全局使用單引號
"tabWidth": 2, //tab寬度為兩個空格
"arrowParens": "avoid", //箭頭函數(shù)參數(shù)只有一個時是否要小括號，avoid省略括號
"trailingComma": "none", // 末尾不加逗號
"proseWrap": "preserve" // 是否將 Markdown 文件中的文本換行 preserve保留
}.prettierignore文件如下，忽略某些效驗
#忽略效驗的文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*vscode右鍵格式化文檔
?使用prettier格式化設(shè)置
package.json中配置一鍵執(zhí)行全部文件代碼格式化
3、安裝husky插件，保證git提交之前代碼規(guī)范
npx husky-init && npm install修改husky中pre-commit文件，npm test為npm run lint
4、配置vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: './', //打包后的應(yīng)用中，所有 URL 都會帶上的前綴
//配置代理
devServer: {
host: 'localhost',
port: 8080, // 端口號
open: true, // 自動啟動瀏覽器
//所有的配置項
proxy: {
//配置
'/api': {
//代理名稱,這里最好有一個
target: process.env.VUE_APP_BASE_API, // 后臺接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //路徑重寫
}
}
}
}
})
5、引入js必須在tsconfig.json文件配置?"allowJs": true
6、接口請求新建兩個文件，配置如下
第一：axios.ts文件配置如下
// 引入axios
import axios from 'axios'
// 請求超時時間
const server = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 1000
// headers: {
// 'Content-Type': 'application/json'
// }
})
// 請求攔截器
server.interceptors.request.use(
res => {
// 每次發(fā)送請求之前判斷是否存在token，如果存在，則統(tǒng)一在http請求的header都加上token，不用每次請求都手動添加了
// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進行判斷
// const token = sessionStorage('Token')
// token && (request.headers.Authorization = token)
// if (request.method.toUpperCase() === 'POST') {
// request.headers['Content-Type'] = 'application/json;charset=utf-8'
// }
return res
},
error => {
return Promise.reject(error)
}
)
// 響應(yīng)攔截器
server.interceptors.response.use(
res => {
return res.data
},
// 服務(wù)器狀態(tài)碼不是200的情況
error => {
return Promise.reject(error)
}
)
export default server
第二：api.ts文件配置如下，統(tǒng)一管理接口文章來源：http://www.zghlxwxcb.cn/news/detail-677207.html
import server from '@/axios'
interface LoginData {
username: string
password: string
}
export const testGetApi = () => server.get('/api/test')
export const testPostApi = (data: LoginData) => server.post('/api/login', data)第三：組件中接口調(diào)用如下文章來源地址http://www.zghlxwxcb.cn/news/detail-677207.html
<template>
<el-table :data="tableData" style="width: 100%" @cell-click="hasChange">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
<div>{{ addressList }}</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { testGetApi } from '@/api'
let tableData = ref([])
let addressList = ref()
const testFun = async () => {
const res = await testGetApi()
console.log(res)
tableData.value = res.data.list
}
const hasChange = (row: any) => {
console.log(row.address)
addressList.value = row.address
}
onMounted(() => {
testFun()
})
</script>到了這里，關(guān)于前端vue3+typescript架構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
