(vue3)基于vite+vue3+element-plus项目创建

(vue3)基于vite+vue3+element-plus项目创建


vue.js官方中文文档:https://cn.vuejs.org/guide/quick-start.html

vite官方中文文档:https://cn.vitejs.dev/guide/

element-plus官网:https://element-plus.org/zh-CN/guide/installation.html


第一步 (升级node.js版本到18版本以上)

在这里插入图片描述


第二步(创建项目)

方法1 命令行(与方法2实际是一样的,区别是选了typeScript)

  • 遇到问题:git bash窗口创建vue项目, 箭头切换没起作用

  • 解决参考:https://www.cnblogs.com/big–Bear/p/17118724.html
      方法1.在VSCode编辑器里创建
      方法2.使用winpty 命令 + .cmd,如:winpty npm.cmd create vite@latest

    在这里插入图片描述
    项目:
    在这里插入图片描述


效果:

在这里插入图片描述


方法2 vite官网中

  • 命令创建:npm create vite@latest my-vue-app – --template vue

    在这里插入图片描述


  • 项目
    在这里插入图片描述

  • 效果:
    在这里插入图片描述

  • 引入element-plus:npm install element-plus --save

    完整引入

    // main.ts或main.js中
    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')
    

方法3 用element-plus官网中的项目模板 https://element-plus.org/zh-CN/guide/quickstart.html


在这里插入图片描述


  • 项目:
    在这里插入图片描述

  • 效果: 在这里插入图片描述

不基于vite的创建

  • 命令:vue create vue3-project 在这里插入图片描述

  • 启动:
    在这里插入图片描述

  • 项目:
    在这里插入图片描述

  • 效果:
    在这里插入图片描述

学习参考:

《从零开始搭建Vue3.0项目入门篇》:https://blog.csdn.net/yang651158/article/details/127048187?spm=1001.2014.3001.5502

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

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

相关文章

为什么按照正确的顺序就能开始不断地解决问题,按照不正确的顺序,问题就没有办法能够得到解决呢?

