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

前言

本文简单的介绍一下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.mzph.cn/news/593538.shtml

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

相关文章

webpack知识点总结（高级应用篇）

webpack知识点总结（高级应用篇）

除开公共基础配置之外，我们意识到两点: 1. 开发环境(modedevelopment),追求强大的开发功能和效率，配置各种方便开 发的功能;2. 生产环境(modeproduction),追求更小更轻量的bundle(即打包产物); 而所谓高级应用，实际上就是进行 Webpack 优化…
阅读更多...
计算机组成原理-期末复习

计算机组成原理-期末复习

目录 第一章——计算机系统概述 一、数字计算机的主要组成结构 二、指令的形式 三、控制器的基本任务 四、指令流和数据流 五、适配器与输入/输出设备 七、计算机的系统软件 八、C 语言的转换层次图 九、计算机系统的层次结构图 第二章——运算方法和运算器 一、 数据格式…
阅读更多...
javascript之跳转页面的几种方法?

javascript之跳转页面的几种方法?

文章目录 前言代码演示及解释使用location.href属性使用location.assign()方法使用location.replace()方法使用window.open()方法使用document.URL方法 总结 前言 本章学习的是JavaScript中的跳转页面的几种方法 代码演示及解释 使用location.href属性 可以直接将一个新的URL…
阅读更多...
企业如何做好客户管理？有哪些关键因素？

企业如何做好客户管理？有哪些关键因素？

客户管理是建立和维护客户关系的重要组成部分，对于企业的发展至关重要。下面就让我们来看看在做好客户管理时有哪些关键因素吧。 第一个关键因素是提供优质的客户服务。无论是线上还是线下，当客户需要帮助时，他们希望能够得到有效且及时的支持…
阅读更多...
sqlserver根据分组的内容分别查询出匹配的一条信息

sqlserver根据分组的内容分别查询出匹配的一条信息

需求场景： 我写了条分组语句， select name from car_machine_command group by name 然后该表有很多条相关的数据，我只想拿各个分组的一条数据看看即可 解决：可以使用窗口函数（Window Function）和 ROW_NU…
阅读更多...
Dora-rs 机器人框架学习教程（1）—— Dora-rs安装

Dora-rs 机器人框架学习教程（1）—— Dora-rs安装

1、dora简介 Dora-rs[1] 是一个基于 Rust 实现的化机器人框架，其具有极高的实时性能。Dora-rs使用Rust语言做数据流的传输和调度管理，可以大大减少了数据的重复拷贝和传输。它提供了Rust语言和Python语言之间的无缝集成，减少了跨语言的性能代…
阅读更多...
阿里云服务器Valheim端口2456、2457和2458放行设置

阿里云服务器Valheim端口2456、2457和2458放行设置

使用阿里云服务器搭建Valheim英灵神殿需要开启2456-2458端口，阿里云服务器默认只开放了22核3389端口，开通2456端口是在安全组中配置的，阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器安全组开通端口流程： 阿里云服务器安…
阅读更多...
中国供应链，出海大时代

中国供应链，出海大时代

尽量优化、打通跨境电商每一个参与方的物流、商流、信息流、资金流是电商供应链出海的解题之法。这个过程中数智化便是打通这些节点的钥匙。 作者|斗斗 编辑|皮爷 出品|产业家 “速卖通加持，阿里国际零售商业收入同比上涨73%”“拼多多发布Q3财报同比增长94%…
阅读更多...
基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于java的SSM框架实现中国古诗词学习平台系统演示 JSP技术介绍 JSP技术本身是一种脚本语言，但它的功能是十分强大的，因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时，它可以使显示逻辑和内容分开，这就极大的方便了用…
阅读更多...
Sam Altman的一天被曝光！每天15小时禁食、服用小剂量安眠药，尽可能避免开会

Sam Altman的一天被曝光！每天15小时禁食、服用小剂量安眠药，尽可能避免开会

Sam Altman在经历了几天混乱的管理重组后，重新回到了OpenAI的CEO位置。在日常生活中，奥特曼与许多科技行业高管一样，痴迷于延长自己的寿命。 据报道，他还为应对末日场景（致命合成病毒的释放、核战争和人工智能攻击等&…
阅读更多...
P59 生成式对抗网络GAN-理论介绍 Theory behind GAN

