从零开始搭建vue3 + ts + pinia + vite +element-plus项目

前言:据说vue2将于 2023 年 12 月 31 日停止维护,最近打算搭建一个vue3项目来学习一下,以防忘记,记录一下搭建过程。

一、使用npm创建项目

前提条件:已安装 16.0 或更高版本的 Node.js

执行 “npm init vue@latest” 命令来创建vue3项目,大家可以根据自己需要选择,我的选择具体如下图:

生成文件夹内容如下:

继续输命令:

启动项目后进入如下页面:

         此时,项目已经初步搭建完成,但是我打开之后发现项目文件有一些报错,我想着可能是什么地方没有配置好,于是查阅了很多资料,进一步添加配置。

 二、配置

1.配置tsconfig.json文件

找不到ts文件的需要在tsconfig.json里面进行配置(没有的话就新建一个,在根src同级的目录下面)。

此处我只是做了简单配置,具体大家可以按照自己实际使用来配置。(添加了"types": ["vite/client"]之后引入vitest模块红色波浪线报错没有了)

{// "files": [],  //指定需要被编译的文件列表(较少),可以省略 .ts 后缀。默认值为 false;// "references": [ //引用。项目中如果有多个相互独立的模块,可以使用这个属性来做分离。这样一个模块改变后,就只重新编译这个模块,其他模块不重新编译。编译时要改用 tsc --build。这在非常大的项目中应该能有不小收益。//   {//     "path": "./tsconfig.node.json"//   },//   {//     "path": "./tsconfig.app.json"//   },//   {//     "path": "./tsconfig.vitest.json"//   }// ],"compilerOptions": {  //编译器相关的选项// "forceConsistentCasingInFileNames": true,  //是否强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致"target": "esnext",  //指定编译的目标版本,esnext 指的是当前版本的 TS 编译器支持的最高版本。"module": "esnext",  //编译后的 JS 使用哪种模块系统。"useDefineForClassFields": true,"moduleResolution": "node","strict": true,  //启用严格模式,能够更能保证类型检测的正确。能减少 bug,缺点是要多写一些类型推断和分支判断的代码。"jsx": "preserve","sourceMap": true,"skipLibCheck": true,"resolveJsonModule": true,"esModuleInterop": true,"lib": ["esnext", "dom", "dom.iterable", "scripthost"],  //设置需要引入的全局类型声明。"baseUrl": "./",  //用于设置基础 url,可以帮我们省掉一些多余的路径前缀。如果你想使用相对项目根目录的路径,你需要将 baseUrl 设置为 . "paths": {  //路径重映射。要使用 paths,首先要设置好 baseUrl,paths 的源路径和新路径会使用 baseUrl 作为相对路径计算。"@": ["src"],"@/*": ["src/*"]},"types": ["vite/client"] //可指定只使用哪些全局类型声明,而不是 node_modules/@types 下所有的类型声明。},"include": [  //指定需要编译的文件列表或匹配模式.可以通过通配符指定目录,如 "src/**/*" 表示 src 下的所有文件。如果没有指定 files 配置,默认值为 ** ,即项目下所有文件;如果配置了 files,默认值为 [] 空数组。"src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","*.ts"],"exclude": ["node_modules", "dist"],//在 include 圈定的范围内,排除掉一些文件。我们经常用它来排除编译输出目录、测试文件目录、一些生成文件的脚本等文件。默认值为 "node_modules,bower_componen"。}

2.配置env.d.ts文件

找不到vue文件的,是因为ts无法解析我们的vue结尾的文件,所以需要在src目录下,

新建一个d.ts结尾的文件(可以叫env.d.ts)

/// <reference types="vite/client" />declare module '*.vue' {import { DefineComponent } from 'vue';// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>;export default component;
}// 环境变量 TypeScript的智能提示
interface ImportMetaEnv {VITE_APP_TITLE: string;VITE_APP_PORT: string;VITE_APP_BASE_API: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}

三、使用prettier工具

Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。

1.安装prettier

npm install prettier -D

 2.配置.prettierrc文件

semi:语句末尾是否要加分号,默认值true,选择false表示不加;

