Vue3+TS+ElementPlus的安装和使用教程【详细讲解】

news2025/5/25 8:41:33

前言

本文简单的介绍一下vue3框架的搭建和有关vue3技术栈的使用。通过本文学习我们可以自己独立搭建一个简单项目和vue3的实战。

随着前端的日月更新，技术的不断迭代提高，如今新vue项目首选用vue3 + typescript + vite + pinia+……模式。以前我们通常使用Vue2时，使用的是选项式API进行vue项目的开发，当vue3的出现，组合式API进行对项目实例化和构建。另外需要注意vue项目需要nodeJS环境的支持，而vue3需要nodeJS的版本最低是node14.18版本，目前最新是node20的版本（奇数版本一般不用），所以在开发vue3项目之前首先需要安装对应的nodeJS环境。

一、安装Node.js

1- 官网上面我们找到node.js的安装： Node.js

在这里插入图片描述
在这里，我下载的是最新版20.10.0

如果要安装其他的版本，页面往下拉找到 Previous Releases 点击进入选择下载安装
在这里插入图片描述
在这里插入图片描述
下载完成后直接双击进行安装，一直Next下去就好，正常软件的安装就好了。【这里注意一下，安装完成node同时npm也会顺便帮我们给安装好的】

2- 接下来验证是否安装成功

在cmd控制台输入node -v和npm -v（注意中间有个空格）验证是否安装成功。

// 查看node安装的版本：
node -v

// 查看npm安装的版本：
npm -v

输出了对应的版本号就说明Node.js已经安装成功。

二、环境的配置

1- 找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】
在这里插入图片描述
2- 创建完毕后，必须使用管理员身份打开cmd命令窗口
在这里插入图片描述

输入①npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）

npm config set prefix "D:\develop\Node.js\node_global"

②npm config set cache “你的路径\node_cache” （复制你刚刚创建的“node_cache”文件夹路径）

npm config set cache "D:\develop\Node.js\node_cache"

2-配置环境变量
①【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】
② 在【系统变量】中点击【新建】
在这里插入图片描述
变量名：NODE_PATH

变量值：C:\Program Files\nodejs\node_global\node_modules
在这里插入图片描述
然后你就会发现【node_global】里多出了一个【node_modules】文件夹
在这里插入图片描述
注意点：【 如果输入变量值之后没有自动创建【node_modules】文件夹，就在【node_global】下手动创建一个【node_modules】文件夹，再复制你创建的【node_modules】文件夹的路径地址到变量值】

③编辑【用户变量】中的【Path】
在这里插入图片描述
④将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径，点击确定
在这里插入图片描述
⑤在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】，随后一直点击【确定】
在这里插入图片描述
在这里插入图片描述

三、测试是否安装成功

配置完成后，全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现如下界面代表安装成功！
在这里插入图片描述
为了更好的快速使用，我们这里还有安装淘宝镜像

①安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看是否成功：

npm config get registry

在这里插入图片描述

二、安装Vue

node我们按照上面的步骤安装好后，我们接下来开始真正的进行vue的安装和使用了。

1-安装 vue.js： npm install vue -g // -g为全局安装【注意：要以管理员身份运行cmd命令窗口！！】

在这里插入图片描述
2-安装webpack模板：npm install webpack -g

在这里插入图片描述

安装成功后使用【 webpack -v 】查看版本号

注意：如果出现以下情况，无法查看版本号，可以安装指定版本即可解决
在这里插入图片描述
3- 我们这里再进行指定安装对应的webpack的版本进行安装
【npm install -g webpack@5.75.0】

在这里插入图片描述

4- 安装@vue/cli： npm install -g @vue/cli
在这里插入图片描述
5- 输入： vue --version 查看版本号
在这里插入图片描述
6-安装vue-cli： npm install -g @vue/cli-init
在这里插入图片描述
7-安装vue-router： npm install vue-router -g
在这里插入图片描述