P59 生成式对抗网络GAN-理论介绍 Theory behind GAN

Object Normal Distribution 的数据 经过 Generator 后生成分布更加复杂的PG. 真实数据的分布为 Pdata ， 希望 PG和Pdata 越近越好 LOSS 是 两者之间的分布距离 问题： 如何计算 divergence? Sampling is goog enough Discriminator 希望V越大越好 y~Pdata 代表从 Pdata里…
阅读更多...
Vue3 watch 的使用，如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用，如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用&#xff0c;如何监听一个对象中的属性值的变化 由 vue2 转到 vue3 ts vite 之后都不会写这些玩意了。搜了下&#xff0c;找到了答案&#xff1a; vue2 的 watch <script>export default {watch: {$route.query.id(newValue){// 可以这样监听路由的…
阅读更多...
vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条

vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条

需求&#xff1a; 实现可拐弯的步骤条功能 实现后效果如下&#xff1a; 代码部分&#xff1a; 创建步骤条组件Steps.vue <template><div><divstyle"width: 100%; display: flex; position: relative; margin-top: 20px"><div style"wi…
阅读更多...
为什么大学c语言课不顺便教一下Linux，Makefile

为什么大学c语言课不顺便教一下Linux，Makefile

为什么大学c语言课不顺便教一下Linux&#xff0c;Makefile&#xff0c;git&#xff0c;gdb等配套工具链呢? 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…
阅读更多...
五、Spring AOP面向切面编程（基于注解方式实现和细节）

五、Spring AOP面向切面编程（基于注解方式实现和细节）

本章概要 Spring AOP底层技术组成初步实现获取通知细节信息切点表达式语法重用&#xff08;提取&#xff09;切点表达式环绕通知切面优先级设置CGLib动态代理生效注解实现小结 5.5.1 Spring AOP 底层技术组成 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;…
阅读更多...
RocketMQ5.0延时消息时间轮算法

RocketMQ5.0延时消息时间轮算法

前言 RocketMQ 相较于其它消息队列产品的一个特性是支持延时消息&#xff0c;也就是说消息发送到 Broker 不会立马投递给消费者&#xff0c;要等待一个指定的延迟时间再投递&#xff0c;适用场景例如&#xff1a;下单后多长时间没付款系统自动关闭订单。 RocketMQ 4.x 版本的延…
阅读更多...
一文搞懂手机卡的定向流量到底是什么！

一文搞懂手机卡的定向流量到底是什么！

最近有一些小伙伴对于手机卡流量中包含的定向流量这个概念不是很明白&#xff0c;而且也不知道具体如何使用&#xff0c;今天这个视频&#xff0c;葫芦弟就仔细给大家讲解一下&#xff0c;希望能解开小伙伴们心中的疑惑。废话不多说&#xff0c;我们直接进入正题&#xff01; 首…
阅读更多...
第十四章 ：案例课:部暑KVM虚拟化平台

第十四章 ：案例课:部暑KVM虚拟化平台

[rootLinux01 ~]# mount /dev/cdrom /mnt //挂载安装KVM需要的软件 [rootLinux01 ~]# yum -y install qemu-kvm-tools [rootLinux01 ~]# yum -y install qemu-kvm [rootLinux01 ~]# yum -y install virt-install [rootLinux01 ~]# yum -y install qemu-img [rootLinux01 ~]#…
阅读更多...
Oracle 日志路径查询介绍

Oracle 日志路径查询介绍

数据库日志分析详解&#xff1a;  ORACEL RAC 体系架构分析  Oracle RAC 包含GI(Grid Infrastructure) 集群软件与Oracle数据库组成。  GI包含两个最主要的组件&#xff1a;Clusterware集群软件和ASM存储软件&#xff0c;这两个软件提供数据库高可用能力。  …
阅读更多...
k8s之Pod的基础（上）

k8s之Pod的基础（上）

什么是pod&#xff1f; pod是k8s中最小的资源管理组件 pod也是最小运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 在一个pod当中运行一个容器时最常用的方式 在一个pod当中同时运行多个容器&#xff0c;在一个po…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023