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

当一个后端下载了一个VUE开源项目,怎么开始着手玩一下

当后端想玩一玩前端的时候

  • 写在前面
    • 1、你需要安装、学习的东西
    • 2、开始一个项目
      • 2.1、用vs code打开项目目录
      • 2.2、安装项目依赖
      • 2.3、启动项目
    • 3、新建一个你自己的页面
    • 4、element怎么用

写在前面

这里给你的角色是一个后端开发工程师,会一点浅薄的前端三大件,且没有耐心去认真从零开始学习vue,然后你现在又想启动前端项目

这里我下载的是VUE3、TS、Element-plus项目

1、你需要安装、学习的东西

我这里是在windows下操作,且只列出下载/安装项,至于具体步骤自行百度

  • node.js
    js项目管理工具,里面包含了npm。记得配置npm环境变量,保证全局可用。
    这里记得指定国内npm镜像,否则下载依赖速度很慢 npm config set registry https://npm.aliyun.com

  • VS code
    前端编码工具,现在大多数前端都是用这个吧

  • Vue - Official
    这是个vue3的插件,在vs code里面安装

  • 能解答你疑惑的AI
    通义千问、deepseek

  • Vue基础得学一下
    vue官方文档

  • Element-plus 了解一下
    Element-plus官方文档

  • 阿里巴巴免费图标库
    图标素材这里找:https://www.iconfont.cn/

2、开始一个项目

2.1、用vs code打开项目目录

在这里插入图片描述

2.2、安装项目依赖

先打开vs code的终端
在这里插入图片描述
输入npm install
在这里插入图片描述

2.3、启动项目

输入npm run dev
在这里插入图片描述

3、新建一个你自己的页面

既然是下载的开源项目,那这里我就默认项目基本框架已经搭建好了

找到项目中的src/views目录,在下面新建一个xxx.vue,这就是你的新页面了
在这里插入图片描述
页面内容
在这里插入图片描述

<template>
</template>

<script setup lang="ts">
</script>

<style>
</style>

4、element怎么用

这里默认你的项目里面已经有element-plus的依赖了,没有的话参考这里 https://element-plus.org/zh-CN/guide/quickstart.html

找到element的组件库
在这里插入图片描述
看到喜欢的就点这两个,一个是复制、一个是查看详细代码
在这里插入图片描述
一般这个代码里面包含了template、script ,把这两个分别复制到你的xxx.vue文件里对应的template、script 里就好
在这里插入图片描述

http://www.dtcms.com/a/25820.html

相关文章:

  • 【DeepSeek服务器部署全攻略】Linux服务器部署DeepSeek R1模型、实现API调用、搭建Web页面以及专属知识库
  • git 操作 已经 commit 但是没有 push 怎么办
  • 国产编辑器EverEdit - 独门暗器:自动监视剪贴板内容
  • 嵌入式0xDEADBEEF
  • 用python进行二分法查找(python实例三十)
  • 【算法通关村 Day5】Hash和队列的经典问题
  • 敏捷开发06:用户故事估算方法介绍
  • DDD领域驱动开发第2讲:领域驱动开发在货代订单业务的实践
  • 爬虫获取的数据能用于哪些数据分析?
  • 基本控制环节的幅频和相频特性
  • 期权帮|场外个股期权杠杆与风险分析
  • Vue 3 30天精进之旅:Day 29 - 项目实战
  • 拦截器VS过滤器:Spring Boot中请求处理的艺术!
  • 深入解析NoSQL数据库:从文档存储到图数据库的全场景实践
  • 了解几个 HTML 标签属性,实现优化页面加载性能
  • HTML/CSS中后代选择器
  • 目标跟踪(Object Tracking) vs. 目标识别(Object Recognition)
  • 【基础架构篇十五】《DeepSeek权限控制:RBAC+ABAC混合鉴权模型》
  • 第十篇:电源设计的“能量矩阵”——无线充电与碳化硅LLC谐振
  • 一文读懂Docker之Docker Compose
  • ARM64 Trust Firmware [五 ]
  • 什么是 BFC
  • 实现历史数据的插入、更新和版本管理-拉链算法
  • Aseprite详细使用教程(14)——像素画明亮画法
  • 机器学习小项目之鸢尾花分类
  • A-LOAM源代码解析(一)
  • 6121A 音频分析仪
  • Vue的双向数据绑定和React的单向数据流在处理对象数组时的行为
  • anconda安装教程超详细图文教程(附安装包)【2025】最新anconda3安装教程
  • 【Java基础】Java 构造器