vue3项目学习一:创建vue3项目

创建vue3项目

  • 一、使用vue-cli创建vue3项目
    • 1.安装vue-cli
    • 2.创建vue3项目
  • 二、初始化项目结构
  • 三、导入element-ui

一、使用vue-cli创建vue3项目

1.安装vue-cli

先查看是否安装vue-cli
在cmd窗口输入vue -V查看版本,如果出现
在这里插入图片描述
则说明存在vue-cli,如果出现
在这里插入图片描述

则需要安装vue-cli

npm i -g @vue/cli

如果需要升级版本则可以输入

npm update -g @vue/cli

2.创建vue3项目

输入

vue create vue3-demo

即可进入模板选择
在这里插入图片描述
等待生成
在这里插入图片描述
创建成功后进入创建好的项目文件夹中,在cmd窗口输入npm run serve即可启动项目。
可以看到我们创建好的项目:
在这里插入图片描述

二、初始化项目结构

  1. App.vue初始化
<template><router-view />
</template><style lang="scss"></style>
  1. 删除views文件夹中所有.vue文件
  2. 删除components文件夹下所有.vue文件
  3. 初始化router/index.js中的代码
import { createRouter, createWebHashHistory } from 'vue-router'const routes = []const router = createRouter({history: createWebHashHistory(),routes
})export default router

三、导入element-ui

element-ui对应vue3的版本为element-plus

  1. 通过vue-cli导入

vue add element-plus

  1. 选择全局导入
    在这里插入图片描述
    在这里插入图片描述
    等待安装完成
    在这里插入图片描述
    注意安装完成后element会修改App.vue,此时如果启动会报错,所以先把App.vue恢复后再启动。
    或按照element-plus的官网提供的npm安装方式安装。

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

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

相关文章

机器学习第七课--情感分析系统

分词 分词是最基本的第一步。无论对于英文文本&#xff0c;还是中文文本都离不开分词。英文的分词相对比较简单&#xff0c;因为一般的英文写法里通过空格来隔开不同单词的。但对于中文&#xff0c;我们不得不采用一些算法去做分词。 常用的分词工具 # encodingutf-8 import …

自研一个简易版本的OkHTTP

一,背景 为了彻底搞明白okhttp原理&#xff0c;仿照okhttp自研一个 二&#xff0c;思路 业务上没发出一个request&#xff0c;使用AsyncCall包装起来&#xff0c;然后在网络分发器的作用下&#xff0c;执行具体的每一个Call,这些具体的Call会经过层层的拦截器&#xff0c;最终…

【css | linear-gradient】linear-gradient()的用法

linear-gradient() CSS函数创建一个由两种或多种颜色沿一条直线进行线性过渡的图像,其结果是<gradient>数据类型的对象,此对象是一种特殊的<image> 数据类型。 先看一个线上的示例 https://code.juejin.cn/pen/7277486410842996771 语法 /* 渐变轴为 45 度&…

Iterator设计模式

目录 1、示例 1.1 Aggregate接口 1.2 Iterator接口 1.3 Book类 1.4 BookShelf类 1.6 BookShelfIterator 类 1.7 Main类 2、解释Iterator模式中的角色 2.1 Iterator模式的存在意义 2.2 抽象类和接口 2.3 Aggregate 和 Iterator的对应 2.4 容易弄错"下一个"…

day06_Java中的流程控制语句

流程控制 简单来讲所谓流程就是完成一件事情的多个步骤组合起来就叫做一个流程。在一个程序执行的过程中&#xff0c;各条语句的执行顺序对程序的结果是有直接影响的。我们必须清楚每条语句的执行流程。而且&#xff0c;很多时候要通过控制语句的执行顺序来实现我们想要的功能…

OpenCV(三十五):凸包检测

1.凸包检测介绍 凸包检测是计算凸包的一种技术&#xff0c;凸包就是&#xff1a;给定二维平面上的点集&#xff0c;将最外层的点连接起来构成的凸边形&#xff0c;它是包含点集中所有的点。 2.凸包检测函数convexHull() void cv::convexHull ( InputArray points, OutputArra…

Web应用系统的小安全漏洞及相应的攻击方式

写作目的 本文讲述一个简单的利用WebAPI来进行一次基本没有破坏力的“黑客”行为。 主要目的如下&#xff1a; 了解什么叫安全漏洞 知道什么是api 了解一些获取api的工具 通过对API的认识了解白盒接口测试基本概念和技术 免责声明&#xff1a; 本文主要是以学习交流为目的&a…

【业务功能118】微服务-springcloud-springboot-Kubernetes集群-k8s集群-KubeSphere-OpenELB部署及应用