三、Vue3脚手架的搭建安装

我们上面已经把node和vue都已经安装好了，下面就可以进行真正的核心了，vue3脚手架的安装。【注意：vue版本需要在4.5.1版本之后，即可进行以下操作】

（1）使用命令 vue create vue3-elementplus-demo 创建Vue项目。
注意点：
这里我们选择自定义方式
在这里插入图片描述
Manually select features

配置如下：这里需要打钩的我们用空格键进行选中（取消），按回车下一步；
因为这里我们使用vue3+ts的所以这里都把需要都打钩：
勾选Babel、Router、Vuex、css预处理、eslint、Ts等

在这里插入图片描述
选择vue版本3.x
在这里插入图片描述
选择n，hash模式，然后选择less作为自己的项目预处理语言
在这里插入图片描述
选择eslint+Prettier作为eslint处理标准
在这里插入图片描述
选择Lint on save
在这里插入图片描述
选择config files 以配置文件的形式，方便配置
在这里插入图片描述
都选择完毕后，回车，项目即可创建完毕，使用VsCode或者按照提示进入和启动项目

vue3这里的node-modules会自动帮我们生成
在这里插入图片描述
接下来我们来运行项目

先把路径改到刚刚创建的项目，然后再运行，语句如下

npm run serve

在这里插入图片描述

到此为止，我们的vue3安装配置已经完成了。打开具体页面如下：
在这里插入图片描述

四、实战操作

1- 这里没有用到的文件可以删除掉，我们删除修改后效果如下：
在这里插入图片描述

在这里插入图片描述
2- 为了方便我们在写代码方便，我们这里加了初始化样式。新建css/resset.css文件，并且在idnex.html里面引入。

