Vue的UI网页创建和引入Element组件

2023-10-27

第一步,新创建一个文件夹用来生成vue项目

 

 第二步,进入这个文件夹,在路径栏输入CMD打开DOS窗口

 第三步,打开cmd窗口,输入命令:vue ui

 第四步,输入命令后运行,浏览器会自动打开vue ui 网页

 第五步,点击仪表盘上方的文本框,选择Vue项目管理器

 第六步,选择创建

 第七步,选择正确的创建路径(第一步的新建的文件夹)

 第八步,输入项目名(自定义),取消Git下的初始化git仓库

 第九步,点击下一步选择手动

 第十步,选择以下的配置

 第十一步,选择以下的配置

 第十二步,选择创建项目


不保存预设

 第十三步,观察是否成功(创建时间根据电脑配置情况决定)

 第十四步,点击依赖

 第十五步,点击安装依赖

第十六步,安装axios(点击安装按钮后可能没什么反应,等待就好)

 第十七步,观察是否安装成功

 第十八步,点击任务,之后点击serve

 第十九步,点击运行

 第二十步,观察是否成功运行

 第二十步,打开第一步创建的文件夹查看是否成功创建

 第二十一步,在此目录的路径框输入CMD打开DOS窗口,输入npm i element-ui -S

第二十二步,观察是否成功运行命令第二十三步,输入npm run serve运行项目

 第二十四步,打开Element网站,点击快速上手

Element - The world's most popular Vue UI framework

 鼠标滚轮下滑找到引入Element,复制以下代码:

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

 第二十五步,打开VSCcode,找到main.js文件

 第二十六步,复制的三条代码粘贴在main.js文件中

 以上,通过UI界面创建项目和引入Element组件全部完毕

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue的UI网页创建和引入Element组件 的相关文章

