当前位置： 首页 > article >正文

vue入门项目

article 2025/1/11 15:20:08

vue入门项目

  • 1、创建前端脚手架
  • 2、安装依赖：
  • 3、启动项目
  • 4、整合技术
  • 5、画面布局：参照rco-design
  • 6、配置vue-router 路由跳转
  • 7、整合echarts渲染表
  • 8、完善细节问题

1、创建前端脚手架

node -v  --查看node版本
npm create vite

在这里插入图片描述

2、安装依赖：

用vs-code打开该项目 frontend-app

–terminal 终端 运行 npm install


npm install

3、启动项目

npm run dev

在这里插入图片描述

在这里插入图片描述

4、整合技术

arco-design-vue (网易，UI框架 element-ui） 官网
axios (HTTP 库–发请求） 官网
Echarts (可视化图表库 ） 官网

安装依赖

npm install axios
npm install echarts --save
npm install --save-dev @arco-design/web-vue

//三个可以一起引入
npm install axios echarts  @arco-design/web-vue

在这里插入图片描述
查看是否已引入
在这里插入图片描述
在main.js中引入

import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

app.use(ArcoVue);

在这里插入图片描述

5、画面布局：参照rco-design

6、配置vue-router 路由跳转

7、整合echarts渲染表

8、完善细节问题

在这里插入图片描述


http://www.kler.cn/a/488249.html

相关文章：

  • 有收到腾讯委托律师事务所向AppStore投诉带有【水印相机】主标题名称App的开发者吗
  • Vue2：el-table中的文字根据内容改变颜色
  • hive数据迁移
  • 【简博士统计学习方法】第1章：2. 统计学习方法的基本分类
  • Huawei Cloud EulerOS上安装sshpass
  • 【CSS】设置滚动条样式
  • Git之提交和撤销操作
  • Zstandard压缩算法
  • 如何解决HTML和CSS相关的问题，什么情况下会导致元素被遮挡？
  • Qt官方下载地址
  • 【Azure Redis 缓存】Azure Redis 遇见的连接不上问题和数据丢失的情况解答
  • RT-DETR融合[AAAI2025]的ConSeg中的模块
  • 慧知开源充电桩平台：优势与国际化之路
  • Java 原型模式、建造者模式、单例模式
  • ESP32作为Wi-Fi STA模式的测试
  • CLIP代码相关问题
  • Python中用Open3D 可视化的点云窗口快捷键
  • 荒腔走板Mac电脑本地部署 LLM
  • MySQL使用C语言连接
  • 使用SPI机制加载实现类
  • 一文流：Maven精讲
  • 深入探索 ScottPlot.WPF：在 Windows 桌面应用中绘制精美图表的利器
  • ASP.NET Core 实现微服务 -- Polly 服务降级熔断
  • 深入浅出负载均衡：理解其原理并选择最适合你的实现方式
  • Node 之 Stream 深度剖析：从原理到项目实战应用场景全解
  • 网络安全有哪些细分方向？零基础学Web安全需要掌握的知识（附系统路线+工具笔记）