当前位置: 首页 > news >正文

vue3搭建教程(基于webpack+create-vue+ element-plus)

前言

使用vue脚手架搭建vue+ts+webpack项目

搭建步骤:

  1. 下载node 版本可以 12 或者14或者 16.0,此次使用的>16.0版本,vue-cli通过npm i -g @vue/cli 升级到了 vue cli v5.0.8

  1. 建目录,如(vue3Study)

用IDE工具打开终端,输入命令

vue create vue3-ts-demo

安装sass(scss)

npm install sass-loader node-sass -D

安装element-plus

npm install element-plus --save

### 完全引入
main.ts:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
### 按需引入 --自动按需引入
需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import

vue.config.js:
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
...
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
}
.vue文件中直接使用 <el-button type="primary">Primary</el-button>
### 按需引入 --手动按需引入
1、 安装 unplugin-element-plus 来导入样式
npm i unplugin-element-plus -D
2 只使用组件API话:(在.vue中单独使用组件的样式)
.vue文件---
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

<el-button type="primary">Primary</el-button>

自动按需引入

相关文章:

vue3搭建教程(基于webpack+create-vue+ element-plus)

前言使用vue脚手架搭建vuetswebpack项目搭建步骤&#xff1a;下载node 版本可以 12 或者14或者 16.0&#xff0c;此次使用的>16.0版本&#xff0c;vue-cli通过npm i -g vue/cli 升级到了 vue cli v5.0.8建目录&#xff0c;如&#xff08;vue3Study&#xff09;用IDE工具打开…...

代码随想录算法训练营第四十二天 | leetcode 1049. 最后一块石头的重量 II,494. 目标和,474.一和零

代码随想录算法训练营第四十二天 | leetcode 1049. 最后一块石头的重量 II&#xff0c;494. 目标和&#xff0c;474.一和零1049. 最后一块石头的重量 II494. 目标和474.一和零1049. 最后一块石头的重量 II 题目&#xff1a; 有一堆石头&#xff0c;每块石头的重量都是正整数。…...

Java8中Lambda表达式之Collection 的常见用法

背景 在java8中引入了Lambda表达式。其实&#xff0c;他就是一个匿名函数。我们经常会用到一些循环遍历&#xff0c;起始完全就可以通过Lambda来简化我们不必要的操作&#xff0c;下面我们来看一下Lambda常用的方法。 准备条件 DataBuilderprivate static class Person {priv…...

SpringCloud系列知识快速复习 -- part 2(Sentinel微服务保护,Seata分布式事务,Redis分布式缓存和多级缓存)

SpringCloud系列知识快速复习 -- part 2&#xff08;Sentinel微服务保护&#xff0c;Seata分布式事务&#xff0c;Redis分布式缓存和多级缓存Sentinel微服务保护什么是雪崩问题&#xff1f;解决方法服务保护技术对比流量控制簇点链路Sentinel流控模式流控效果热点参数限流隔离和…...

设置CentOS7的时间与网络同步

1.设置时区为北京时间 [rootlocalhost ~]# timedatectl set-timezone Asia/Shanghai 2.查看系统时间 [rootlocalhost ~]# timedatectl Local time: 四 2023-03-02 17:40:41 CST #系统时间 Universal time: 四 2023-03-02 09:40:41 UTC …...

java开发手册之编程规约

文章目录编程规约命名风格常量定义代码格式OOP规约集合处理并发处理控制语句注释规约其它编程规约 命名风格 1.代码中的命名均不能以下划线或者美元符号开始&#xff0c;也不能以下划线或者美元符号结束 例如&#xff1a;_name | name__ | name$ | $name2.代码中的命名严…...

Camera | 5.Linux v4l2架构(基于rk3568)

上一篇我们讲解了如何编写基于V4L2的应用程序编写&#xff0c;本文主要讲解内核中V4L2架构&#xff0c;以及一些最重要的结构体、注册函数。 厂家在实现自己的摄像头控制器驱动时&#xff0c;总体上都遵循这个架构来实现&#xff0c;但是不同厂家、不同型号的SoC&#xff0c;具…...

机房PDU如何挑选?

PDU PDU(Power Distribution Unit,电源分配单元),也就是我们常说的机柜用电源分配插座,PDU是为机柜式安装的电气设备提供电力分配而设计的产品,拥有不同的功能、安装方式和不同插位组合的多种系列规格,能为不同的电源环境提供适合的机架式电源分配解决方案。PDU的应用,…...

lab备考第二步:HCIE-Cloud-Compute-第一题:FusionCompute

第一题 FusionCompute 一、题目介绍 1.1. 扩容CAN节点与对接共享存储&#xff08;必选&#xff09; 题目及【考生提醒关键点】 扩容一台CNA节点&#xff0c;配置管理地址设置为&#xff1a;192.168.100.212。密码设置为&#xff1a;Cloud12#$。【输入之前确认自己的大小写是否…...

