使用vscode 创建vue3.0项目,应用element-plus框架

news2025/1/17 1:14:46

使用npm指令创建项目

npm init vite-app 项目名称
npm install
npm run dev

在这里插入图片描述

输入http://localhost:3000/ 查看
在这里插入图片描述

2、可自定义vue模板
在这里插入图片描述

输入vue.json 回车。复制下述代码,然后保存。

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $0 -->",
            "<template>",
            "  <div></div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  data () {",
            "    return {",
            "    };",
            "  },",
            "",
            "}",
            "</script>",
            "<style  scoped>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

在vue文件中,输入vue,点击回车即可新建vue模板。

3、配置路由依赖

执行下面指令即完成路由的安装。

npm install vue-router -s

4、安装axios

执行下面指令即完成路由的安装。

npm install axios -s

5、安装element-plus

执行下面指令即完成路由的安装。
vue3使用的elementui名称为element-plus:一个 Vue 3 UI 框架 | Element Plus

npm install element-plus -s
 
npm install @element-plus/icons -s

在这里插入图片描述
vs code 打开项目,就可以应用Element Plus框架的标签啦
在这里插入图片描述

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

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

相关文章

每天一道算法练习题--Day15 第一章 --算法专题 --- -----------二叉树的遍历

概述 二叉树作为一个基础的数据结构&#xff0c;遍历算法作为一个基础的算法&#xff0c;两者结合当然是经典的组合了。很多题目都会有 ta 的身影&#xff0c;有直接问二叉树的遍历的&#xff0c;有间接问的。比如要你找到树中满足条件的节点&#xff0c;就是间接考察树的遍历…

STM32物联网实战开发(3)——串口打印

串口打印 串口的使用在单片机开发过程中经常出现&#xff0c;因为他在显示数据和调试过程中特别的方便&#xff0c;使用起来也很简单。 1.用STM32CubeMx配置串口 串口1模式选择异步&#xff0c;不开启硬件控制流&#xff08;串口通信分为同步通信和异步通信&#xff0c;他们往…

云HIS : 电子病历模板制作过程技术经验分享

电子病历的制作就是按照医院机构的特色&#xff0c;根据不同业务需求&#xff0c;使用模板编辑与预览工具&#xff0c; 综合运用工具模块制作个性化、实用化、特色化电子病历模板的过程。 按照制作流程分为以下几个步骤&#xff1a; 1.明确病历类型&#xff1a;根据业务方向…

掌握好这几款TikTok数据分析工具,让你轻松提高曝光率!

为什么别人在TikTok发的普普通通的视频却有那么高的流量、几天内疯狂涨粉&#xff0c;而自己想破脑袋装饰自己的视频&#xff0c;结果却不如人意。 其实原因很简单&#xff0c;TikTok不像国内的抖音只面向中华民族&#xff0c;而是覆盖了150多个国家和75种语言用户&#xff0c…

【五一创作】Scratch资料袋

Scratch软件是免费的、免费的、免费的。任何需要花钱才能下载Scratch软件的全是骗子。 1、什么是Scratch Scratch是麻省理工学院的“终身幼儿园团队”开发的一种图形化编程工具。是面向青少年的一款模块化&#xff0c;积木化、可视化的编程语言。 什么是模块化、积木化&…

【VM服务管家】VM4.x算子SDK开发_3.1 环境配置类

目录 3.1.1 环境配置&#xff1a;CSharp算子SDK开发环境配置方法3.1.2 算子封装&#xff1a;使用C封装算子SDK的方法3.1.3 异常中断&#xff1a;算子SDK软件运行报错“托管调试助手”中断的解决方法3.1.4 深度学习&#xff1a;GPU运行深度学习算子引发StackOverFlow异常的方法 …

FP独立站推广成本太高?那是因为你没看到这篇!

近年来&#xff0c;越来越多的商家开始搭建自己的跨境电商独立站&#xff0c;做起了FP独立站。那么用独立站做FP到底有什么优势&#xff1f;还有&#xff0c;推广成本真的很高吗&#xff1f;今天这期就给大家扒一扒。 用独立站做FP的优势 1、塑造品牌&#xff0c;扩大经营触及…

【HarmonyOS】元服务WebView组件 H5使用localstorage

在日常开发中我们会在应用种接入H5网页&#xff0c;localStorage作为H5本地存储web storage特性的API之一&#xff0c;主要作用是将数据保存在客户端中。对于快速开发元服务&#xff0c;通过WebView组件运行H5如何使用localstorage呢&#xff1f;下文以API7 JavaUI为例为大家做…

k8s 集群搭建详细教程

