通过Vscode 简单创建一个vue3+element的项目

首先确保安装的nodejs是18版本以上

确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令

VSCode打开终端

输入构建项目命令,个人推荐如果有cnpm使用cnpm

npm create vue@latest
cnpm create vue@latest

创建成功之后

引入element依赖包

cnpm i element-ui -S

完整引入

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

{"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App)
});

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

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

相关文章

YOLOv5改进 | 检测头篇 | ASFFHead自适应空间特征融合检测头(全网首发)

一、本文介绍 本文给大家带来的改进机制是利用ASFF改进YOLOv5的检测头形成新的检测头Detect_ASFF,其主要创新是引入了一种自适应的空间特征融合方式,有效地过滤掉冲突信息,从而增强了尺度不变性。经过我的实验验证,修改后的检测头在所有的检测目标上均有大幅度的涨点效果,…

AI与区块链的完美交融创新时代的双重引擎

每个投资者都梦想早日进入“下一个亚马逊、苹果或比特币”,以追求代际财富。 然而,这些机会很少而且相距甚远,而且正如每一个虔诚的加密货币本地人都知道的那样,这条道路上常常布满了失败的项目、失信的承诺和波动。 但在 2023 …

uniapp 移动端app判断用户app版本是否是最新版(Android)

1.在uniapp项目中的App.vue文件下 <script>import { ref } from vue;const token ref();export default {onLaunch: function() {// #ifdef APP//获取打包时设置的版本号&#xff0c;然后存到storage里plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) > {u…

用Python做数据分析之生成数据表

第一部分是生成数据表&#xff0c;常见的生成方法有两种&#xff0c;第一种是导入外部数据&#xff0c;第二种是直接写入数据。 Excel 中的文件菜单中提供了**外部数据的功能&#xff0c;支持数据库和文本文件和页面的多种数据源导入。 获取外部数据 python支持从多种类型的数…

mybtis动态SQL注解 脚本动态SQL\方法中构建SQL\SQL语句构造器

mybtis动态SQL注解 动态SQL注解脚本动态SQL方法中构建SQLSQL语句构造器 动态SQL注解 分类&#xff1a; 脚本动态SQL&#xff1a;XML配置方式的动态SQL&#xff0c;是用<script>的方式把它照搬过来&#xff0c;用注解来实现。适用于xml配置转换到注解配置方法中构建SQL&…

Hive数据导出的四种方法

hive数据仓库有多种数据导出方法&#xff0c;我在本篇文章中介绍下面的四种方法供大家参考&#xff1a;Insert语句导出、Hadoop命令导出、Hive shell命令导出、Export语句导出。 一、Insert语句导出 语法格式 Hive支持将select查询的结果导出成文件存放在文件系统中。语法格…

flink1.15 维表join guava cache和mysql方面优化

优化前 mysql响应慢,导致算子中数据输出追不上输入,导致显示cpu busy:100% 优化后效果两个图对应两个时刻: - - -- 优化前 select l.id,JSON_EXTRACT(r.msg,$$.key1) as msgv (select id,uid from tb1 l where id?) join (select uid,msg from tb2) r on l.uidr.uid;-- 优化…

STM32+HAL库驱动ADXL345传感器(SPI协议)

STM32HAL库驱动ADXL345传感器&#xff08;SPI协议&#xff09; ADXL345传感器简介实物STM32CubeMX配置SPI配置片选引脚配置串口配置 特别注意&#xff08;重点部分&#xff09;核心代码效果展示 ADXL345传感器简介 ADXL345 是 ADI 公司推出的基于 iMEMS 技术的 3 轴、数字输出加…

Flink(十三)【Flink SQL(上)】

前言 最近在假期实训&#xff0c;但是实在水的不行&#xff0c;三天要学完SSM&#xff0c;实在一言难尽&#xff0c;浪费那时间干什么呢。SSM 之前学了一半&#xff0c;等后面忙完了&#xff0c;再去好好重学一遍&#xff0c;毕竟这玩意真是面试必会的东西。 今天开始学习 Flin…

前端常见面试题之ajax、http

文章目录 一、手写ajax请求1. get2. post3. xhr.readyState4. xhr.status5. xhr.open 二、跨域三、cookie、localStorage和sessionStorage四、http1. http常见的状态码有哪些2. http常见的header有哪些3. 什么是RestfulAPI4. 描述一下http的缓存机制5. https 一、手写ajax请求 …

专业140+总410+哈尔滨工业大学803信号与系统和数字逻辑电路考研经验哈工大电子信息(信息与通信工程-信通)

一年的努力付出终于有了收获&#xff0c;今年专业课140&#xff0c;总分410顺利上岸哈工大803电子信息&#xff08;信息与通信-信通&#xff09;&#xff0c;回顾总结了自己这一年的复习&#xff0c;有得有失&#xff0c;希望对大家复习有所帮助。 数学 时间安排&#xff1a;…

Spring Boot中实现订单30分钟自动取消的策略

Spring Boot中实现订单30分钟自动取消的策略 简介 在电商和其他涉及到在线支付的应用中&#xff0c;通常需要实现一个功能&#xff1a;如果用户在生成订单后的一定时间内未完成支付&#xff0c;系统将自动取消该订单。本文将详细介绍基于Spring Boot框架实现订单30分钟内未支…

P9840 [ICPC2021 Nanjing R] Oops, It‘s Yesterday Twice More题解

[ICPC2021 Nanjing R] Oops, It’s Yesterday Twice More 传送门 题面翻译 有一张 n n n\times n nn 的网格图&#xff0c;每个格子上都有一只袋鼠。对于一只在 ( i , j ) (i,j) (i,j) 的袋鼠&#xff0c;有下面四个按钮&#xff1a; 按钮 U&#xff1a;如果 i > 1 …

4、python列表Lists

列表和你可以用它们做的事情。包括索引,切片和变异! 文章目录 1.列表1.1索引1.2切片1.3列表修改1.4列表函数1.5插曲:对象1.6列表方法1.6.1列表搜索1.7Tuples元组1.列表 Python 中的 List 表示有序的值序列: In [1]: primes = [2, 3, 5, 7]我们可以把其他类型的事情列入清…

“五星卡”上新!合合信息“外国人永久居留身份证”识别产品助力金融机构提升服务效率

外国人永久居留身份证&#xff08;简称“永居证”&#xff09;&#xff0c;是国家移民管理局对符合条件的外国人批准其在境内永久居留后&#xff0c;为其签发的法定身份证件。2023年12月&#xff0c;国家移民管理局正式启用签发更趋近于居民身份证技术体系的新一版永居证&#…

【Flutter 开发实战】Dart 基础篇:List 详解

嗨&#xff0c;各位朋友们&#xff0c;欢迎来到这篇博客&#xff01;今天我们将一起踏入 Dart 语言的神奇世界&#xff0c;深入了解 Dart 中的 List 类型。不用担心&#xff0c;我会尽可能用最通俗易懂的语言&#xff0c;让你对 List 有一个更深刻的理解。 Dart 中的 List Li…

SegVol: Universal and Interactive Volumetric Medical Image Segmentation

Abstract 精确的图像分割为临床研究提供了有意义且结构良好的信息。尽管在医学图像分割方面取得了显著的进展&#xff0c;但仍然缺乏一种能够分割广泛解剖类别且易于用户交互的基础分割模型。 本文提出了一种通用的交互式体医学图像分割模型——SegVol。通过对90k个未标记的C…

kibana查看和展示es数据

本文来说下使用kibana查看和展示es数据 文章目录 数据准备查询所有文档示例kibana查看和展示es数据 数据准备 可以使用es的命令或者java程序来往&#xff0c;es进行新增数据 查询所有文档示例 在 apifox 中&#xff0c;向 ES 服务器发 GET请求 &#xff1a;http://localhost:92…

rust跟我学二:模块编写与使用

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info中模块的使用。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:[我的Rust库更新]g…

在 Windows 11 上通过 Autoawq 启动 Mixtral 8*7B 大语言模型

在 Windows 11 上通过 Autoawq 启动 Mixtral 8*7B 大语言模型 0. 背景1. 安装依赖2. 开发 main.py3. 运行 main.py 0. 背景 看了一些文章之后&#xff0c;今天尝试在 Windows 11 上通过 Autoawq 启动 Mixtral 8*7B 大语言模型。 1. 安装依赖 pip install torch torchvision …