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

news2024/12/23 4:42:55

创建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.coloradmin.cn/o/1021124.html

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

相关文章

FTP这么“好用”和“便宜”,为什么企业还要替换掉?

FTP是一种历史悠久的网络协议&#xff0c;自1971年问世以来&#xff0c;它因其简易性、便捷性以及强大的跨平台兼容性而被广泛使用。在网站开发、软件更新和数据备份等多个场景中&#xff0c;FTP都发挥了重要作用。不过&#xff0c;随着互联网技术的不断发展和企业需求的多样化…

DockerCompose和Docker镜像仓库

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

SpringCloud Alibaba - Nacos

1.安装与部署 Nacos是阿里巴巴开源的服务注册与发现、配置管理的组件&#xff0c;相当于是EurekaConfig的组合。 Nacos服务器是单独安装部署的&#xff0c;需要下载Nacos服务端程序&#xff0c;下载地址https://github.com/alibaba/nacos。 window下双击startup.cmd 登录Naco…

Linux的Redis集群搭建-主从集群哨兵模式

上次教大家在linux中安装单机版本的redis&#xff1a; Linux安装Redis&#xff08;图文解说详细版&#xff09; 这次我们讲一下Linux安装redis的集群版本 文章目录 &#x1f334;准备redis环境&#x1f334;第一步&#xff0c;下载redis&#x1f334;第二步&#xff0c;传输到…

PCIE研究-2

PCIe是一种高速串行总线&#xff0c;用于连接计算机内部的各种设备。在PCIe中&#xff0c;有四种不同的设备类型&#xff1a;Switch、Bridge、Root Complex和EndPoint。本篇文章将介绍这四种设备类型的基础知识。 1. Switch Switch是PCIe中最常见的设备类型之一&#xff0c;它…

【LeetCode热题100】--11.盛最多水的容器

11.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 **说明&#xff1a;*…

【线下培训】上海临港: RT-Thread × 瑞萨 工业监视器 RA6M3 HMI Board解决方案

注册RT-Thread官方论坛&#xff0c;即可第一时间获得最新消息&#xff01;更有大量活动赚取积分&#xff0c;免费兑换开发板&#xff01; 注册地址&#xff1a;https://www.rt-thread.org/account/user/register.html RT-Thread 与瑞萨将于10月14日在上海临港举行一场线下培训…

java_web的框架分析

文章目录 本阶段技术体系用项目理解原理controllersClassPathXmlApplicationContextDispatcherServletFruitServiceImplFilter 本阶段技术体系 用项目理解原理 项目的目录 首先设置一个参数&#xff0c;这里里面用反射机制&#xff0c;获取方法的时候如果不设置会获取到arg[0…

AI绘画关键词:小龙女

a lady dressed in a white gown stand beside a dragon, in the style of peter gric, traditional essence, kazuki takamatsu, andreas rocha, life-like avian illustrations, serene faces, aurorapunk,3D --ar 9:16 --s 250 --v 5.2

浅述数据中心供配电系统解决方案及产品选型

安科瑞 华楠 【摘 要】现如今&#xff0c;社会主要领域已从对单个设备的关注转化为对于系统解决方案的关注&#xff0c;数据中心的供应商们也想尽办法去满足所面对的各方面需求。基于此&#xff0c;主要提出了云计算数据中心供配电解决方案&#xff0c;同时还对数据中心供配电…

中小型教育机构这样做,让你轻松抓住受众注意力

教育一直都是家长对于孩子最关心的事情&#xff0c;对于部分家庭来说&#xff0c;教育支出占整个家庭支出的50%左右。 而软文作为目前效果比较明显而且性价高的推广方式&#xff0c;也很适合教育培训行业&#xff0c;因为它能让潜在客户可以清楚地了解产品的特性&#xff0c;感…

乐观善良的属马人,这几年的运势怎么样?

生肖马的人是一个乐观向上&#xff0c;拥有对生活的热情态度&#xff0c;更是个实打实过日子的人&#xff0c; 品性善良&#xff0c;对朋友尽心尽力&#xff0c;在朋友的面前没有丝毫的不真诚&#xff0c; 且乐于助人&#xff0c;因此朋友多&#xff0c;贵人也多。 属马人精力充…

LED智能家居灯 开关调光 台灯落地灯控制驱动 降压恒流IC AP5191

产品描述 AP5191是一款PWM工作模式,高效率、外围简单、内置功率MOS管&#xff0c;适用于4.5-150V输入的高精度降压LED恒流驱动芯片。输出最大功率150W&#xff0c;最大电流6A。AP5191可实现线性调光和PWM调光&#xff0c;线性调光脚有效电压范围0.55-2.6V.AP5191 工作频率可以…

热烈祝贺金伯帆集团成功入选航天系统采购供应商库

经过航天系统采购平台的严审&#xff0c;上海金伯帆信息科技集团有限公司成功入选中国航天系统采购供应商库。航天系统采购平台是航天系统内企业采购专用平台&#xff0c;服务航天全球范围千亿采购需求&#xff0c;目前&#xff0c;已有华为、三一重工、格力电器、科大讯飞等企…

景联文科技:数据供应商在新一轮AI热潮中的重要性

景联文科技是AI基础行业的头部数据供应商&#xff0c;可协助人工智能企业解决整个人工智能链条中数据标注环节的相对应问题。 随着全球新一轮AI热潮来袭&#xff0c;大量训练数据已成为推动AI算法模型进步和演化的不可或缺的重要因素。数据的质量和数量直接影响了模型训练和性能…

C++QT 作业8

#include "mywind.h" #include "ui_mywind.h" #include <iostream> #include <QIcon> #include <QLabel> #include <QLineEdit> #include <QDebug>//信息调试类 用于输出数据 Mywind::Mywind(QWidget *parent): QWidget(pa…

Sectigo https证书

Sectigo&#xff08;前身为ComodoCA&#xff09;是全球在线安全解决方案提供商和全球最大的证书颁发机构。Sectigo为全球超过300万客户提供服务&#xff0c;并稳居SSL市场份额榜首。 其成功建立在两个关键要素之上&#xff1a;灵活的SSL产品范围和实惠的价格。Sectigo是第一家…

测试域: 流量回放-介绍篇

建设背景 测试人员回归耗时长&#xff0c;成本大。公司很多测试都进行手工测试&#xff0c;在集成测试中需要耗费一周时间进行全量测试&#xff0c;在各个环境(用户测试环境和预发布环境)回归测试时需要耗费三天左右。加上编写测试用例时间&#xff0c;理解需求时间等其他&…

学习vue3源码

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 1. 为什么要学习源码 阅读优秀的代码的目的是让我们能够写出优秀的代码 不给自己设限&#xff0c;不要让你周围人…

C++——模板,template

函数模板 我们经常会遇到一种情况&#xff1a;用相同的方法处理不同的数据。对于是函数&#xff0c;我们可以用函数重载来解决。虽然重载可以解决这种情况&#xff0c;但还是很繁琐。如果函数重载10次&#xff0c;有一天你突然发现有新的需求&#xff0c;函数需要修改&#xf…