当前位置: 首页 > news >正文

❤ Vue3 完整项目太白搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript(一)yarn 版本控制 ltb (太白)

❤ 项目搭建

一、项目信息

Vue3 完整项目搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript(一)yarn 版本控制

项目地址:

二、项目搭建

(1)创建项目

yarn create vite <ProjectName> --template vueyarn install //安装依赖
yarn dev //运行项目

可以看到项目已经给我们进行了一些基础配置:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

三、安装配置

1、使用router 路由 Vue Router

yarn add vue-router@4 --save

router 文件夹下新建 index.ts,配置路由

  
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";// 1. 配置路由
const routes: Array<RouteRecordRaw> = [{path: "/", // 默认路由 home页面component: () => import("../views/home/index.vue"),},];
// 2.返回一个 router 实列,为函数,配置 history 模式
const router = createRouter({history: createWebHistory(), routes,
});// 3.导出路由   去 main.ts 注册 router.ts
export default router

3、 在main.ts中引用router下的index.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入routerconst app = createApp(App)
app.use(router).mount('#app')

4、app.vue中添加路由组件router-view

<template><router-view></router-view>
</template>

2、 使用pinia 存储数据

1、安装

yarn add pinia

2、引入

修改main.ts,引入pinia提供的createPinia方法,创建根存储

import { createPinia } from 'pinia' // 引入pinia
app.use(createPinia()).use(router).mount('#app') //挂载

3、配置环境变量(开发环境和生产环境)

(1) 配置

通常来说,不同的环境会有不同的请求api接口,这就需要修改配置,才能满足对应的环境。所以这里就使用了环境变量。环境变量就是在不同的环境中使用不同的变量值

环境变量文件(.env)
在项目根目录(和src同级)中创建三个文件:
在这里插入图片描述

注意:在vite构建工具下配置,就得使用VITE的前缀名

.env.development

#【开发环境】
NODE_ENV = 'development'
VITE_APP_BASE_API = '你的地址'

.env.staging

# 【测试环境】
NODE_ENV = 'staging'
VITE_APP_BASE_API = '你的地址'

.env.production

# 【生产环境】
NODE_ENV = 'production' //李敏啊
VITE_API_BASE_URL = '你的地址'
(2)环境变量定义与获取

webpack下环境获取是这样子:

process.env.VUE_APP_API_BASE_URL

vite下更改为

import.meta.env.VITE_API_BASE_URL

在vite.config.js中自定义环境变量前缀及获取环境变量的配置

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
const { resolve } = require("path");export default defineConfig(({command, mode }) => {const env = loadEnv(mode, process.cwd())console.log(env.VITE_APP_BASE_API) // 获取环境变量return {plugins: [vue()],envPrefix:  ['VITE', 'VUE'],   // 环境变量前缀,默认只会暴露VITE开头变量,定义后可暴露VUE开头变量define: {'process.env.VITE_APP_BASE_API':JSON.stringify(env.VITE_APP_BASE_API),},}
})

package.json多环境配置

  "scripts": { "dev": "vite",            // 开发环境"serve": "vite preview",  // 本地预览"staging": "vite build --mode staging",  // 测试环境打包"build": "vite build",    // 生产环境打包},

4、项目配置axios

(1)安装使用axios

npm install axios

(2)封装axios请求
创建request.js ( src => utils => request.js )

 
import axios from 'axios'
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000,
})// request 拦截器
service.interceptors.request.use(config => {// 在这里可以设置请求头、请求参数等return config},error => {console.log(error)return Promise.reject(error)}
)// response 拦截器
service.interceptors.response.use(response => {// 在这里处理返回数据const { data } = responseif (data.code !== 200) {console.error('Error:', data.message)return Promise.reject(newError(data.message || 'Error'))} else {return data}},error => {console.log(error)return Promise.reject(error)}
)// 封装具体的请求方法: 四种请求类型不和下面的3和4标题内容放在一起
export const get = (url, params) => {return service .get(url, { params });
};export const post = (url, data) => {return service .post(url, data);
};export const put = (url, data) => {return service .put(url, data);
};export const delete= (url, data) => {return service .delete(url, data);
};export default service

(3)封装为函数:将 axios 封装到一个函数中,api.js

import service from '@/utils/request'
export function request(config) {return service(config)

(4)在代码中使用封装好的 axios 请求

5、配置Vite

Vite 配置代理 Proxy,解决跨域

// vite.config.jsimport { defineConfig } from "vite";
export default defineConfig({server: {proxy: {"/api": {target: "http://localhost:3001",changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ""),},},},
});

6、项目Element Plus 配置

安装使用Element Plus

npm install element-plus --save

(其他 )项目非必需

添加husky

husky 是一个 Git Hook 工具。主要实现提交前 eslint 校验和 commit 信息的规范校验,也可以避免多人合作时代码格式化不统一造成的冲突;

1.安装 husky,lint-staged

npm i -D husky lint-staged

2.在package.json中新增如下配置

{..."scripts": {...},"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"*.{js,json,md}": ["prettier --write","git add"]},"dependencies": {...},"devDependencies": {...},"engines": {"node": ">=8.9","npm": ">= 3.0.0"},"browserslist": ["> 1%","last 2 versions"]
}

持续更新中…

相关文章:

❤ Vue3 完整项目太白搭建 Vue3+Pinia+Vant3/ElementPlus+typerscript(一)yarn 版本控制 ltb (太白)

❤ 项目搭建 一、项目信息 Vue3 完整项目搭建 Vue3PiniaVant3/ElementPlustyperscript&#xff08;一&#xff09;yarn 版本控制 项目地址&#xff1a; 二、项目搭建 &#xff08;1&#xff09;创建项目 yarn create vite <ProjectName> --template vueyarn install …...

linux搭建SRS服务器

linux搭建SRS服务器 文章目录 linux搭建SRS服务器SRS说明实验说明搭建步骤推流步骤查看web端服务器拉流步骤final SRS说明 SRS&#xff08;simple Rtmp Server&#xff09;,是一个简单高效的实时视频服务器&#xff0c;支持RTMP/WebRTC/HLS/HTTP-FLV/SRT, 是国人自己开发的一款…...

系列六、Spring Security中的认证 授权 角色继承

一、Spring Security中的认证 & 授权 & 角色继承 1.1、概述 关于Spring Security中的授权&#xff0c;请参考【系列一、认证 & 授权】&#xff0c;这里不再赘述。 1.2、资源类 /*** Author : 一叶浮萍归大海* Date: 2024/1/11 20:58* Description: 测试资源*/ Re…...

云原生周刊:OpenTofu 宣布正式发布 | 2023.1.15

开源项目推荐 kubeaudit kubeaudit 是一个开源项目&#xff0c;旨在帮助用户对其 Kubernetes 集群进行常见安全控制的审计。该项目提供了工具和检查规则&#xff0c;可以帮助用户发现潜在的安全漏洞和配置问题。 Chronos Chronos 是一款综合性开发人员工具&#xff0c;可监…...

【如何在 GitHub上面找项目】【转载】

很多的小伙伴&#xff0c;经常会有这样的困惑&#xff0c;我看了很多技术的学习文档、书籍、甚至视频&#xff0c;我想动手实践&#xff0c;于是我打开了GitHub&#xff0c;想找个开源项目&#xff0c;进行学习&#xff0c;获取项目实战经验。这个时候很多小伙伴就会面临这样的…...

java每日一题——ATM系统编写(答案及编程思路)

前言&#xff1a; 基础语句学完&#xff0c;也可以编写一些像样的程序了&#xff0c;现在要做的是多加练习&#xff0c;巩固下知识点&#xff0c;打好基础&#xff0c;daydayup! 题目&#xff1a;模仿银行ATM系统&#xff0c;可以创建用户&#xff0c;存钱&#xff0c;转账&…...

《TrollStore巨魔商店》TrollStore2安装使用教程支持IOS14.0-16.6.1

TrollStore(巨魔商店) 简单的说就相当于一个永久的免费证书&#xff0c;它可以给你的iPhone和iPad安装任何你想要安装的App软件&#xff0c;而且不需要越狱,不用担心证书签名过期的问题&#xff0c;不需要个人签名和企业签名。 支持的版本&#xff1a; TrollStore安装和使用教…...

鸿鹄电子招投标系统源码实现与立项流程:基于Spring Boot、Mybatis、Redis和Layui的企业电子招采平台

随着企业的快速发展&#xff0c;招采管理逐渐成为企业运营中的重要环节。为了满足公司对内部招采管理提升的要求&#xff0c;建立一个公平、公开、公正的采购环境至关重要。在这个背景下&#xff0c;我们开发了一款电子招标采购软件&#xff0c;以最大限度地控制采购成本&#…...

力扣-三数之和

三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的三元组。…...

全罐喂养一个月多少钱?适合全罐喂养的猫罐头推荐

不少铲屎官一直没有办法get到猫罐头对猫咪的好处&#xff0c;或者get到了又觉得给猫咪买猫罐头好贵&#xff0c;看到其他铲屎官都开始全罐喂养了&#xff0c;但是自己却迟迟下不了手&#xff0c;犹犹豫豫的不知道全罐喂养一个月多少钱&#xff1f; 今天&#xff0c;铲龄15年的…...

js some方法的使用

JavaScript中的数组some()方法用于检查数组中是否至少有一个元素满足指定条件。该方法会遍历数组&#xff0c;并对每个元素应用指定的测试函数。如果有任何一个元素使得测试函数返回true&#xff0c;则some()方法返回true&#xff0c;否则返回false。 some()方法的语法如下&am…...

QT DAY5作业

1.QT基于TCP服务器端 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器类 #include <QMessageBox> //消息对话框类 #include <QTcpSocket> //客户端类 #include <QList> //链表容器类namespace …...

Hello 2024补题

Wallet Exchange&#xff08;Problem - A - Codeforces&#xff09; 题目大意&#xff1a;A&#xff0c;B做游戏&#xff0c;它们的钱包里各有a,b个硬币&#xff0c;轮到它们操作时&#xff0c;它们可以扔掉自己或者对手钱包里的硬币&#xff0c;谁不能操作谁输&#xff0c;问…...

git权限问题导致的所有文件被修改问题

git忽略文件权限的修改 git config core.filemode false...

C语言经典算法之堆排序算法

目录 前言 建议 简介 A.建堆&#xff1a; B.排序 一、代码实现 二、时空复杂度 A.时间复杂度 B.空间复杂度 三、稳定性 四、现实中的应用 前言 建议 1.学习算法最重要的是理解算法的每一步&#xff0c;而不是记住算法。 2.建议读者学习算法的时候&#xff0c;自己…...

前端笔试题(一)

1.vue如何实现数据的双向绑定 利用v-model来实现双向数据绑定 通过Object.defineProperty()来劫持各个属性的setter&#xff0c;getter&#xff0c;在数据变动时发布消息给订阅者&#xff0c;触发相应的监听回调来渲染视图 2.使用vue渲染大量数据时&#xff0c;如何进行优化…...

Springboot开发的大学生寝室考勤系统刷脸进出宿舍系统技术文档

宿舍出入系统 1.2采集学生人脸信息和宿管人脸信息 前端使用navigator.mediaDevices.getUserMedia&#xff08;考虑个浏览器的内核差异&#xff0c;此处以最新的标准API:navigator.mediaDevices.getUserMedia为例&#xff09;获取用户浏览器的摄像头并开启视频&#xff0c;使用…...

网络共享服务

存储类型&#xff1a;直连式&#xff08;DAS&#xff09;:距离最近&#xff0c;存储设备且直接连接到服务器上 存储区域网络&#xff08;SAN&#xff09;&#xff1a;适用于大型应用或数据库系统&#xff0c;可以使用文件的空间&#xff0c; 以及管理空间…...

资本主义的市场竞争?IBM总监Jerry Chow 谈量子计算的未来

​ 人物介绍&#xff1a;Jerry M.Chow博士在耶鲁大学取得物理博士学位。担任IBM量子系统总监&#xff0c;其研究重点是面向容错量子计算的多量子比特系统。他主要为IBM的量子系统路线图制定战略&#xff0c;与硬件团队领导者一起设定目标研究领域&#xff0c;同时也确保最佳的客…...

什么是残差矢量量化?

一、说明 基于残差矢量量化的神经音频压缩方法正在重塑现代音频编解码器的格局。在本指南中&#xff0c;了解 RVQ 背后的基本思想以及它如何增强神经压缩。 数据压缩在当今的数字世界中发挥着关键作用&#xff0c;促进信息的高效存储和传输。由于当今超过 80% 的互联网流量来自…...

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...