使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件

news/2025/2/12 19:20:32

前言

记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。

一、使用 Vite 创建 Vue3+TS 项目

1.新建一个 temp 文件夹

(1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端;

2.创建一个 Vue3 项目工程

(1)具体操作如下:

npm create vite@latest(1) 输入项目名,如: vite-vue3-ts-less-element_plus ,然后回车
? Project name: » vite-vue3-ts-less-element_plus(2) 选择 Vue 框架,回车
? Select a framework: » - Use arrow-keys. Return to submit.Vanilla
>   VueReactPreactLitSvelteOthers(3) 选择数据类型,回车
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScriptJavaScriptCustomize with create-vue ↗Nuxt ↗(4) 创建完成,运行项目
Done. Now run: cd vite-vue3-ts-less-element_plusnpm installnpm run devPS C:\Users\Administrator\Desktop\temp>

二、解决一下配置问题

1.修改配置文件

(1)修改【vite.config.ts】文件

修改前:

import {defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
})

修改后:

import {defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve } from 'path'/*** 详情见 vitejs 文档:https://vitejs.dev/config/*/
export default defineConfig({plugins: [vue()],base: '/xxx/', // 配置相对地址或绝对地址,此处应为绝对地址,若将 Web 部署到 Nginx 所在的目录为 nginx-1.17.8/html/xxx ,则这个 base 的值就为 /xxx/resolve: {alias: {'@': resolve(__dirname, './src'),assets: resolve(__dirname, './src/assets'),}},server: {host: '', // 主机port: 5173, // 端口proxy: {// 项目 v1 的服务端接口地址'/v1/api': {target: 'http://127.0.0.1:8091/',changeOrigin: true,secure: false,ws: true},// 项目 v2 的服务端接口地址'/v2/api': {target: 'http://127.0.0.1:8092/',changeOrigin: true,secure: false,ws: true},// 项目 v3 的服务端接口地址'/v3/api': {target: 'http://127.0.0.1:8093/',changeOrigin: true,secure: false,ws: true},// // 默认服务端接口地址// '/': {//   target: 'http://127.0.0.1:8090/',//   changeOrigin: true,//   secure: false,//   ws: false// }}}
})

(2)修改【tsconfig.json】文件

修改前:

{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{"path": "./tsconfig.node.json" }]
}

修改后:

{"compilerOptions": {"allowJs": true, // xxx.vue is a JavaScript file. Did you mean to enable the 'allowJs' option?"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "Node","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{"path": "./tsconfig.node.json" }]
}

(3)修改【tsconfig.node.json】文件

修改前:

{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]
}

修改后:

{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]
}

2.解决报错问题

(1)找不到名称“__dirname”。

原因:path 模块是 node.js 的内置模块,而 node.js 默认不支持 ts 文件的

解决:安装 【@type/node】 依赖包【npm install @types/node --save-dev】

(2)未设置 "baseUrl" 时,不允许使用非相对路径。是否忘记了前导 "./"?。

解决:在【tsconfig.json】文件添加【baseUrl】配置

