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

前言

记录一下使用 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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/61333.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【sqlcipher】pc端sqflite使用过程中遇到的问题

在flutter中使用sqlcipher时 Mac上如果通过flutter带的文件管理api&#xff08;即File的delete()方法&#xff09;删除数据库文件&#xff0c;再创建同名的数据文件的话&#xff0c;必现readonly问题&#xff0c; 这里需要注意的一点是 DatabaseFactory 在Mac上直接使用全局的…

Dubbo的RPC泛化调用

目录 一、RPC泛化调用的应用场景 二、Dubbo RPC泛化调用的实现原理 三、Dubbo RPC泛化调用的实现步骤 四、示例代码 五、泛化调用怎么发现提供该接口的服务及服务的IP和端口&#xff1f; Dubbo的RPC泛化调用是一种在调用方没有服务方提供的API的情况下&#xff0c;对服务方…

使用uni-app进行开发前准备

使用uni-app进行开发&#xff0c;需要遵循一定的步骤和流程。以下是一个详细的指南&#xff0c;帮助你开始使用uni-app进行开发&#xff1a; 一、开发环境搭建 安装Node.js&#xff1a; 首先&#xff0c;从Node.js的官方网站&#xff08;https://nodejs.org/&#xff09;下载并…

ssh的隧道连接(端口映射)

SSH 隧道&#xff08;SSH tunneling&#xff09;的命令&#xff1a;用于将本地计算机的端口与远程服务器上的端口进行映射 命令&#xff1a; ssh -L 本地端口:localhost:服务器端口 -p 22 用户名服务器ip ssh: 表示使用 SSH 协议连接远程服务器。 -L 8501:localhost:8501: 这部…

AI需求条目化全面升级!支持多格式需求,打破模板限制!

AI需求条目化全面升级&#xff01;支持多格式需求&#xff0c;打破模板限制&#xff01; 一、多格兼济 标准立成 1、功能揭秘 预览未来 平台需求板块的AI需求条目化功能迎来全面升级。它支持多种需求格式&#xff0c;不再受限于模板文件&#xff0c;能够一键自动快速且灵活地生…

SSM相关面试题01

目录 1.何为Spring Bean容器?Spring Bean容器与Spring IOC 容器有什么不同吗? 2.Spring IOC 如何理解? 3.Spring DI 如何理解? 4.Spring 中基于注解如何配置对象作用域?以及如何配置延迟加载机制? 5.Spring 工厂底层构建Bean对象借助什么机制?当对象不使用了要释放…

【c++篇】:解读Set和Map的封装原理--编程中的数据结构优化秘籍

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;c篇–CSDN博客 文章目录 前言一.set和map的初步封装1.树的节点封装修改2.Find()查找函数3.红…

机器学习实战:泰坦尼克号乘客生存率预测(数据处理+特征工程+建模预测)

项目描述 任务&#xff1a;根据训练集数据中的数据预测泰坦尼克号上哪些乘客能生存下来 数据源&#xff1a;csv文件&#xff08;train.csv&#xff09; 目标变量&#xff1a;Survived&#xff08;0-1变量&#xff09; 数据集预览&#xff1a; 1、英文描述&#xff1a; 2、…

Linux自动化部署方法(Linux Automated Deployment Method)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…

C++软件设计模式之组合模式与其他模式的协作举例

组合模式&#xff08;Composite Pattern&#xff09;、装饰器模式&#xff08;Decorator Pattern&#xff09;、享元模式&#xff08;Flyweight Pattern&#xff09;、迭代器模式&#xff08;Iterator Pattern&#xff09;和访问者模式&#xff08;Visitor Pattern&#xff09;…

2686694 - 操作方法:MSEG - DBSQL_REDIRECT_INCONSISTENCY

2686694 - 操作方法&#xff1a;MSEG - DBSQL_REDIRECT_INCONSISTENCY SAP Note, Version: 4, 审批日期: 24.04.2023 显示更改 组件MM-IM-GF对象状态 优先级建议/附加信息对象状态 类别咨询对象状态 审批状态已发布至客户对象状态 更正0对象状态 手动活动0对象状态已成…