按照正确的顺序解决问题与按照不正确的顺序可能导致问题无法解决,这背后有几个关键原因: 1. **逻辑性**: 正确的顺序通常遵循逻辑性和因果关系(因为得按照这个基础的逻辑性才能够是自己顺应规律,太阳没有办法能够从西…

经典机器学习方法(7)—— 卷积神经网络CNN

参考:《动手学深度学习》第六章 卷积神经网络(convolutional neural network,CNN)是一类针对图像数据设计的神经网络,它充分利用了图像数据的特点,具有适合图像特征提取的归纳偏置,因而在图像相…

ARM64常见指令

### 📌 栈操作和函数框架设置 .text:00000000000038D0 SUB SP, SP, #0x30 **SUB SP, SP, #0x30**: 为本地变量在堆栈上分配48字节的空间(0x30字节)。 .text:00000000000038D4 STP …

show/hide信号演示

代码&#xff1a; #include <gtk-2.0/gtk/gtk.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <glib-2.0/glib.h> #include <stdio.h>gint delete_event(GtkWidget *window, GdkEvent *event, gpointer data) {gtk_widget_hide(window);return TRU…

SpringBoot + Vue 实现 AES 加密和 AES 工具类总结

目录 一、加密知识回顾 AES加密模式 二、Java 自定义 AES 工具类 三、SpringBoot 实现 AES 加密登陆 controller 层 server 层 四、Vue 实现 AES 加密登陆 五、前端AES工具类 六、实现结果 一、加密知识回顾 密钥是AES算法实现加密和解密的根本。对称加密算法之所以…

基于MATLAB仿真LFM线性调频信号

基于MATLAB仿真LFM线性调频信号 目录 前言 一、LFM信号简介 二、LFM信号基本原理 三、LFM信号仿真 四、代码 总结 前言 仿真中的接收信号&#xff0c;有时为了简单会直接用一个正弦波代替&#xff0c;但实际中接收到的信号极少是点频信号&#xff0c;一般都是PSK信号、OF…

MySQL事务、数据库的存储引擎

目录 1. 事务的概念 1.1事务的 ACID 2. 存储引擎 2.1 存储引擎 2.2 常用存储引擎 3.MyISAM 3.1 MyISAM 表支持 3 种不同的存储格式​编辑 3.2 适用的生产场景 4. InnoDB 4.1 InnoDB特点 4.2 适用生产场景分析 5. MyISAM 和 InnoDB 的区别 6. 命令操作 7. 死锁 7.…

EasyExcel 导出批注信息

1. 批注信息 package com.xxx.demo;import lombok.Getter;/*** This class represents the comment information associated with a specific cell in an Excel sheet.* The columnIndex field specifies the column number of the cell, and the comment field stores the te…

计算机系统基础实训八—ProxyLab实验

实验目的与要求 1、让学生应用套接字接口实现网络编程&#xff1b; 2、让学生理解Web服务器开发的相关知识&#xff1b; 3、让学生应用并发编程技术进行并发服务器的开发&#xff1b; 实验原理与内容 Web代理是一种在Web浏览器和终端服务器之间充当中介角色的程序。在Web代…

java-正则表达式 1

Java中的正则表达式 1. 正则表达式的基本概念 正则表达式&#xff08;Regular Expression, regex&#xff09;是一种用于匹配字符串中字符组合的模式。正则表达式广泛应用于字符串搜索、替换和解析。Java通过java.util.regex包提供了对正则表达式的支持&#xff0c;该包包含两…

使用Vue实现Excel文件的导入与导出

在现代Web应用中&#xff0c;数据的导入与导出是常见的需求之一。本文将介绍如何在Vue项目中实现Excel文件的导入与导出功能。我们将使用流行的xlsx库来处理Excel文件&#xff0c;并结合file-saver库来实现文件的保存。此外&#xff0c;还会展示如何使用Element UI实现文件上传…

堆排序的实现原理

一、什么是堆排序&#xff1f; 堆排序就是将待排序元素以一种特定树的结构组合在一起&#xff0c;这种结构被称为堆。 堆又分为大根堆和小根堆&#xff0c;所谓大根堆即为所有的父节点均大于子节点&#xff0c;但兄弟节点之间却没有什么严格的限制&#xff0c;小根堆恰恰相反&a…

Spring注解-@RestControllerAdvice

Spring注解-RestControllerAdvice RestControllerAdvice注解是什么 RestControllerAdvice是一个组合注解,由ControllerAdvice、ResponseBody组成。而ControllerAdvice又是由Component组合。使用RestControllerAdvice可用自定义一个异常处理类。一般配合ExceptionHandler、Init…

高通安卓12-在源码中查找应用的方法

1.通过搜索命令查找app 一般情况下&#xff0c;UI上看到的APP名称会在xml文件里面定义出来&#xff0c;如 搜索名字为WiGig的一个APP 执行命令 sgrep "WiGig" 2>&1|tee 1.log 将所有的搜索到的内容打印到log里面 Log里面会有一段内容 在它的前面是这段内…

Stable Diffusion部署教程,开启你的AI绘图之路

本文环境 系统&#xff1a;Ubuntu 20.04 64位 内存&#xff1a;32G 环境安装 2.1 安装GPU驱动 在英伟达官网根据显卡型号、操作系统、CUDA等查询驱动版本。官网查询链接https://www.nvidia.com/Download/index.aspx?langen-us 注意这里的CUDA版本&#xff0c;如未安装CUD…

CSS动画(动态导航栏)

1.项目简介 一个具有创意的导航菜单不仅能为你的大作业增色&#xff0c;还能展示你的技术实力。本文将分享一系列常用于期末大作业的CSS动画导航效果&#xff0c;这些效果不仅外观酷炫&#xff0c;而且易于实现。我们提供了一键复制的代码&#xff0c;让你能够快速集成到自己的…

掌握ChatGPT:提示工程入门详解

随着人工智能的发展&#xff0c;提示工程成为了使用ChatGPT等语言模型的核心技术。对于初学者&#xff0c;理解和运用提示工程是提高与ChatGPT互动效果的关键。 什么是提示工程&#xff1f; 提示工程是通过设计和优化输入文本&#xff08;提示&#xff09;来引导AI生成特定输出…

破碎的像素地牢探险:游戏分享

软件介绍 《破碎的像素地牢》是开源一款地牢冒险探索类的游戏&#xff0c;融合了日系RPG经典风格&#xff0c;玩家将控制主角进行未知场景的探索。除了经典地牢玩法外&#xff0c;游戏还添加了更多创意内容&#xff0c;如黑屏状态前的挑战性等&#xff0c;使得游戏更加富有挑战…

Vue78-缓存路由组件

一、需求 路由切走的时候&#xff0c;组件会被销毁&#xff0c;路由切回来&#xff0c;组件被挂载&#xff01; 需要&#xff1a;路由切走的时候&#xff0c;组件不会被销毁。 二、代码实现 若是不加include属性&#xff0c;则在<router-view>里面展示的路由&#xff0c…

ubuntu20.04安装配置openMVG+openMVS

安装 主要跟着官方教程逐步安装 openMVG https://github.com/openMVG/openMVG/blob/master/BUILD.md openMVS https://github.com/cdcseacave/openMVS/wiki/Building 注意事项 1. 库版本要求 使用版本&#xff1a; openMVS 2.2.0 openMVG Eigen 3.4.0 OpenCV 4.6.0 Ce…