useTabs:使用tab缩进还是空格缩进,选择false;
tabWidth:tab是空格的情况下,是几个空格,选择2个;
singleQuote:使用单引号还是双引号,选择true,使用单引号;
printWidth:当行字符的长度,推荐80,也有人喜欢100或者120;
trailingComma:在多行输入的尾逗号是否添加,设置为 none;

{"$schema": "https://json.schemastore.org/prettierrc","semi": false,"useTabs": false,"tabWidth": 2,"singleQuote": true,"printWidth": 80,"trailingComma": "none"
}

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*

4.VSCode需要安装prettier的插件

四、使用ESLint检测

        在前面创建项目的时候选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。

1.VSCode需要安装ESLint插件

2.解决eslint和prettier冲突的问题

安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装)

npm i eslint-plugin-prettier eslint-config-prettier -D

 添加prettier插件:

'extends': ['plugin:vue/vue3-essential','eslint:recommended','@vue/eslint-config-typescript','@vue/eslint-config-prettier/skip-formatting',"@vue/prettier","@vue/prettier/@typescript-eslint",'plugin:prettier/recommended'],

五、引入element-plus

1.安装element-plus

npm install element-plus --save

2.引入

(1)完整引入

        如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

        Volar 支持:如果你使用 Volar,请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

(2)按需导入

        自动导入:需要使用额外的插件来导入要使用的组件。

安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite的配置文件中。

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})


        到此本文就结束了,不足之处,欢迎指出,感激不尽~

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

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

相关文章

【Java基础教程】(四十三)多线程篇 · 下:深入剖析Java多线程编程:同步、死锁及经典案例——生产者与消费者,探究sleep()与wait()的差异

Java基础教程之多线程 下 &#x1f539;本节学习目标1️⃣ 线程的同步与死锁1.1 同步问题的引出2.2 synchronized 同步操作2.3 死锁 2️⃣ 多线程经典案例——生产者与消费者&#x1f50d;分析sleep()和wait()的区别&#xff1f; &#x1f33e; 总结 &#x1f539;本节学习目标…

谷歌插件(Chrome扩展) “Service Worker (无效)” 解决方法

问题描述&#xff1a; 写 background 文件的时候报错了&#xff0c;说 Service Worker 设置的 background 无效。 解决&#xff08;检查&#xff09;方法&#xff1a; 检查配置文件&#xff08;manifest.json&#xff09; 中的 manifest_version 是否为 3。 background 中的…

如何动态修改 spring aop 切面信息?让自动日志输出框架更好用

业务背景 很久以前开源了一款 auto-log 自动日志打印框架。 其中对于 spring 项目&#xff0c;默认实现了基于 aop 切面的日志输出。 但是发现一个问题&#xff0c;如果切面定义为全切范围过大&#xff0c;于是 v0.2 版本就是基于注解 AutoLog 实现的。 只有指定注解的类或…

DataWhale AI夏令营——机器学习

DataWhale AI夏令营——机器学习 学习记录一1. 异常值分析2. 单变量箱线图可视化3. 特征重要性分析 学习记录一 锂电池电池生产参数调控及生产温度预测挑战赛 已配置环境&#xff0c;跑通baseline&#xff0c;并在此基础上对数据进行了简单的分析。 1. 异常值分析 对训练集…

K8S初级入门系列之八-网络

一、前言 本章节我们将了解K8S的相关网络概念&#xff0c;包括K8S的网络通讯原理&#xff0c;以及Service以及相关的概念&#xff0c;包括Endpoint&#xff0c;EndpointSlice&#xff0c;Headless service&#xff0c;Ingress等。 二、网络通讯原理和实现 同一K8S集群&…

PMP 数据收集工具与技术

数据收集工具与技术 (9个) 标杆对照 标杆对照是指将实际或计划的产品、流程和实践与其他可比组织的 做法进行比较&#xff0c;以便识别最佳实践、形成改进意见&#xff0c;并为绩效考核 提供依据。 头脑风暴 头脑风暴是一种数据收集和创意技术&#xff0c;主要用于在短时间…

三维点云中的坐标变换(只讲关键部分)

一、坐标旋转 坐标旋转包含绕x、y、z轴旋转&#xff0c;在右手坐标系中&#xff0c;x-翻滚(roll)&#xff0c;y-俯仰(pitch)&#xff0c;z-航向(yaw)。如果想详细了解&#xff0c;可以网络搜索 在PCL中&#xff0c;从baseLink到map的转换关系为:先绕x轴旋转,在绕y轴旋转,最后绕…