OpenELB部署及应用 一、OpenELB介绍 网址&#xff1a; openelb.io OpenELB 是一个开源的云原生负载均衡器实现&#xff0c;可以在基于裸金属服务器、边缘以及虚拟化的 Kubernetes 环境中使用 LoadBalancer 类型的 Service 对外暴露服务。OpenELB 项目最初由 KubeSphere 社区发…

【面试题】——Java基础篇(33题)

文章目录 1. 八大基本数据类型分类2. 重写和重载的区别3. int和integer区别4. Java的关键字5. 什么是自动装箱和拆箱&#xff1f;6. 什么是Java的多态性&#xff1f;7. 接口和抽象类的区别&#xff1f;8. Java中如何处理异常&#xff1f;9. Java中的final关键字有什么作用&…

RabbitMQ深入 —— 死信队列

前言 前面荔枝梳理了RabbitMQ中的普通队列、交换机以及相关的知识&#xff0c;在这篇文章中荔枝将会梳理RabbitMQ的一个重要的队列 —— 死信队列&#xff0c;主要了解消息流转到死信队列的三种的方式以及相应的实现demo。希望能帮助到有需要的小伙伴~~~ 文章目录 前言 死信队…

Python统计pdf中英文单词的个数

之前的文章提供了批量识别pdf中英文的方法,详见【python爬虫】批量识别pdf中的英文,自动翻译成中文上。以及自动pdf英文转中文文档,详见【python爬虫】批量识别pdf中的英文,自动翻译成中文下。    本文实现python统计pdf中英文字符的个数。 文章目录 一、要统计字符的pdf…

Pybooks:这十本Python编程语言的入门书籍入门必看!

这个好像没有在微信发过图文版的&#xff0c;补一个。大部分介绍摘自京东等网站。 Python基础教程 评语&#xff1a;Python入门佳作 经典教程的全新修订 10个项目引人入胜 《Python基础教程&#xff08;第2版修订版&#xff09;》是经典的Python入门教程&#xff0c;层次鲜明…

贪心算法的思路和典型例题

一、贪心算法的思想 贪心算法是一种求解问题时&#xff0c;总是做出在当前看来是最好的选择&#xff0c;不从整体最优上加以考虑的算法。 二.用贪心算法的解题策略 其基本思路是从问题的某一个初始解出发一步一步地进行&#xff0c;根据某个优化测度&#xff0c;每一步都要确保…

第21章_瑞萨MCU零基础入门系列教程之事件链接控制器ELC

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

用Python实现链式调用

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 我们在使用Django的models查询数据库时&#xff0c;可以看到有这种写法&#xff1a; form app.models import XXX query XXX.objects.all() query query.filter(name123, age456).filter(salary999)在这种写法里面&#xf…

排序算法-----插入排序

目录 前言&#xff1a; 插入排序 原理图 代码实现 分析总结 二分法插入排序 代码实现 前言&#xff1a; 嗨嗨^_^&#xff0c;米娜桑&#xff0c;今天我们继续学习排序算法中的插入排序&#xff0c;激不激动&#xff0c;兴不兴奋呢&#xff01;好了废话不多说&#xff0c;…

Docker基础学习

Docker 学习目标&#xff1a; 掌握Docker基础知识&#xff0c;能够理解Docker镜像与容器的概念 完成Docker安装与启动 掌握Docker镜像与容器相关命令 掌握Tomcat Nginx 等软件的常用应用的安装 掌握docker迁移与备份相关命令 能够运用Dockerfile编写创建容器的脚本 能够…

python抠图(去水印)开源库lama-cleaner入门应用实践

1. 关于 Lama Cleaner Lama Cleaner 是由 SOTA AI 模型提供支持的免费开源图像修复工具。可以从图片中移除任何不需要的物体、缺陷和人&#xff0c;或者擦除并替换&#xff08;powered by stable diffusion&#xff09;图片上的任何东西。 特征&#xff1a; 完全免费开源&am…

qiankun 乾坤主应用访问微应用css静态图片资源报404

发现static前没有加我指定的前缀 只有加了后才会出来 解决方案: env定义前缀 .env.development文件中 # static前缀 VUE_APP_PUBLIC_PREFIX"" .env.production文件中 # static前缀 VUE_APP_PUBLIC_PREFIX"/szgl" settings文件是封了一下src\settings…

Android平台下奔溃Crash和无响应ANR日志抓取分析

一、使用AndroidStudio 在logcat中查看实时日志&#xff0c;需要选择连接的手机和应用包名 AS下载链接 二、使用adb shell dumpsys dropbox命令获取 #!/bin/bash # path"/data/system/dropbox" # 在手机这个目录下存储了崩溃日志 newest_time$(adb shell dumps…