resset.css如下：

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video{
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   font-weight: normal;
   vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section{
   display: block;
 }
 ol, ul, li{
   list-style: none;
 }
 blockquote, q{
   quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after{
   content: '';
   content: none;
 }
 table{
   border-collapse: collapse;
   border-spacing: 0;
 }
  
 /* custom */
 a{
   color: #7e8c8d;
   text-decoration: none;
   -webkit-backface-visibility: hidden;
 }
 ::-webkit-scrollbar{
   width: 5px;
   height: 5px;
 }
 ::-webkit-scrollbar-track-piece{
   background-color: rgba(0, 0, 0, 0.2);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:vertical{
   height: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 ::-webkit-scrollbar-thumb:horizontal{
   width: 5px;
   background-color: rgba(125, 125, 125, 0.7);
   -webkit-border-radius: 6px;
 }
 html, body{
   width: 100%;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
 }
 body{
   line-height: 1;
   -webkit-text-size-adjust: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 html{
   overflow-y: scroll;
 }
  
 /*清除浮动*/
 .clearfix:before,
 .clearfix:after{
   content: " ";
   display: inline-block;
   height: 0;
   clear: both;
   visibility: hidden;
 }
 .clearfix{
   *zoom: 1;
 }
  
 /*隐藏*/
 .dn{
   display: none;
 }

在这里插入图片描述
3- 引入我们需要的插件ElementPlus

(1）下载element-plus包：

npm i element-plus

（2）在main.ts中引入

在这里插入图片描述

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

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

相关文章

git 管理vivado工程， tcl 恢复vivado工程

git 管理vivado工程， tcl 恢复vivado工程

使用Git进行Vivado版本控制 english youtube 如果不是上边目录结果 ， 参考上边目录结构 ，重新建一个工程； 在目录work下产生proj.tcl 修改proj.tcl 主要删除bd wrapper相关的部分； # Import local files from the original project set files [list \[file normalize…
阅读更多...
【嵌入式】About USB Powering

【嵌入式】About USB Powering

https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/ Type-C接口有多强？PD协议又是什么？-电子发烧友网由于Type-C接口自身的强…
阅读更多...
详细分析MybatisPlus中的orderBy、orderByDesc、orderByAsc函数

详细分析MybatisPlus中的orderBy、orderByDesc、orderByAsc函数

目录 前言1. 概念2. API示例3. 实战 前言 实战中学习并进行补充该类的源码以及应用 1. 概念 在 MyBatis-Plus 中，orderBy、orderByDesc 和 orderByAsc 是用于构建 SQL 查询语句中的 ORDER BY 子句的方法。 这些方法都是通过 QueryWrapper 类的实例来调用的&…
阅读更多...
提升代码托管，助力大数据学习！Git学习网站等你来挑战！

提升代码托管，助力大数据学习！Git学习网站等你来挑战！

介绍：Git是一个开源的分布式版本控制系统，可以高效地处理各种规模项目的版本管理。它是Linus Torvalds为了帮助管理Linux内核开发而开发的开放源码版本控制软件。在Git中，你可以掌握工作区、暂存区和版本库等核心概念，并学会使用常…
阅读更多...
SV-7042VP 15W sip网络有源音箱,可外接15W无源副音箱

SV-7042VP 15W sip网络有源音箱,可外接15W无源副音箱

SV-7042VP 15W sip网络有源音箱,可外接15W无源副音箱 一、描述 SV-7042VP是深圳锐科达电子有限公司的一款壁挂式SIP网络有源音箱，具有10/100M以太网接口，可将网络音源通过自带的功放和喇叭输出播放，可达到功率15W。同时它可以外接一个15W的…
阅读更多...
VSCode上远程调试代码出现的问题

VSCode上远程调试代码出现的问题

记录一下： 真的是汗流浃背了，师妹叫帮忙如何在VSCode上远程调试代码，一些自己已经经历过的问题，现在已经忘记了。又在网上一顿搜索，这次记录下吧。。。 出现以下问题： 1. 终端界面总是sh-4.4 $ &#xff…
阅读更多...
【自动化测试】转行人员在面试中被问及计算机基础知识该怎么办？？？？？（长文，预计三小时阅读）

【自动化测试】转行人员在面试中被问及计算机基础知识该怎么办？？？？？（长文，预计三小时阅读）

看前提示，本文共4W字，76道题（附答案） 全部看完预计三个小时，如果觉得时间长，可以直接跳转到文末，有本文的word版提供下载 近些年软件测试岗位从转行的来人越来越多，占比高达44% 软件…
阅读更多...
OPENGL,GPU图形库Skia在Windows下编译多种VS版本的DLL

OPENGL,GPU图形库Skia在Windows下编译多种VS版本的DLL

这几天刚改了改Duilib，之前为了让Duilib更好的支持透明异形窗体所以把Duilib改为Gdi和Gdi的双渲染引擎。于是想到了有时间就把渲染引擎完全独立为渲染接口，可以增加更多的渲染引擎。现在来说Skia是个很不错的渲染，之前我只是单独编译了VS2013…
阅读更多...
论文查重降重写成大白话可以吗

论文查重降重写成大白话可以吗

大家好，今天来聊聊论文查重降重写成大白话可以吗，希望能给大家提供一点参考。 以下是针对论文重复率高的情况，提供一些修改建议和技巧，可以借助此类工具： 论文查重降重：用大白话解析 一、引言 写论文是每个…
阅读更多...
软件测试基础理论学习-常见软件开发模型

软件测试基础理论学习-常见软件开发模型

瀑布模型 背景 瀑布模型的概念最早在1970年由软件工程师Winston W. Royce在其论文《Managing the Development of Large Software Systems》中提出。Royce虽然没有明确提出“瀑布模型”这个术语，但他描述了一种线性的、阶段性的开发流程，各个阶段之间具…
阅读更多...
小迪安全第一天

小迪安全第一天

一、常用的专业术语 参考： https://www.cnblogs.com/sunny11/p/13583083.html POC（proof of concept）验证漏洞的代码EXP(exploit) 利用对一段漏洞代码的利用Playload:有效载荷，当利用exploit成功后如何通过一个管道把这个权限给…
阅读更多...
集群渲染是？渲染农场是？两者与云渲染关联是什么

集群渲染是？渲染农场是？两者与云渲染关联是什么

在数字化浪潮不断推进的当下，渲染技术在多个行业中发挥着至关重要的作用，尤其体现在电影制作、建筑可视化以及电子游戏开发等领域。在众多渲染技术中，集群渲染、渲染农场以及云渲染特别受到业界的重视。本文旨在阐述这些概念的含义以及它们之…
阅读更多...
蛇目标检测数据集VOC格式750张

蛇目标检测数据集VOC格式750张

蛇，一种令人着迷而又神秘的爬行动物，以其独特的外貌和习性，成为了自然界中的一道独特风景。 蛇的外观光滑细长，身体呈流线型，鳞片覆盖全身，使得它们能够在地面上或树枝间快速移动。大多数蛇拥有尖锐的毒牙…
阅读更多...
小目标识别任务算法

小目标识别任务算法

小目标识别是计算机视觉领域中的一个挑战性任务，主要是指在图像或视频中检测和识别尺寸相对较小的目标。 以下是一些常见的小目标识别算法： Faster R-CNN： Faster R-CNN是一种基于深度学习的目标检测算法，通过引入区域建议网络&am…
阅读更多...
算法导论复习——CHP22 基本图算法

算法导论复习——CHP22 基本图算法

图的表示 邻接矩阵和邻接表 稀疏图一般用邻接表表示（稀疏图：边数|E|远小于的图 ） 稠密图更倾向于用邻接矩阵表示 (稠密图：边数|E|接近的图) 邻接矩阵可用于需要快速判断任意两个结点之间是否有边相连的应用场景。 如果用邻…
阅读更多...
VSCode远程连接centos

VSCode远程连接centos

1 下载remote -ssh插件 2 在上方打开命令面板，输入>,再输入ssh，选择设置 Remote-SSH:Settings 那行 3 勾选下面这个选项 4 点击加号旁边的那个齿轮，选择.ssh\config ,配置连接信息，保存好后，刷新。 4 连接centos,然…
阅读更多...
springBoot2.3-简单了解依赖管理、自动配置

springBoot2.3-简单了解依赖管理、自动配置

一、自动依赖管理 基本介绍：springBoot提前帮我们写好了极多的依赖及版本号，当然我们也可以自定义依赖项与版本号。 1.1 简单介绍 1、在入门案例中，springBoot的maven中引入了parent父工程 2、ctrl 左键 parent， 发现里边还有…
阅读更多...
图像融合算法

图像融合算法

图像融合是将两个或多个图像或图像的特定部分合并在一起的过程。这可以通过各种图像融合算法来实现，这些算法可以用于不同的应用，如图像编辑、计算机视觉和医学图像处理。以下是一些常见的图像融合算法： 透明度融合（Alpha Blendi…
阅读更多...
智能洗地机哪款最好用?智能洗地机推荐

智能洗地机哪款最好用?智能洗地机推荐

洗地机是一种非常实用的家居清洁设备，可以有效地清理地面上的污垢和灰尘，给人们的生活带来了极大的便利性。那么洗地机哪个牌子最好用呢?市场上出现了越来越多的洗地机品牌，究竟哪一款智能洗地机更好用呢?本文将为大家简单介绍一下! 在选择…
阅读更多...
这份江苏“最牛”医院和科室名单，我们核实过了

这份江苏“最牛”医院和科室名单，我们核实过了

这份榜单不仅评出了全国100家最具科技影响力医院 还公布了25个医院学科影响力排行 那么，江苏哪些医院和科室入榜了呢？ ▲戳大图更清晰 具体到学科排名 是这样的 心血管病 ▲戳大图更清晰 呼吸病学 ▲戳大图更清晰 消化病学 ▲戳大图更清晰 血液病…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023