【软件工程中的各种图】

1、用例图&#xff08;use case diagrams&#xff09; 【概念】描述用户需求&#xff0c;从用户的角度描述系统的功能 【描述方式】椭圆表示某个用例&#xff1b;人形符号表示角色 【目的】帮组开发团队以一种可视化的方式理解系统的功能需求 【用例图】 2、静态图(Static …

【数据结构】C--单链表(小白入门基础知识)

前段时间写了一篇关于顺序表的博客&#xff0c;http://t.csdn.cn/0gCRp 顺序表在某些时候存在着一些不可避免的缺点: 问题&#xff1a; 1. 中间 / 头部的插入删除&#xff0c;时间复杂度为 O(N) 2. 增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不…

前端 | ( 十一)CSS3简介及基本语法(上) | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 系列笔记&#xff1a; 【HTML4】&#xff08;一&#xff09;前端简介【HTML4】&#xff08;二&#xff09;各种各样的常用标签【HTML4】&#xff08;三&#xff09;表单及HTML4收尾…

2023/07/23

1. 必须等待所有请求结束后才能执行后续操作的处理方式 方式一&#xff1a; async func () {const p1 await api1();const p2 await api2();const p3 await api3();Promise.all([p1, p2, p3]).then(res > {后续操作...}) }方式二&#xff1a;待补充 2. flex 弹性盒子布…

FPGA实现串口回环

文章目录 前言一、串行通信1、分类1、同步串行通信2、异步串行通信 2、UART串口通信1、UART通信原理2、串口通信时序图 二、系统设计1、系统框图2.RTL视图 三、源码1、串口发送模块2、接收模块3、串口回环模块4、顶层模块 四、测试效果五、总结六、参考资料 前言 环境&#xff…

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(7 月 21 日论文合集)

文章目录 一、检测相关(15篇)1.1 Representation Learning in Anomaly Detection: Successes, Limits and a Grand Challenge1.2 AlignDet: Aligning Pre-training and Fine-tuning in Object Detection1.3 Cascade-DETR: Delving into High-Quality Universal Object Detectio…

《Docker与持续集成/持续部署:构建高效交付流程,打造敏捷软件交付链》

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

c语言修炼之指针和数组笔试题解析(1.2)

前言&#xff1a; 书接上回&#xff0c;让我们继续开始今天的学习叭&#xff01;废话不多说&#xff0c;还是字符数组的内容上代码&#xff01; char *p是字符指针&#xff0c;*表示p是个指针&#xff0c;char表示p指向的对象类型是char型&#xff01; char*p"abcdef&q…

使用Plist编辑器——简单入门指南

本指南将介绍如何使用Plist编辑器。您将学习如何打开、编辑和保存plist文件&#xff0c;并了解plist文件的基本结构和用途。跟随这个简单的入门指南&#xff0c;您将掌握如何使用Plist编辑器轻松管理您的plist文件。 plist文件是一种常见的配置文件格式&#xff0c;用于存储应…

7.6Java EE——Bean的生命周期

Bean在不同作用域内的生命周期 Bean的生命周期是指Bean实例被创建、初始化和销毁的过程。在Bean的两种作用域singleton和prototype中&#xff0c;Spring容器对Bean的生命周期的管理是不同的。在singleton作用域中&#xff0c;Spring容器可以管理Bean的生命周期&#xff0c;控制…

vue父组件和子组件数据传递

vue --父组件向子组件传递数据 父组件&#xff1a; <template><div class"parent"><p>父组件&#xff1a;{{ msg }}</p><Child message"Hello, I am parent!"></Child></div> </template><script>…

【Linux】udp客户端windows版以及Tcp服务器的实现

windows版客户端更适合大多数人~ 文章目录 一. udp客户端windows版二.Tcp服务器的实现总结 一、udp客户端windows版 首先我们将上一篇文章中实现的udp大型聊天室的代码进行修改&#xff0c;注意我们只修改服务端代码将代码修改的很简单就好&#xff0c;因为我们只是做一个如何…

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…