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

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

写在前面

这里给你的角色是一个后端开发工程师,会一点浅薄的前端三大件,且没有耐心去认真从零开始学习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,这就是你的新页面了

页面内容

html 复制代码
<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 里就好

相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端4 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED4 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常5 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程