参考&#xff1a; Kubernetes 文档 / 入门 / 生产环境 / 使用部署工具安装 Kubernetes / 使用 kubeadm 引导集群 / 安装 kubeadm B. 准备开始 一台兼容的 Linux 主机。Kubernetes 项目为基于 Debian 和 Red Hat 的 Linux 发行版以及一些不提供包管理器的发行版提供通用的指令每…

3.3 Linux shell命令(权限、输入输出)

目录 shell shell概述 shell分类 查看当前系统的shell 权限相关命令&#xff08;也是shell命令&#xff09; 基本命令 输入输出相关操作 输出命令 输入输出重定向 通配符 管道 历史查询、补齐功能 历史查询 自动补齐 命令置换 shell 什么是shell shell是一种负…

【VM服务管家】VM4.0软件使用_1.2 工具类

目录 1.2.1 文本保存&#xff1a;逐行保存格式化模块输出的方法1.2.2 脚本模块&#xff1a;循环模块搭配脚本使用的方法1.2.3 几何查找&#xff1a;彩色图像的几何查找方法1.2.4 深度学习&#xff1a;图像分割的面积的获取方法1.2.5 颜色识别&#xff1a;使用颜色识别工具做分类…

【Leetcode -86.分隔链表 -92.反转链表Ⅱ】

Leetcode Leetcode -86.分隔链表Leetcode -92.反转链表Ⅱ Leetcode -86.分隔链表 题目&#xff1a;给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每…

java数据结构之HashMap

目录 前言 1、初始化 1.1、初始化 1.2、插入第一条数据 2、数组 链表 2.1、插入数据&#xff1a;没有hash冲突 2.2、插入数据&#xff1a;Key不同&#xff0c;但产生hash冲突 2.3、插入数据&#xff1a;Key相同 3、数组 红黑树 3.1、链表如何转化为红黑树&#xff1f; 3.…

Postman测试实践笔记

Postman测试实践 文章目录 Postman测试实践一、Postman安装与使用1.1 Postman下载及安装1.1.2 Postman Mac版 1.2 Postman 更新1.2.1 mac 版更新 1.3 Postman 其他问题 二、网络相关知识2.1 接口2.1.1 软件为什么需要接口 2.2 接口测试2.2.1 什么是接口测试&#xff1a;2.2.2 为…

VTK下载并安装

去官网下载https://vtk.org/download/ 选择最新稳定版本 然后点击source后边的压缩包进行下载。 下载完成后将其解压到特定的文件夹下&#xff0c;然后打开cmake-gui.exe&#xff0c;第一行选择刚刚解压的文件夹&#xff0c;这个文件夹下有一个CMakeLists.txt文件&#xff0c…

【6. 激光雷达接入ROS】

欢迎大家阅读2345VOR的博客【6. 激光雷达接入ROS】&#x1f973;&#x1f973;&#x1f973; 2345VOR鹏鹏主页&#xff1a; 已获得CSDN《嵌入式领域优质创作者》称号&#x1f47b;&#x1f47b;&#x1f47b;&#xff0c;座右铭&#xff1a;脚踏实地&#xff0c;仰望星空&#…

Go | 一分钟掌握Go | 8 - 并发

作者&#xff1a;Mars酱 声明&#xff1a;本文章由Mars酱编写&#xff0c;部分内容来源于网络&#xff0c;如有疑问请联系本人。 转载&#xff1a;欢迎转载&#xff0c;转载前先请联系我&#xff01; 前言 当今编程界&#xff0c;一个好的编译型语言如果不支持并发&#xff0c…

工控老司机告诉你热电偶和RTD的区别

热电偶和热电阻都是温度传感器&#xff0c;但它们的原理、功能特性和应用场景有所不同。 一、原理区别 首先&#xff0c;热电偶是利用两种不同金属之间的热电效应来测量温度的。其原理是利用温度差引起的金属之间的热电势差进行测量。两种金属之间存在一种热电势&#xff08;…

Yolov8优化:卷积变体---分布移位卷积(DSConv),提高卷积层的内存效率和速度

论文: https://arxiv.org/pdf/1901.01928v1.pdf 摘要:提出了一种卷积的变体,称为DSConv(分布偏移卷积),其可以容易地替换进标准神经网络体系结构并且实现较低的存储器使用和较高的计算速度。 DSConv将传统的卷积内核分解为两个组件:可变量化内核(VQK)和分布偏移。 通过…

双亲委派机制的原理和作用

双亲委派机制&#xff0c;就必须弄清楚Java的类加载器。 什么是类加载器 Java类加载器(ClassLoader)是Java运行时环境(JRE)的一部分&#xff0c;负责动态的将Java类加载到Java虚拟机的内存空间。 类加载器有哪些 主要有三个&#xff1a; 引导类加载器(Bootstrap ClassLoade…