随机推荐

  • Windows键盘对应苹果的Option键

    用mini mac的用户 如果用的是windows的键盘 那么开发时功能键或多或少会有一些不适应 特别是在xCode4中 我就一直没有找到option对应的windows键 苹果有介绍 http support apple com kb H
  • Matlab学习——求解微分方程(组)

    介绍 1 在 Matlab 中 用大写字母 D 表示导数 Dy 表示 y 关于自变量的一阶导数 D2y 表示 y 关于自变量的二阶导数 依此类推 函数 dsolve 用来解决常微分方程 组 的求解问题 调用格式为 X dsolve eqn1
  • 自定义指令 v-loading

    1 在src下创建directive文件夹 2 在directive文件夹下创建loading文件夹 3 loading文件夹内创建index js和loading vue 目录图 4 index js src directive load
  • QtCreator 快捷键问题记录

    我目前用的QtCreator Mac版8 0 0 具体信息如下 一般来说QtCreator的快捷键和设置项在windows下也是一样的 在QtCreator gt Options gt Environment gt Keyboard中可以找
  • SpringBoot整合office转换与预览

    文章目录 一 介绍 1 简介 2 aspose简介 3 jodconverter简介 二 springboot整合aspose实战 1 前期依赖准备 1 1 介绍 1 2 项目直接引入jar包 1 3 maven添加本地包 2 office
  • 使用Retrofit上传实体类到服务端(笔记)

    一 服务端 1 需要对参数用 RequestBody这个注解进行修饰 SpringBoot会自动将前端传过来的JSON数据反序列化成Java对象 登录 param requestVo return PostMapping value log
  • DOTA数据集标签txt文件转为xml文件

    文章目录 1 txt文件格式 2 xml文件格式 3 一般的txt到xml的转换思路 4 最终使用的txt到xml转换的脚本 5 之后可能用到的xml转换到txt的脚本 1 txt文件格式 DOTA数据集的txt文件格式如下 其中 每一行的
  • Springboot整合SpringSecurity

    使用Basic认证模式 1 maven依赖
  • 26.JavaWeb-SpringSecurity安全框架

    1 SpringSecurity安全框架 Spring Security是一个功能强大且灵活的安全框架 它专注于为Java应用程序提供身份验证 Authentication 授权 Authorization 和其他安全功能 Spring S
  • csv反序列化_序列化与反序列化

    toc 定义 序列化 将对象或数据结构转换成约定格式数据的过程 反序列化 将约定格式的数据转换成对象或数据结构的过程 通常我们将这种 约定格式的数据 称之为序列化协议 根据协议的特点序列化协议可以细分为文本序列化协议 以下简称文本协议 和二
  • 网线直连NUC调试并使用VSCode实现X11转发(Jetson,树莓派适用)

    1 场景描述 此种场景下 NUC与PC机通过一根网线进行连接 网线负责PC与NUC进行通信 SSH连接 同时可以将NUC的图形界面转发到PC 远程桌面或X11窗口转发均可 方便战队成员在没有显示器的场景下对NUC进行调试 配置示例如下图所示
  • springboot微服务前端传参数至后端的几个方式,@RequestBody如何传入多个参数@RequestParam

    一 问题 在接口测试工具中 常常要传入参数 初学者 也就是我菜鸡经常传错参数 不明白在Query还是Body里面传参 以及测试工具 AxxPoxx 测试下载接口的时候为什么发送数据成功却没有下载文档下来 后端参数传输方式 二 解决 quer
  • JNDI 资源

    第 6 章 JNDI 资源 Java 命名和目录接口 Java Naming and Directory Interface JNDI 是一种应用编程接口 application programming interface API 用于访问
  • "NO 3D support is available from the host"

    https forums opensuse org showthread php 494522 No 3d Support or graphics accelleration http askubuntu com questions 537
  • 【项目设计】高并发内存池 (四)[pagecache实现]

    C 学习历程 入门 博客主页 一起去看日落吗 持续分享博主的C 学习历程 博主的能力有限 出现错误希望大家不吝赐教 分享给大家一句我很喜欢的话 也许你现在做的事情 暂时看不到成果 但不要忘记 树 成长之前也要扎根 也要在漫长的时光 中沉淀养
  • 解决出现“raw.githubusercontent.com (raw.githubusercontent.com)

    服务器安装软件的时候出现 正在连接 raw githubusercontent com raw githubusercontent com 0 0 0 0 443 失败 拒绝连接 是因为改网址是被墙的 但是还是需要安装软件怎么办 打开多个地
  • 固态U盘量产:群联PS3111主控开卡量产工具使用教程

    PS3111开卡量产工具是一款专门用来进行量产的软件工具 下面将为大家提供使用教程 以帮助大家更加顺利地进行U盘量产 1 下载PS3111开卡量产工具 首先 需要在量产部落官网下载该工具并解压到电脑上 2 连接U盘 将需要进行量产的固态U盘
  • C++ opencv视频处理与保存

    1 视频属性类型 视频有很多的属性 有时长 分辨率 帧宽度 帧高度 帧速率等 视频属性中 由于国内互联网视频网站的定义 我们对分辨率的区分有些误区 所以这里重新介绍一下视频的分辨率 至于其他属性 一般不会有什么误区 分辨率 通常国际标准 我
  • 大语言模型高质量提示词最佳实践

    大语言模型高质量提示词最佳实践 一 提供更清晰的指令 使用大语言模型 类似ChatGPT Bard等工具 的过程中 一个关键的技巧是能够给出清晰和明确的指令 大语言模型的运作方式是根据提供的输入 预测接下来应该生成什么内容 因此 给出明确的
  • Vue的UI网页创建和引入Element组件

    第一步 新创建一个文件夹用来生成vue项目 第二步 进入这个文件夹 在路径栏输入CMD打开DOS窗口 第三步 打开cmd窗口 输入命令 vue ui 第四步 输入命令后运行 浏览器会自动打开vue ui 网页 第五步 点击仪表盘上方的文本框