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

创建vue3项目并引用elementui

1.创建vu3项目:

vue3官网:简介 | Vue.js

执行命令

npm create vue@latest

2.终端会出现如下选项,不确定的直接enter键进入下一步;

3.然后再执行下方命令:

cd <your-project-name>
npm install

4.安装依赖成功后引入elementplus,执行命令:

elementplus官网一个 Vue 3 UI 框架 | Element Plus

npm install element-plus --save

5.引入element-plus分为全局引入和按需引入两种方式,一般在工程项目中,由于全局引入会导致不必要的资源加载,为提升项目性能,建议进行按需引入。两种引入方式分别为:

5.1全局引入:

全局引入就是在项目入口(main.ts)文件直接引入组件以及组件全部的样式文件;代码如下:

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

5.2按需引入:

在vue3中按需引入ElementUI,需要使用其他的插件辅助,需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件;执行如下命令:

npm install -D unplugin-vue-components unplugin-auto-import

然后再vite或者webpack或者vue.config.js配置中添加相应的配置,如下所示:

vite中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

webpack中

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

vue.config.js中

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = defineConfig({configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],}
})

引入之后按需导入组件,如引入input组件和button组件:

<template><div><el-input class="input" v-model="input" type="file" placeholder="Please input" /><el-button class="button" type="primary">文件处理</el-button></div>
</template><script>import { ElButton, ElInput } from 'element-plus'import { ref } from 'vue'export default {components: { ElButton,ElInput },}</script>
<style scoped>
.input {display: inline;margin: 20px 30px;
}
.button {width: 90px;
}
</style>

6.运行项目命令:

npm run dev

相关文章:

创建vue3项目并引用elementui

1.创建vu3项目&#xff1a; vue3官网&#xff1a;简介 | Vue.js 执行命令 npm create vuelatest 2.终端会出现如下选项&#xff0c;不确定的直接enter键进入下一步&#xff1b; 3.然后再执行下方命令&#xff1a; cd <your-project-name> npm install4.安装依赖成功…...

《C++ Primer》第2章 变量(二)

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 2.4 const限定符&#xff08;P53&#xff09; 由于 const 对象在创建后不能修改&#xff0c;所以其必须初始化。 const 对象的常量特征仅在执行改变该变量的操作时才会发生作用。 const 对象默认仅在文件…...

Vue3统一导出局部组件和全局组件

局部组件统一导出 components新增ComponentA.vue、ComponentB.vue两个组件 新增index.js进行组件统一导入 import ComponentA from ./ComponentA.vue import ComponentB from ./ComponentB.vueexport {ComponentA,ComponentB }使用 <template><ComponentA /><…...

【笔试强训选择题】Day36.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01; 文章目录 前言一、Day…...

【软考】系统架构设计师 - 知识扩展 - “区块链技术“

目录 一 简介&#x1f451; 1 比特币❤️ 2 区块链的特点❤️ 3 共识算法❤️ 二 练习题&#x1f451; 三 扩展&#x1f451; 1 哈希算法❤️ 2 哈希指针❤️ 3 UTXO❤️ 4 参考资料❤️ 一 简介&#x1f451; 1 比特币❤️ 比特币底层采用了区块链技术。 比特币交易…...

Pytorch 分布式训练(DP/DDP)

概念 PyTorch是非常流行的深度学习框架&#xff0c;它在主流框架中对于灵活性和易用性的平衡最好。 分布式训练根据并行策略的不同&#xff0c;可以分为模型并行和数据并行。 模型并行 模型并行主要应用于模型相比显存来说更大&#xff0c;一块 GPU 无法加载的场景&#xf…...

替换滚珠螺杆需要了解哪些参数?

滚珠螺杆具有定位精度高、高寿命、低污染和可做高速正逆向的传动及变换传动等特性&#xff0c;因具上述特性&#xff0c;滚珠螺杆已成为近来精密科技产业及精密机械产业的定位及测量系统上的重要零组件之一。 众所周知&#xff0c;滚珠螺杆是可以替换的&#xff0c;不仅同品牌之…...

CentOS系统环境搭建(十九)——CentOS7安装chat GPT

centos系统环境搭建专栏&#x1f517;点击跳转 CentOS7安装chat GPT Welcome to the AI era! 基于上一篇文章CentOS系统环境搭建&#xff08;十八&#xff09;——CentOS7安装Docker20.10.12和docker compose v2&#xff0c;你已经安装了docker20以上的版本。那么&#xff0…...

【办公类-19-03】办公中的思考——Python批量制作word单元格照片和文字(小照片系列)

背景需求&#xff1a; 工会老师求助&#xff1a;如何在word里面插入4*8的框&#xff0c;我怎么也拉不到4*8大小&#xff08;她用的是我WORD 文本框&#xff09; 我一听&#xff0c;这又是要手动反复黏贴“文本框”“照片”“文字”的节奏哦 我问&#xff1a;你要做几个人&…...

