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.mzph.cn/news/84949.shtml

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

相关文章

Mac使用CMakeList编译ImGUi项目

文章目录 创建项目1.下载ImGui2.下载GLAD3.下载GLFW4.编译项目5.运行截图 创建项目 我这里创建一个demo&#xff0c;opengl这个是可以跨平台的&#xff0c;所以在mac上使用ImGui的opengl3示例 1.下载ImGui 我使用的是docking版本的&#xff0c;这个版本支持停靠功能&#xff…

Linux Qt5.15.2 编译QWebEngine源码支持音视频H264

背景 默认自带的QWebEngine 因版权问题不支持音视频功能&#xff0c;需要自己编译源码以支持。 平台&#xff1a;Linux&#xff08;UOS V20 1050&#xff09; Qt&#xff1a;5.15.2 准备工作 下载 Qt 5.15.2 对应版本源码&#xff0c;使用镜像网站或者Qt Maintenance Tool工…

计算机竞赛 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

一台PoE交换机可以为多少个设备提供供电?

如今在安防监控领域&#xff0c;许多网络设备都支持PoE供电。在网络监控工程中&#xff0c;为了节省布线成本并提高便捷性&#xff0c;大多数工程商选择使用PoE供电方案&#xff0c;也就是使用PoE交换机为监控摄像头提供电力。那么&#xff0c;一台功率输出以太网&#xff08;P…

AI创作专家,免费的AI创作专家工具

AI创作专家是一种崭新的工具&#xff0c;它们利用先进的人工智能技术&#xff0c;帮助创作者和写手更轻松地应对创作挑战。这些工具不仅可以生成文字&#xff0c;还可以提供灵感、帮助构思和组织思路&#xff0c;使创作过程更加高效。 147GPT批量文章生成工具​www.147seo.com/…

深入探究序列化与反序列化:原理、应用和最佳实践

目录 什么是对象的序列化和反序列化序列化步骤反序列化步骤案例演示Java中哪些字段不能序列化序列化与反序列化的重要性序列化与反序列化的应用场景 什么是对象的序列化和反序列化 序列化&#xff08;Serialization&#xff09;是指将对象转化为字节流的过程&#xff0c;以便于…

想学嵌入式开发,薪资怎么样?

想学嵌入式开发&#xff0c;薪资怎么样&#xff1f; 对于嵌入式工程师来说呢&#xff0c;它重点学习内容就是首先一定要打好基础&#xff0c;如果从编程语言角度来讲&#xff0c;那么可以在语言上选C或者C&#xff0c;你可以选择其中任何一门语言作为你的入门。 最近很多小伙伴…

Matlab编程中函数的重命名方法

Matlab编程中函数的重命名方法 在进行matlab编程时候&#xff0c;有时需要根据自己的习惯&#xff0c;需要对函数重命名。本文简要介绍重命名的方法。 一、重命名的方法 通过和赋值号实现&#xff0c;如下所示&#xff1a; 新函数名原函数名二、具体举例 clc clear all %将…

Flutter超好用的路由库-fluro

文章目录 fluro的介绍fluro简介安装和导入路由配置导航到路由参数传递 fluro的典型使用创建路由管理类代码解释例子小结 初始化路由导航到路由 总结 fluro的介绍 fluro简介 fluro是一个流行的Flutter插件&#xff0c;用于实现高级路由管理。它提供了灵活的路由配置和导航功能…

笔试面试相关记录(5)

&#xff08;1&#xff09;给定一个字符串&#xff0c;含有大写、小写字母&#xff0c;空格&#xff0c;数字&#xff0c;需要将其变为满足如下条件&#xff1a; 所有的数字需要换成空格&#xff0c;并且字符串的头尾不包含空格&#xff0c;且整个字符串不包含连续的两个空格。…

Maven的介绍和使用

Maven的作用 项目构建 依赖管理&#xff1a;避免资源间版本冲突问题 统一开发结构&#xff1a;提供统一的项目结构 Maven的使用 下载完压缩包之后放在合适的目录下&#xff0c;其中apache-maven-3.8.8文件夹是安装的maven&#xff0c;下面的repository是本地仓库&#xff…

月木学途开发 6.网址模块

概述 效果图 数据库设计 网站类型表 DROP TABLE IF EXISTS website; CREATE TABLE website (websiteId int(11) NOT NULL AUTO_INCREMENT,websiteImg longtext,websiteName varchar(255) DEFAULT NULL,websiteUrl longtext,websiteDesc varchar(255) DEFAULT NULL,websiteTy…

Python经典练习题(一)

文章目录 &#x1f340;第一题&#x1f340;第二题&#x1f340;第三题&#x1f340;第四题&#x1f340;第五题 &#x1f340;第一题 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 这里我们使用…

HTTP 错误 401.3 - Unauthorized 由于 Web 服务器上此资源的访问控制列表(ACL)配置或加密设置,您无权查看此目录或页面。

用IIS 发布网站&#xff0c;不能访问且出现错误&#xff1a;HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。您无权查看此目录或页面 问题截图&#xff1a; 问题描述&#xff1a;HTTP 错误 401.3 - 未经授权&#xff1a;访问由于 A…

[RF学习记录][参数读取]从yaml文件读取参数变量

robotframework支持从yaml文件读取变量&#xff0c;对于比较多的参数&#xff0c;可以在yaml文件中定义好&#xff0c;在robot脚本中引用 1、定义yaml文件 文件内容如下&#xff0c;注意&#xff0c;变量和变量值之间要以4个字符分开 yaml_demo_name: tester traing_gpt_…

RabbitMQ 消息应答

每日一句 物是人非事事休,欲语泪先流。 概述 为了保证消息在发送过程中不丢失,RabbitMQ引入了消息应答机制, 消费者在接收到消息并且处理该消息后,告诉RabbitMQ它已经处理了,RabbitMQ可以把消息删除了。 自动应答 消息发送后立即被认为已经传送成功,这种模式需要在…

Python150题day08

2.基础语法篇 2.1 if 条件句 ①单个条件分支 使用input函数接收用户的输入&#xff0c;如果用户输入的整数是偶数&#xff0c;则使用print函数输出"你输入的整数是:{value],它是偶数”&#xff0c;[value]部分要替换成用户的输入。 解答: value input("请输⼊⼀…

Guava Cache介绍-面试用

一、Guava Cache简介 1、简介 Guava Cache是本地缓存&#xff0c;数据读写都在一个进程内&#xff0c;相对于分布式缓存redis&#xff0c;不需要网络传输的过程&#xff0c;访问速度很快&#xff0c;同时也受到 JVM 内存的制约&#xff0c;无法在数据量较多的场景下使用。 基…

苹果开发者账号注册及证书生成方法详解

转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&#xff0c;所以需要缴费才能创建ios证书了。 所以新政策…

什么是葡萄酒结构,结构型葡萄酒好吗?

葡萄酒爱好者使用许多复杂的术语来描述葡萄酒的味道&#xff0c;有些是不言自明的&#xff0c;有些则有点模糊。如果你不是葡萄酒专家&#xff0c;你可能很难理解这个葡萄酒术语的全部含义。其中一个术语是葡萄酒结构&#xff0c;那么葡萄酒结构是什么意思呢&#xff1f;而结构…