中小型VUE3项目创建流程相关命令tips

开新项目因为距离上次初始化时间太过久远,忘记初始化命令的有多少?
不得已简要记录一下流程

1. 使用vite构建新项目

1.1 构建

npm create vite@latest my-vue-app --template vue

1.2 安装依赖

npm install

1.3 启动

npm run dev

参考文档

2. 添加需要的插件

2.1 准备工作
2.1.1 修改/src/main.js,
const app = createApp(App)
app.mount('#app')
2.1.2 启用调试工具,添加@路径指示
安装
npm install vite-plugin-vue-devtools
npm install path
修改vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import path from 'path'export default defineConfig({plugins: [vue(),vueDevTools(),],resolve:{alias:{'@':path.resolve(__dirname,'src')}},
})

2.2 状态管理pinia

 npm install pinia

新建/src/stores/index.js,添加初始代码

import { defineStore } from "pinia";// 假设这是你的初始数据
const jsonData = {/* 你的初始数据 */
};export const mainStore = defineStore('main', {state: () => ({data: jsonData}),getters: 

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

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

相关文章

Web后端开发(请求、响应)

目录 请求: Postman: 简单参数: 实体参数: 数组集合参数: 日期参数: Json参数: 路径参数: 响应: 请求响应: 请求:获取请求数据 响应&a…

Excel大厂自动化报表实战(互联网金融-数据分析周报制作上)

这是Excel大厂自动化报表实战第二期--互联网金融-数据分析周报制作上 数据资源已经与这篇博客捆绑,有需要者可以下载通过网盘分享的文件:2.4自动化报表-8月成交数据.xlsx,2.4自动化报表-8月获客数据.csv等2个文件 链接: https://pan.baidu.co…

HTTP 网络协议演进过程

网络协议演进问题,涉及到HTTP版本之间的连接复用优化和协议升级(特别是从HTTP/2到HTTP/3)的核心变化。我们以 HTTP/1.0 到 HTTP/2.0,再到 HTTP/3.0 的演进顺序来详细解释它们在通道复用(TCP/QUIC)上的优化和…

Xsens动捕和Manus数据手套在元宇宙数字人制作中提供解决方案

硬件连接与数据传输 Xsens与Manus集成:Xsens惯性动作捕捉系统负责捕捉人体的身体动作,Manus数据手套专门精确捕捉手指动作。Xsens动捕套装上有接口或无线连接模块,可与Manus手套配对和传输数据,将身体与手指跟踪数据结合。 Face…

【Java开发日记】简单说一说使用 Netty 进行 Socket 编程

目录 什么是 Netty 对比Netty和传统的Socket 传统Socket编程服务端 传统Socket编程客户端 Netty环境搭建 先创建出来一个项目 Netty服务端程序 Netty客户端程序 Channel Channel分类 为什么选择Netty 什么是 Netty Netty是由JBOSS提供的一个java开源框架&#xff0c…

目标检测任务的评估指标mAP50和mAP50-95

mAP50 和 mAP50-95 是目标检测任务中常用的评估指标,用于衡量模型在不同 交并比(IoU)阈值 下的平均精度(Average Precision, AP)。它们的区别主要体现在 IoU 阈值范围 上。 ✅ 1. mAP50(mean Average Prec…

COHERENT XPRV23光电接收器控制软件

COHERENT XPRV23光电接收器控制软件

执行应用共享内存空间 同步QT进行快速捕获数据流

引言:本文章针对驱动的应用app,例如sensor data内容的获取,显示到QT的一种办法,共享内存。举例子,这是一个常见需求,比如摄像头采集进程与 GUI 显示进程分离,通过共享内存传输图像,避…

opencl的简单介绍以及c++实例

🧩 一、什么是 OpenCL? OpenCL(Open Computing Language) 是一个用于异构计算的开放标准,由 Khronos Group 提出和维护。它允许你在各种计算设备上(如 CPU、GPU、DSP、FPGA)并行运行代码&#…

ThingsCloud事物云平台搭建-微信小程序

ThingsCloud云平台与微信小程序设计 本文主要是介绍ThingsCloud云平台的搭建及微信小程序与app的使用。 当前文章是作为一个通用案例,介绍如何快速使用 ThingsCloud云平台 以及 利用 ThingsCloud云平台平台的框架快速设计手机APP和微信小程序。 可以快速让硬件接入,实现硬件…

2024 一带一路暨金砖国家职业技能大赛(金砖国家未来技能和技术挑战赛)

2024 一带一路暨金砖国家职业技能大赛(金砖国家未来技能和技术挑战赛任务书) 1 参加比赛的形式:2 项目阶段简介:3 项目阶段和所需时间:4 第一阶段:职业素养与理论技能4.1 项目 1.职业素养4.2 项目 2.法律法…

2025-06-13【api】阿里百炼api调用方法

通过调用各种大模型可以完成对文生文,文生图,图片理解,文生视频,音频识别,文转音频等需求。 #方法一 import os from openai import OpenAI# 初始化客户端 client OpenAI(api_keyos.getenv("DASHSCOPE_API_KEY&…

软件工程的软件生命周期通常分为以下主要阶段

软件工程的软件生命周期通常分为以下主要阶段: 可行性分析 :评估项目的技术、经济、操作和法律可行性,确定项目是否值得开发。需求分析 :明确用户需求,定义软件功能和非功能需求,形成需求规格说明书。系统…

Spring依赖注入的四种方式(面)

目录 1. 构造器注入 2. 字段注入 3. Setter注入 4. 方法注入 最佳实践建议 1. 构造器注入 Service public class UserService {private final UserRepository userRepository;Autowired // Spring 4.3 可以省略public UserService(UserRepository userRepository) {this.…

通信网络编程2.0——JAVA

一、传统阻塞式 I/O 模型 实现简易多人聊天系统&#xff1a;服务端与客户端 服务端 public class ChatServer {int port 6666;// 定义服务器端口号为 6666ServerSocket ss;// 定义一个 ServerSocket 对象用于监听客户端连接//List<Socket> clientSockets new ArrayL…

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …

Python打卡第51天

浙大疏锦行 作业&#xff1a; day43的时候我们安排大家对自己找的数据集用简单cnn训练&#xff0c;现在可以尝试下借助这几天的知识来实现精度的进一步提高 import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader from tor…

Notepad++ 官方下载

https://notepad-plus-plus.org/downloads/ 下载官网 1、https://github.com/notepad-plus-plus/notepad-plus-plus/releases 2、https://notepad-plus-plus.org/news/v881-we-are-with-ukraine/

运维之十个问题--2

目录 1. 如果有ip恶意刷流量怎么办 2. 标准端口范围 3.内存16G&#xff0c;交换分区多大 4.请简述非对称加密算法&#xff0c;ping命令通过什么协议实现&#xff0c;icmp是什么协议 5.客户访问网站速度慢原因 6. 进程和线程的区别 7.zabbix监控是你搭建的吗&#xff0c;平…

vue前端面试题——记录一次面试当中遇到的题(1)

1.v-if和v-show的区别 v-if和v-show都是Vue中用于条件渲染的指令&#xff0c;但它们的实现机制和适用场景有所不同&#xff1a; v-if是真正的条件渲染&#xff0c;在条件切换时会销毁和重建DOM元素&#xff0c;适合运行时条件变化不频繁的场景&#xff1b; v-show只是通过CS…