js-cookie和vue-cookies(Cookie使用教程)

简述&#xff1a;js-cookie和vue-cookies都是vue项目中的插件&#xff0c;下载相关依赖后&#xff0c;可以用来存储、获取、删除Cookie等操作&#xff0c;思路相同&#xff0c;操作时稍有不同&#xff0c;当然也可以用原生js来获取Cookie&#xff1b; ⭐ js-coo…...

开创高质量发展新局面,优炫数据库助推数字中国建设

最新印发《数字中国建设整体布局规划》&#xff0c;建设数字中国是数字时代推进中国式现代化的重要引擎&#xff0c;是构筑国家竞争新优势的有力支撑。 数字中国建设按照“2522”的整体框架进行布局&#xff0c;即夯实数字基础设施和数据资源体系“两大基础”&#xff0c;推进…...

【项目实战】为什么我选择使用CloseableHttpClient,而不是HttpClient,他们俩有什么区别?

一、HttpClient介绍 HttpClient是Commons HttpClient的老版本&#xff0c;已被抛弃&#xff0c;不推荐使用&#xff1b; HttpClient是一个接口&#xff0c;定义了客户端HTTP协议的操作方法。 它可以用于发送HTTP请求和接收HTTP响应。 HttpClient接口提供了很多方法来定制请求…...

Spark 内存运用

RDD Cache 当同一个 RDD 被引用多次时&#xff0c;就可以考虑进行 Cache&#xff0c;从而提升作业的执行效率 // 用 cache 对 wordCounts 加缓存 wordCounts.cache // cache 后要用 action 才能触发 RDD 内存物化 wordCounts.count// 自定义 Cache 的存储介质、存储形式、副本…...

SpringBoot集成Swagger3.0(入门) 02

文章目录Swagger3常用配置注解接口测试API信息配置Swagger3 Docket开关&#xff0c;过滤&#xff0c;分组Swagger3常用配置注解 ApiImplicitParams,ApiImplicitParam&#xff1a;Swagger3对参数的描述。 参数名参数值name参数名value参数的具体意义&#xff0c;作用。required参…...

网络协议丨ICMP协议

ICMP协议&#xff0c;全称 Internet Control Message Protocol&#xff0c;就是互联网控制报文协议。我们其实对它并不陌生&#xff0c;我们平时经常使用的”ping“一下就是基于这个协议工作的。网络包在异常复杂的网络环境中传输时&#xff0c;常常会遇到各种各样的问题。当遇…...

12.1 基于Django的服务器信息查看应用(系统信息、用户信息)

文章目录新建Django项目创建子应用并设置本地化创建数据库表创建超级用户git管理项目&#xff08;requirements.txt、README.md、.ignore&#xff09;主机信息监控应用的框架搭建具体功能实现系统信息展示前端界面设计视图函数设计用户信息展示视图函数设计自定义过滤器的实现前…...

ExSwin-Unet 论文研读

ExSwin-Unet摘要1 引言2 方法2.1 基于窗口的注意力块2.2 外部注意力块2.3 不平衡的 Unet 架构2.4 自适应加权调整2.5 双重损失函数3 实验结果3.1 数据集3.2 实现细节3.3 与 SOTA 方法的比较3.4 消融研究4 讨论和限制5 结论数据集来源&#xff1a; https://feta.grand-challenge…...

置顶!!!主页禁言提示原因:在自己论坛发动态误带敏感词,在自己论坛禁止评论90天

置顶&#xff01;&#xff01;&#xff01;主页禁言提示原因&#xff1a;在自己论坛发动态误带敏感词&#xff0c;在自己论坛禁止评论90天 置顶&#xff01;&#xff01;&#xff01;主页禁言提示原因&#xff1a;在自己论坛发动态误带敏感词&#xff0c;在自己论坛禁止评论90天…...

优思学院|解密六西格玛:探索DMAIC和DMADV之间的区别

六西格玛方法中最为广泛使用的两种方法是DMAIC和DMADV。这两种方法都是为了让企业流程更加高效和有效而设计的。虽然这两种方法有一些重要的共同特点&#xff0c;但它们并不可以互相替代&#xff0c;并且被开发用于不同的企业流程。在更详细地比较这两种方法之前&#xff0c;我…...

Pytorch的DataLoader输入输出(以文本为例)

本文不做太多原理介绍&#xff0c;直讲使用流畅。想看更多底层实现-〉传送门。DataLoader简介torch.utils.data.DataLoader是PyTorch中数据读取的一个重要接口&#xff0c;该接口定义在dataloader.py脚本中&#xff0c;只要是用PyTorch来训练模型基本都会用到该接口。本文介绍t…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...