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.xdnf.cn/news/139001.html

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

相关文章

ubuntu+.net6+docker 应用部署教程

先期工作 1、本地首先安装 Docker Desktop 2、本地装linux in windows 3、生成镜像 后期工作 1、云服务器部署 生成镜像方法 1、生成Dockerfile配置文件 开发工具visual studio 2022 如果项目已经存在&#xff0c;可以选中项目&#xff0c;右键点击->选择添加Docker…

【css】如何实现自定义滚动悬浮置顶、固定表头

说到固定表头或者滚动置顶&#xff0c;我们需要认识css的两个api的2个属性&#xff1a; position: sticky; position: sticky; 是 CSS 中的一种定位方式。当应用于元素时&#xff0c;该元素在滚动时会固定在父容器的指定位置&#xff0c;直到滚动到达特定的位置或条件满足后&…

【pytest】 pytest拓展功能 pycharm PermissionError: [Errno 13] Permission denied:

目录 1. pytest-html 1.1 PermissionError: [Errno 13] Permission denied: D:\\software\\python3\\anconda3\\Lib\\site-packages\\pytest_html\\__pycache__\\tmp_ttoasov 1.2错误原因 2. 失败用例重试 3. 用例并行执行 pytest-parallel 1. pytest-html 管理员打开 A…

oracle客户端的安装(SQL Developer)

参考资料 软件首页&#xff1a;https://www.oracle.com/database/sqldeveloper/ 官方文档&#xff1a;https://docs.oracle.com/en/database/oracle/sql-developer/ 下载地址&#xff1a;https://www.oracle.com/database/sqldeveloper/technologies/download/ 安装指南&#…

Unity 2021.x及以下全版本Crack

前言 最近Unity那档子事不出来了吗&#xff0c;搞得所有人都挺烦的&#xff0c;顺便在公司内网需要我完成一个游戏的项目&#xff0c;就研究了一下如何将Unity给Crack掉。 注意所有操作应有连接外网的权限 以我选择的版本为例&#xff0c;我使用的是Unity 2021.3.5f1与Unity…

【LeetCode-中等题】 222. 完全二叉树的节点个数

文章目录 题目方法一&#xff1a;把该题当做一个普通的二叉树来做&#xff08;任何遍历都可以&#xff09;方法二&#xff1a;利用完全二叉树的性质来做 题目 方法一&#xff1a;把该题当做一个普通的二叉树来做&#xff08;任何遍历都可以&#xff09; 例如&#xff1a;二叉树…

SpringCloud Gateway搭建Gateway 微服务应用实例

&#x1f600;前言 本篇博文是关于SpringCloud Gateway搭建Gateway 微服务应用实例&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您…

白捡一个存储型XSS

本文由掌控安全学院 - 杳若 投稿 起因 利用fofa搜索时发现 org"China Education and Research Network Center" && body"/register" 任意用户注册 在找到该CMS的时候发现存在任意用户注册的情况 http://xxxx.edu.cn/student/Register.ashx …

在已知的二维坐标里找到最接近的点

一、业务场景 最近在研发的项目&#xff0c;在做可视化层&#xff0c;在全球地图上&#xff0c;对我们的国家的陆地地图经纬度按照步长为1的间隔做了二维处理。在得到一组整数的点位信息后&#xff0c;需要将我们已有的数据库数据(业务项目)按照地址的经纬度&#xff0c;映射到…

肖sir__mysql之存储__012

mysql之存储 一、存储 1、什么是存储过程 定义&#xff1a;存储过程就是实现某个特定功能的sql语句的集合&#xff0c;编译后的存储过程会保存在数据库中&#xff0c;通过存储过程的名称可以反复的调用执行。 2、存储过程的优点? (1)存储创建后&#xff0c;可以反复的调用&am…

python项目127.0.0.1:5000访问失败

Windows环境下启动python项目&#xff0c;接口访问失败 解决&#xff1a; 方法1&#xff1a; 将host配成0.0.0.0&#xff0c;并用本机ip端口号访问 python代码示例&#xff1a; from flask import Flaskapp Flask(__name__)app.route(/index) def index():return helloapp.…

有了Spring为什么还需要SpringBoot呢

目录 一、Spring缺点分析 二、什么是Spring Boot 三、Spring Boot的核心功能 3.1 起步依赖 3.2 自动装配 一、Spring缺点分析 1. 配置文件和依赖太多了&#xff01;&#xff01;&#xff01; spring是一个非常优秀的轻量级框架&#xff0c;以IOC&#xff08;控制反转&…

Elasticsearch 8.10 中引入查询规则 - query rules

作者&#xff1a;Kathleen DeRusso 我们很高兴宣布 Elasticsearch 8.10 中的查询规则&#xff01; 查询规则&#xff08;query rules&#xff09;允许你根据正在搜索的查询词或根据作为搜索查询的一部分提供的上下文信息来更改查询。 什么是查询规则&#xff1f; 查询规则&…

vue框架实现表情打分效果

本来今天要实现这个功能 但是在网上查了一下 就csdn上有一个符合要求的 但是他竟然收费,痛心疾首啊 太伤白嫖党的心的 所以我手写了一个这个类似功能的代码 希望能帮到有这个需求的同学们 技术栈是VUE3 用其他技术栈的也可以看 因为逻辑很简单都一样的 // 问卷的虚拟数据 con…

如何用CRM软件系统管理企业客户

客户对企业的重要程度不言而喻。可以说&#xff0c;客户是企业收益的来源和可持续发展的基础&#xff0c;客户的转化率和保留率也与企业的发展息息相关。企业想要成功转化客户&#xff0c;需要经历客户跟踪、挖掘、维护等一系列过程。下面我们来说说&#xff0c;CRM客户管理系统…

Flask框架-2-[单聊]: flask-socketio实现websocket的功能,实现单对单聊天,flask实现单聊功能

一、概述和项目结构 在使用flask-socketio实现单聊时&#xff0c;需要将会话id(sid) 与用户进行绑定&#xff0c;通过emit(事件,消息,tosid) ,就可以把消息单独发送给某个用户了。 flask_websocket |--static |--js |--jquery-3.7.0.min.js |--socket.io_4.3.1.js |--template…

leetcode543 二叉树的直径

题目 给你一棵二叉树的根节点&#xff0c;返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 示例 输入&#xff1a;root [1,2,3,4,5] 输出&#xff1…

jmeterbeanshell调用jsonpath获取对应值

1.jmeter 新建线程组、Java Request、BeanShell Assertion、View Results Tree 2、在BeanShell Assertion中贴入代码&#xff1a; import org.apache.jmeter.extractor.json.jsonpath.JSONManager; import java.util.List; JSONManager js new JSONManager(); String jsonStr…

手机上比较好用的笔记软件使用哪一款?

手机已经成为我们日常生活不可或缺的一部分&#xff0c;它们伴随着我们的方方面面。在这部小小的设备中&#xff0c;我们可以完成许多任务&#xff0c;其中之一就是记录笔记。手机上的笔记软件如今多种多样&#xff0c;但在选择时&#xff0c;敬业签可能是你不容错过的选择。 …

多平台兼容性:跑腿系统开发的移动端和Web端技术选项

随着移动设备和Web浏览器的广泛使用&#xff0c;跑腿系统的开发需要考虑多平台兼容性。本文将讨论一些在开发跑腿系统的移动端和Web端时可用的技术选项&#xff0c;并提供示例代码以帮助您入门。 移动端技术选项&#xff1a; 1. React Native React Native是一个流行的移动应…