【Spring】Spring Bean的4种依赖注入方式

文章目录 前言1. 构造方法注入2. set方法注入3. 自动装配4. 注解 前言 所谓依赖注入&#xff0c;其实就是给对象里的属性赋值&#xff0c;因为对象里有其他对象&#xff0c;因此就形成了依赖。Spring有4种方式来给属性赋值&#xff1a; 构造方法注入set方法注入自动装配注解 …...

overleaf 参考文献引用,创建引用目录.bib文件,在文档中引用参考文献,生成参考文献列表

目录 1 创建一个Overleaf项目 2 导入或创建 .bib 文件 2.1 导入 .bib 文件&#xff1a; 参考文献的 .bib文件获取步骤 &#xff08;1&#xff09;打开谷歌学术 &#xff08;2&#xff09;输入文献题目 &#xff08;3&#xff09;点击引用&#xff0c;然后选择BibTex格式…...

算法通关村第十八关:青铜挑战-回溯是怎么回事

青铜挑战-回溯是怎么回事 回溯&#xff0c;最重要的算法之一 主要解决一些暴力枚举也搞不定的问题&#xff0c;例如组合、分割、子集、排列、棋盘等 从性能角度来看回溯算法的效率并不高&#xff0c;但对于这些暴力都搞不定的算法能出结果就很好了&#xff0c;效率低点没关系…...

【Redis】深入探索 Redis 的数据类型 —— 字符串 string

文章目录 前言一、string 类型的操作命令设置和获取相关命令1. SET 和 GET2. MSET 和 MGET3. SETNX、SETEX、SETPX 计数相关命令1. INCR 和 INCRBY2. DECR 和 DECRBY3. INCRBYFLOAT 字符串操作相关命令1. APPEND2. GETRANGE3. SETRANGE4. STRLEN string 相关命令总结 二、strin…...

Linux操作命令笔记

Linux Linux的字母大小写下载和卸载软件更新查看空间使用情况当前目录所在的位置查看文件中的内容查看目录下的文件重启关机移动文件磁盘管理软件修改权限删除文件或文件夹新建文件夹移动一个文件夹文件重命名编译C和C文件VIM编辑器的相关操作 Linux的字母大小写 Linux的文件以…...

1.8 工程相关解析(各种文件,资源访问

目录 1.8 工程相关解析(各种文件&#xff0c;资源访问) 分类 Android 基础入门教程 本节引言&#xff1a; 1.工程项目结构解析&#xff1a; 1.res资源文件夹介绍&#xff1a; 2.如何去使用这些资源 2.深入了解三个文件&#xff1a; MainActivity.java&#xff1a; 布局…...

unity 前后左右 移动

using System.Collections; using System.Collections.Generic; using UnityEngine; public class NewBehaviourScript : MonoBehaviour { public float moveSpeed 5f; // 移动速度 public float rotateSpeed 180f; // 旋转速度 // Start is called before the firs…...

计算机视觉传统图像处理库opencv的使用

人工智能领域的图像处理分支&#xff0c;整理了计算机视觉传统图像处理库opencv的使用网址链接。 opencv使用范围&#xff0c;主要用在计算机视觉、视频分析、机器学习、医学影像处理、自动驾驶、工业检测、游戏开发上。 1&#xff09;&#xff1a;opencv效果视频 opencv10个应…...

【数据库】通过实例讲清楚,Mongodb的增删查改,分组查询,聚合查询aggregate

目录 一.基础概念 二.数据库的管理 1.创建数据库 2.删除数据库 二.集合的管理 1.显示所有集合 2.创建集合 3.删除当前集合 4.向集合中插入元素 三.文档的管理 1.文档插入 2.文档的更新 3.文档的删除 4.文档查询 &#xff08;1&#xff09;查询基本语法&#xff1…...

vue + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)

起因&#xff1a; 由于需要在一个项目内接入多种常用的视频流&#xff0c;所以接触到video.js&#xff0c;这里就做个记录。 框架&#xff1a; vue2 video.js videojs-contrib-hls videojs-flvjs-es6 videojs-flash video-js.swf vue安装就不讲了&#xff0c;直接从项目…...

用 Python 微调 ChatGPT (GPT-3.5 Turbo)

用 Python 微调 ChatGPT (GPT-3.5 Turbo) 备受期待的 GPT-3.5 Turbo 微调功能现已推出&#xff0c;并且为今年秋季即将发布的 GPT-4 微调功能奠定了基础。 这不仅仅是一次简单的更新——它是一个游戏规则改变者&#xff0c;为开发人员提供了完美定制人工智能模型的关键解决方案…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...