vite + vue3 + ts

项目初始化

// 使用 Vite 创建项目
npm init @vitejs/app XXX

选择 Vue + TS后，

cd XXX
npm install
npm run dev

一般到这一步，项目就已经初始化成功了。
但是也可能会在 npm run dev 的过程中报错，如下

XXX/node_modules/esbuild/bin/esbuild:2
throw new Error(`esbuild: Failed to install correctly
^Error: esbuild: Failed to install correctlyMake sure you don't have "ignore-scripts" set to true. You can check this with
"npm config get ignore-scripts". If that returns true you can reset it back to
false using "npm config set ignore-scripts false" and then reinstall esbuild.If you're using npm v7, make sure your package-lock.json file contains either
"lockfileVersion": 1 or the code "hasInstallScript": true. If it doesn't have
either of those, then it is likely the case that a known bug in npm v7 has
corrupted your package-lock.json file. Regenerating your package-lock.json file
should fix this issue.

从报错信息看，先查看 npm config get ignore-scripts 返回是否是false，否，则执行

npm config set ignore-scripts false

然后可以看的出来，报错的文件是 node_modules/esbuild，那再装一次呗～

node node_modules/esbuild/install.js

默认构建好的目录结构是不包含router和vuex的，手动安装：

npm install vue-router@next vuex@next -S

注：Vue3.0 只支持 Router 和 Vuex 4.0及以上版本

项目目录如下，仅供参考：

配置别名

默认构建的是没有别名配置的，配置如下

import { defineConfig } from 'vite'
import { resolve } from 'path'// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {'@': resolve(__dirname, 'src')}}
})

然后 TS 就会报错：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OqH8s7hv-1652085223789)(https://upload-images.jianshu.io/upload_images/14211496-43bb1af3adfedc93.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

需要安装：

npm install @types/node -D

引入 element-plus

如果要使用 element ui 库，需要安装支持 Vue 3.0 的 element-plus 库

eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @type-eslint/parser @typescript-eslint/eslint-plugin

配置element-plus.ts

// plugins/element-plus.ts
import { App } from 'vue'
import ElementPlus from 'element-plus'
import * as icons from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'export default {install (app: App) {// element-plus 图标let k: keyof typeof iconsfor (k in icons) {app.component(k, icons[k])}// element-plus 组件app.use(ElementPlus, {locale: zhCn})}
}

main.ts中使用

import { createApp } from 'vue'
import ElementPlus from '@/plugins/element-plus'const app = createApp(App).use(ElementPlus)

封装request

配置环境变量

// env.ts
export function matchOrigin() {const hostname = location.hostnameif (/-dev\./i.test(hostname)) {return '//dev-xxx.com'} else if (/-test\./.test(hostname)) {return '//sit-xxx.com'} else if (/-uat\./.test(hostname)) {return '//uat-xxx.com'} else {return '//xxx.com'}
}export function matchBaseURL() {return `${calcOrigin()}/api`
}

全局loading封装

/**
* 全局loading效果：合并请求 避免重复请求
* 当调用一次showLoading，则次数+1；当次数为0时，即仅第一次发请求时显示loading
* 当调用一次hideLoading，则次数-1; 当次数为0时，即仅最后一次发请求时关闭loading
*/
import { ElLoading } from 'element-plus'
import { LoadingInstance } from 'element-plus/lib//components/loading/src/loading'// 请求次数：用来记录当前页面总共请求的次数
let loadingRequestCount = 0// 初始化loading
let loadingInstance: LoadingInstance// showLoading 请求次数 ++
const showLoading = (target: object) => {if (loadingRequestCount === 0) {loadingInstance = ElLoading.service(target)}loadingRequestCount++
}// hideLoading 请求次数 --
const hideLoading = () => {if (loadingRequestCount <= 0) returnloadingRequestCount--if (loadingRequestCount === 0) {loadingInstance.close()}
}export {showLoading,hideLoading
}

request封装

/*** 请求封装 request.ts*/
import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig, AxiosResponse } from 'axios'
import { matchBaseURL} from './env'
import { showLoading, hideLoading } from './loading'
const insts: Record<string, AxiosInstance> = {}// 仅在构建请求实例时才执行 matchBaseURL
function init(baseURL?: string) {const key = baseURL || '_BASE_URL_'if (insts[key]) { return insts[key] }const inst = axios.create({baseURL: baseURL || matchBaseURL(),headers: {...}})// 可在此处做一些请求拦截decorateService(inst)insts[key] = instreturn inst
}function decorateService(service: AxiosInstance) {service.interceptors.request.use(config => {showLoading({lock: true,text: 'Loading',background: 'rgba(0, 0, 0, 0.7)'})// 每次请求前，插入token，待封装...const token = xxx()if (token) {config.headers!.Authorization = token}return config})service.interceptors.response.use((response) => {setTimeout(() => {hideLoading()}, 200)const responseData = response.data// console.log('response', response)if (responseData.code === 200) {// 不能 resolve responseData，因为这里的类型为：AxiosResponsereturn Promise.resolve(response)}return Promise.reject(responseData)},(error) => {setTimeout(() => {hideLoading()}, 200)console.log('error', error)return Promise.reject(new Error('error'))})
}interface IRequest {<T = any, D = any>(url: string, config?: AxiosRequestConfig): AxiosPromise;<T = any, D = any>(config: AxiosRequestConfig): AxiosPromise;
}
const request: IRequest = function request<T = any, D = any>(url: string | AxiosRequestConfig, config?: AxiosRequestConfig): AxiosPromise {if (typeof url !== 'string') {config = url as AxiosRequestConfigurl = config.url!} else {config || (config = {})config.url = url}// 按需实例化和复用const inst = init(config?.baseURL)// 发送请求return inst.request<T, AxiosResponse<T>, D>(config)
}export function get<T = any, D = any>(url: string, params?: D, config?: AxiosRequestConfig<D>) {return request<T, D>({ ...(config || {}), params, url })
}export function post<T = any, D = any>(url: string, data?: D, config?: AxiosRequestConfig<D>) {return request<T, D>({ ...(config || {}), data, url, method: 'POST' })
}export { get as $get, post as $post }export default request

vite + vue3 + ts相关推荐

vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
vite+vue3+ts使用i18n
vue3使用i18n必须使用9.*版本 "vue-i18n": "^9.2.2" 目录 1.下载使用 1.1.创建配置 1.2.基本使用 1.3.这时会有一个警 ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
用 Vite+Vue3+Ts 搭建通用后台管理系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cl ...
用vite+Vue3+ts搭建通用后台管理系统
点击上方关注前端技术江湖,一起学习,天天进步通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可 ...