嵌入式 FPGA开发

目录 一、引言 二、当前嵌入式 FPGA 开发的现状 三、嵌入式 FPGA 开发的优势 四、嵌入式 FPGA 的应用领域 1. 通信系统 2. 数字信号处理 3. 视频图像处理 4. 高速接口设计 5. 人工智能 6. IC 设计与 PCB 设计类比 五、嵌入式 FPGA 未来发展趋势 六、结论 一、引言 …

工业AI质检 AI质检智能系统 尤劲恩(上海)信息科技有限公司

来的现代化工厂&#xff0c;将逐步被无人化车间取代&#xff0c;无人工厂除了产线自动化&#xff0c;其无人质检将是绕不开的话题。尤劲恩致力于帮助工业制造领域上下游工厂减员增效、提高品质效率&#xff0c;真正实现无人质检IQC/IPQC/OQC的在线质检系统。分析生产环节真实品…

Angular v19 (三):增量水合特性详解 - 什么是水合过程?有哪些应用场景?与 Qwik 相比谁更胜一筹?- 哪个技术好我就学哪个,这就是吸心大法吧

Angular在其最新版本 v19 中引入了增量水合&#xff08;Incremental Hydration&#xff09;这一特性。这一更新引发了开发者们广泛的讨论&#xff0c;特别是在优化首屏加载速度和改善用户体验方面。本文将详解水合过程的概念、增量水合的应用场景&#xff0c;以及它与类似框架如…

[STM32]从零开始的STM32 FreeRTOS移植教程

一、前言 如果能看到这个教程的话&#xff0c;说明大家已经学习嵌入式有一段时间了。还记得嵌入式在大多数时候指的是什么吗&#xff1f;是的&#xff0c;我们所说的学习嵌入式大部分时候都是在学习嵌入式操作系统。从简单的一些任务状态机再到复杂一些的RTOS&#xff0c;再到最…

Vivado程序固化到Flash

在上板调试FPGA时&#xff0c;通常使用JTAG接口下载程序到FPGA芯片中&#xff0c;FPGA本身是基于RAM工艺的器件&#xff0c;因此掉电后会丢失芯片内的程序&#xff0c;需要重新烧写程序。但是当程序需要投入使用时不能每一次都使用JTAG接口下载程序&#xff0c;一般FPGA的外围会…

医疗废物检测

3809总图像数 数据集分割 训练组80&#xff05; 3030图片 有效集20&#xff05; 779图片 测试集&#xff05; 0图片 标签 预处理 自动定向&#xff1a; 已应用 调整大小&#xff1a; 拉伸至 640x640 增强 未应用任何增强。 注射器 手术刀 输液管 医用手套 医用口罩 血渍 数据集…

如何进行JOIN优化

如何进行JOIN优化 简单来说&#xff0c;JOIN是MySQL用来进行联表操作的&#xff0c;用来匹配两个表的数据&#xff0c;筛选并合并符合我们要求的结果集&#xff0c;但使用了Join我们一般会对它多一点关注&#xff0c;在java开发手册中&#xff0c;禁止三个表以上关联使用Join&…

uniapp使用扩展组件uni-data-select出现的问题汇总

前言 不知道大家有没有学习过我的这门课程那&#xff0c;《uniCloud云开发Vue3版本官方推荐用法》&#xff0c;这么课程已经得到了官方推荐&#xff0c;想要快速上手unicloud的小伙伴们&#xff0c;可以学习一下这么课程哦&#xff0c;不要忘了给一键三连呀。 在录制这门课程…

Spring 自调用事务失效分析及解决办法

前言 博主在写公司需求的时候&#xff0c;有一个操作涉及到多次对数据库数据的修改。当时就想着要加 Transactional注解来声名事务。并且由于一个方法中有太多行了&#xff0c;于是就想着修改数据库的操作单独提取出来抽象成一个方法。但这个时候&#xff0c;IDEA 提示我自调用…