{"compilerOptions": {..."baseUrl": ".",    // 未设置 "baseUrl" 时,不允许使用非相对路径。"paths": {"@": ["src"],"@/*": ["src/*"]}},...
}

(3)找不到模块“./App.vue”或其相应的类型声明。

解决:在【src】目录新建【shims-vue.d.ts】文件,文件内容为以下代码

/* eslint-disable */
declare module '*.vue' {import type {DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}

(4)Vite 项目如何配置相对地址或绝对地址?

解决:在【vite.config.ts】文件中加上【base】属性,值可以为相对地址【'./'】,也可以为绝对地址【'/xxx/'】

export default defineConfig({plugins: [vue()],base: '/xxx/', // 配置相对地址或绝对地址,此处应为绝对地址,若将 Web 部署到 Nginx 所在的目录为 nginx-1.17.8/html/xxx ,则这个 base 的值就为 /xxx/resolve: {alias: {'@': resolve(__dirname, './src'),assets: resolve(__dirname, './src/assets'),}},
})

(5)当【npm run build】打包时,报错,提示信息为【Did you mean to enable the 'allowJs' option?】

解决:在【tsconfig.json】文件增加 allowJs 配置

{"compilerOptions": {"allowJs": true, // xxx.vue is a JavaScript file. Did you mean to enable the 'allowJs' option?// ...}
}

(6)因项目未指定 ESlint 解析器,导致一些语法解析错误

解决:项目根目录新建【.eslintrc.js】文件,注意文件名开头有个点,然后就完美解决

module.exports = {env: {browser: true,es2020: true,node: true,},extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],parserOptions: {ecmaVersion: "latest",parser: "@typescript-eslint/parser", // 指定ESlint的解析器sourceType: "module",},plugins: ["vue", "@typescript-eslint", "prettier"],rules: {"prettier/prettier": "error",},
}

三、整合 ElementPlus 组件库

(1)具体操作如下:

第一步:导入依赖包
npm i element-plus -D第二步:在项目的 src 目录新建 plugins 文件夹,里面再新建 element-plus.ts 文件,写入以下代码
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn' // 汉化 element-plus 组件export default (app: any) => {app.use(ElementPlus, {locale: zhCn,})
}第三步:在项目的 main.ts 文件夹引入和使用该插件和注册图标,即整合完成,main.ts 文件如下所示
import {createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'const app = createApp(App)// 引入 ElementPlus 插件(npm i element-plus)
import ElementPlusPlugin from '@/plugins/element-plus'// 全局注册 ElementPlus 图标组件(npm install @element-plus/icons-vue)
import * as ElementPlusIcons from '@element-plus/icons-vue'
for(const [key, component] of Object.entries(ElementPlusIcons)) {app.component(key, component)
}app
.use(store)
.use(router)
.use(ElementPlusPlugin)
.mount('#app')第四步:验证整合成功,在项目的 App.vue 文件夹,例如写个按钮标签,保存即可看到效果,App.vue 文件如下所示
<template><div style="display: flex; padding: 100px; align-item: center;"><el-button size="small" type="primary" icon="UploadFilled" @click="void (0)">点击事件</el-button><el-button size="small" type="primary" plain @click="void (0)"><el-icon :size="18"><UploadFilled /></el-icon><span>点击事件</span></el-button><el-button size="small" type="primary" circle><el-icon :size="18"><UploadFilled /></el-icon></el-button><el-icon :size="20" style="color: #409eff; cursor: pointer" @click="void (0)"><UploadFilled /></el-icon></div>
</template><style lang="less">* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;margin: 0;padding: 0;border: none;}#app {width: 100%;height: 100%;}
</style>

四、封装并使用 Axios 插件

(1)导入相关依赖,封装 axios 工具并且使用;

第一步:导入 axios 和 nprogress 依赖包
npm i axios
npm i nprogress
npm i --save-dev @types/nprogress第二步:在 src 目录新建 utils 文件夹,再新建 requestUtil.ts 文件,写上以下代码
import axios from 'axios'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import {ElMessage } from 'element-plus'const http = axios.create({baseURL: '',timeout: 300 * 1000, // 请求超时时间设置为300秒
})const NETWORK_ERROR = '网络错误,请联系开发人员'/*** 请求拦截器*/
http.interceptors.request.use((req) => {console.log('请求拦截器 =>', req)Nprogress.start()return req;
}, (error) => {Nprogress.done()return Promise.reject(error);
});/*** 响应拦截器*/
http.interceptors.response.use(function (res) {console.log('响应拦截器 =>', res)Nprogress.done()if (res.status == 200) {return res.data} else {ElMessage.error((NETWORK_ERROR))return Promise.reject(NETWORK_ERROR)}
});export default http第三步:在 src 目录新建 api 文件夹,里面再新建 UserManage 文件夹,里面再新建 index.ts 文件,写上以下代码
import http from '@/utils/requestUtil'export default {/*** 根据用户ID查询用户信息* 请服务端先准备好此接口:http://localhost:8080/v1/api/getUserById?userId=10001*/getUserById(userId: any) {return http.get(`/v1/api/getUserById?userId=${userId}`)},/*** 保存用户信息*/saveUser(data: any) {return http.post('/v1/api/saveUser',data,{headers: {'Content-Type': 'application/json'},})},
}第四步:在 main.ts 文件引入HTTP请求工具并配置为全局方法
// 引入HTTP请求工具并配置为全局方法
import axios from 'axios'
import UserManage_Api from '@/api/UserManage/index'
app.config.globalProperties.$http = {...UserManage_Api,
}
app.config.globalProperties.$axios = axios

(2)接口请求示例,在 App.vue 文件加上接口请求代码,如下所示;

<template><div style="display: flex; padding: 100px; align-item: center;"><el-button size="small" type="primary" icon="UploadFilled" @click="void (0)">点击事件</el-button><el-button size="small" type="primary" plain @click="void (0)"><el-icon :size="18"><UploadFilled /></el-icon><span>点击事件</span></el-button><el-button size="small" type="primary" circle><el-icon :size="18"><UploadFilled /></el-icon></el-button><el-icon :size="20" style="color: #409eff; cursor: pointer" @click="void (0)"><UploadFilled /></el-icon></div>
</template><script>
export default {data: () => ({content: ''}),created() {this.getUserById(10001)},methods: {/*** 根据用户ID查询用户信息*/async getUserById(userId) {// http://127.0.0.1:8080/v1/api/getUserById?userId=10001const res = await this.$http.getUserById(userId)console.log(res)},}
}
</script><style>* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;margin: 0;padding: 0;border: none;}#app {width: 100%;height: 100%;}
</style>

五、整合 vue-router、pinia、less 等插件

1.安装较新版本的 vue-router 路由插件

(1)使用方式和以前一样

npm view vue-router versions --json
npm i vue-router@4.2.0

2.安装 pinia 插件

(1)听说 Vuex 拥抱 ts 没有 Pinia 好,详情使用方式见官网(Pinia 中文文档)

npm i pinia

(2)在 src 目录新建 store 文件夹,再新建 index.ts 文件, 文件内容如下

import {createPinia } from 'pinia'
const store = createPinia()
export default store

(3)再新建 ILoveYouStore 文件,文件内容如下

import {defineStore } from 'pinia'/*** 爱老虎油状态管理仓库*/
export const ILoveYouStore = defineStore({id: 'ILoveYouStore', // ID必填且唯一state: () => {return {xxx: 'Hello,World!',yyy: 520,}},getters: {},actions: {setXxx(xxx: string) {this.xxx = xxx},}
})

(4) 如下为在某个 vue 页面,简单使用 pinia 状态管理仓库

<script>
// 引入爱老虎油状态管理仓库
import {ILoveYouStore } from '@/store/ILoveYouStore'
const useILoveYouStore = ILoveYouStore()
</script>然后随便用Vue2、Vue3、Vue3+语法糖来定义数据
<!-- ^ Vue2 -->
<template><div v-if="useILoveYouStore.$state.xxx != null">{{useILoveYouStore.$state.xxx }}</div><div v-else>{{useILoveYouStore.$state }}</div>
</template><script>
export default {data: () => ({useILoveYouStore: useILoveYouStore,}),
}
</script>
<!-- / Vue2 --><!-- ^ Vue3 -->
<script>
import {ref } from 'vue';
export default {setup() {const useILoveYouStore = useILoveYouStorereturn {useILoveYouStore }},
}
</script>
<!-- / Vue3 --><!-- ^ Vue3+语法糖 -->
<script setup>const useILoveYouStore = useILoveYouStore
</script>
<!-- / Vue3+语法糖 -->

3.安装 less 插件

(1)导入依赖后,就可以在页面任意使用了

npm i less -D

以上部分内容借鉴其他文章。


https://dhexx.cn/news/show-5466332.html

相关文章

飞塔防火墙只允许国内IP访问

飞塔防火墙只允许国内IP访问 方法1 新增地址对象&#xff0c;注意里面已经细分为中国内地、中国香港、中国澳门和中国台湾 方法2 手动新增国内IP的对象组&#xff0c;目前好像一共有8632个&#xff0c;每个对象最多支持600个IP段

【C++】LeetCode:LCR 026. 重排链表

题干 LCR 026. 重排链表 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln-1 → Ln 请将其重新排列后变为&#xff1a; L0 → Ln → L1 → Ln-1 → L2 → Ln-2 → … 不能只是单纯的改变节点内部的值&#xff0c;而是需要实…

IntelliJ+SpringBoot项目实战(十七)--在SpringBoot中整合SpringSecurity和JWT(下B)

八、SpringSecurity实现权限控制 在上节中介绍了SpringSecurity登录时从数据库中验证用户以及获取用户的权限集合。本文介绍如何进行权限控制。 在上节中&#xff0c;虽然实现了从数据库中获取用户并验证密码&#xff0c;但是还没有实现权限的控制&#xff0c;只是将用…

龙迅#LT6912适用于HDMI2.0转HDMI+LVDS/MIPI,分辨率高达4K60HZ,支持音频和HDCP2.2

1. 描述 LT6912是一款高性能的HDMI2.0转HDMI和LVDS和MIPI转换器。 HDMI2.0 输入和输出均支持高达 6Gbps 的数据速率&#xff0c;为4k60Hz视频提供足够的带宽。此外&#xff0c;还支持 HDCP2.2 进行数据解密&#xff08;无数据 加密&#xff09;。 对于 LVDS 输出&#xff0c…

计算属性和监听属性

Vue.js 中的计算属性与监听属性 Vue.js 是一个流行的前端框架&#xff0c;它提供了许多强大的特性来简化 Web 应用的开发。其中&#xff0c;计算属性&#xff08;Computed Properties&#xff09;和监听属性&#xff08;Watchers&#xff09;是两个非常重要的概念&#xff0c;…

恒创科技:服务器操作系统和客户端操作系统之间的区别

客户端操作系统和服务器操作系统是两种不同的操作系统&#xff0c;旨在满足计算机网络环境中的特定目的。虽然每种类型的操作系统在基本功能方面都有一些相似之处&#xff0c;但它们针对不同的用例进行了优化&#xff0c;并具有针对其特定角色量身定制的特定功能。 什么是服务器…

【排版教程】Word、WPS 分节符(奇数页等) 自动变成 分节符(下一页) 解决办法

毕业设计排版时&#xff0c;一般要求每章节的起始页为奇数页&#xff0c;空白页不显示页眉和页脚。具体做法如下&#xff1a; 1 Word 在一个章节的内容完成后&#xff0c;在【布局】中&#xff0c;点击【分隔符】&#xff0c;然后选择【奇数页】 这样在下一章节开始的时&…

物联网智能项目:智能家居系统的设计与实现

物联网(Internet of Things,IoT)技术正在迅速改变我们的生活方式,特别是在智能家居、工业自动化、环境监控等领域。物联网智能项目通过将设备、传感器、控制器等通过互联网连接,实现设备间的智能交互,带来高效、便捷和智能的体验。本文将介绍一个典型的物联网智能家居项目…

Xilinx PCIe高速接口入门实战(一)

引言&#xff1a;本文对Xilinx 7 Series Intergrated Block for PCI Express PCIe硬核IP进行简要介绍&#xff0c;主要包括7系列FPGA PCIe硬核资源支持、三IP硬核差异、PCIe硬核资源利用等相关内容。 1. 概述 1.1 7系列FPGA PCIe硬件资源支持 7系列FPGA对PCIe接口最大支持如…

一文了解 Hugging Face 平台

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Hugging Face 是一家专注于人工智能与自然语言处理&#xff08;NLP&#xff09;的科技公司&#xff0c;致力于推动先进的机器学习技术变得更加开放、易用并实现协作。对于普通公众而言&#xff0c;它提…