当前位置: 首页 > news >正文

Vue3 前端项目新建步骤记录

学习现有的工具来自己配置一个admin-web

主要步骤

  1. 新建一个基于vue3, 由vite的项目
  2. 开发环境配置(webstorm)
  3. 跑起来的hello world
  4. 基本布局
  5. API引入
  6. 登录功能
  7. 导航菜单动态生成
  8. 单点登录的token刷新

新建一个基于vue3, 由vite的项目

首先新建项目.

# 使用vite create 新建vue3 项目
npm create vite@latest
# 安装依赖
npm install
# dev运行
npm run dev

图片

跑起来的hello world

图片

基本布局

选用常用上中下布局及侧边栏布局。
图片

引入 devui-vue 框架来做

npm i vue-devui @devui-design/icons devui-theme

设置App.vue


  1. API引入
  2. 登录功能
  3. 导航菜单动态生成
  4. 单点登录的token刷新
http://www.sczhlp.com/news/8115/

相关文章:

  • 调研avalonia框架2能否使用webView
  • Responsive Web Design5
  • 关于(亚马逊云)AWS-RDS 的外网(Navicat)连接配置
  • Responsive Web Design 4
  • 五项满分,天翼云息壤智算一体机斩获佳绩!
  • 如何打印好日志
  • Windows本地快速搭建SFTP文件服务器
  • Responsive Web Design 2
  • Txt2BIM
  • Responsive web design 1
  • 完整教程:Redis 核心概念、命令详解与应用实践:从基础到分布式集成
  • 主流AI编程/IDE工具有哪些?如何选择?2025最新深度指南
  • SQL查询
  • 综合实力最弱的10所985大学有哪些?它们有哪些强势学科?
  • x86-64 汇编指令详细参考手册
  • Jaeger 分布式追踪 系统详解
  • 给域名加SSL证书步骤
  • iZotope RX 11 mac+win安装包
  • AD7616的国产代替兼容料——LHA6916
  • 盒马面试 记录 3 面 + hr 面
  • 表格数据深度学习算法NODE技术解析
  • OpenCV入门(12):OpenCV与Qt联合实现的图片浏览器
  • 机器学习之线性回归。
  • 大模型性能测试完全指南:从原理到实践
  • 快速写出一个截图网页的爬虫程序
  • GPT-5发布:ModelGate率先支持,探索新一 代AI模型的强大功能
  • Typora 设置锚点跳转
  • 【UDK2018】环境配置
  • 电商行业绩效考核的一般性建议
  • 洛谷P9838 挑战 NPC IV