个人建站前端篇(一)项目准备初始化以及远程仓库连接

news2024/11/16 9:39:47

云风的知识库
云风网前端重构,采用vue3.0+vite + antd框架,实现前后端分离,实现网站的SEO优化,实现网站的性能优化

vite创建vue项目以及前期准备

Vite 需要 Node.js 版本 18+,20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

既然采用vite,那么需要安装vite的依赖,执行以下命令:

npm create vite@latest webSiteVue -- --template vue
或者
npm create vite@latest

选择vue + ts组合,这个根据个人需求
在这里插入图片描述

安装依赖,项目运行

npm install
npm run dev

在这里插入图片描述

新建远程仓库并建立连接

在gitee上创建一个新的仓库,命名为website
在这里插入图片描述

打开git bash,进入webSiteVue文件夹,执行以下命令

git init
git remote add origin https://gitee.com/niech_project/website.git
git pull origin master

这样就建立了远程仓库连接

这里想要快速梳理项目结构,可以安装mddir实现

npm install mddir -g 

项目根目录下执行以下命令

PS D:\webPro\vite\webSiteVue> mddir

这里项目根目录会生成directory.md文件,里面会列出项目的目录结构,方便我们查看项目结构。

修改readme.md文件,添加项目介绍

# website

#### 介绍
vue版本的云风网

#### 安装教程

1. npm create vite@latest

#### 使用说明

1. npm install
2. npm run dev
3. npm run build

#### 项目架构
1. npm install mddir -g
2. mddir
3. 生成directoryList.md文件,查看目录结构
|-- 项目架构
    |-- .gitignore
    |-- index.html
    |-- LICENSE
    |-- package-lock.json
    |-- package.json
    |-- README.en.md
    |-- README.md
    |-- tsconfig.json
    |-- tsconfig.node.json
    |-- vite.config.ts
    |-- .vscode
    |   |-- extensions.json
    |-- public
    |   |-- vite.svg
    |-- src
        |-- App.vue
        |-- main.ts
        |-- style.css
        |-- vite-env.d.ts
        |-- assets
        |   |-- vue.svg
        |-- components
            |-- HelloWorld.vue

新建dev分支,提交代码到gitee仓库,执行以下命令,提交代码到gitee仓库,并推送到远程仓库。

git checkout -b dev
git add .
git commit -m "init project"
git push origin dev

准备工作就绪,可以进行代码编写开发了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1420145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

su模型库免费下载哪家好?

选择SU模型库免费下载的网站,需要根据个人的需求和偏好进行评估。以下是一些热门的SU模型库免费下载网站,供您参考: ①建e网:这是一个专业的室内设计资源平台,包括各种类型的SU模型,如家装、公装、商业空间…

linux监控工具

官方吹的牛逼 LATEST BLOG POST: On the same workload, Netdata uses 35% less CPU, 49% less RAM, 12% less bandwidth, 98% less disk I/O, and is 75% more disk space efficient on high resolution metrics storage, while providing more than a year of overall reten…

vue3-深入组件-透传属性

透传属性 (透传 attribute) 什么是透传属性(透传 attribute)? 传递给一个组件,却没有被该组件声明为 props 或 emits 的 attribute 或者是事件监听器,例如 class style id 等。 属性继承 当一个组件以单…

面试:问js的forEach和map的区别

前言 为什么要写这么一篇文章,原因是今天下午水群的时候,有个小伙伴分享自己的面试题,其中一个是foreach和map的区别,其实是蛮简单,蛮基础的一道题,但是他是这么回答的 一个会改变原数组,一个不…

GitCode|部分项目开源代码

1.EasyKeyboard 基于MFC的简单软键盘,使用vs2017开发 PangCoder / EasyKeyboard GitCode基于Windows平台的软键盘,使用VS2017开发,使用MFC框架https://gitcode.net/qq_36251561/easykeyboard 2.EncoderSimulator 基于WPF应用的编码器模拟工…

什么是客户关系管理?流程是什么样的?

客户关系管理的目的是什么? 客户关系管理(CRM)使企业能够降低成本并增加利润。CRM系统用于组织、自动化和跟踪业务流程,例如潜在客户生成、营销、预测、销售、投资回报率测量和客户服务。因此,CRM系统的目的是促进这些领域的整合,并衡量和跟…

Xds (eXtensible Discovery Service)理解

Xds (eXtensible Discovery Service)理解 概念介绍 XDS:全称是 eXtensible Discovery Service,中文译为”可扩展的服务发现“。是一个扩展性的协议,可以用于配置和控制 Envoy 代理的各个方面,包括路由规则…

异步任务的一些思考

前言 XXL-Job部署教程 项目中,必然少不了数据的导入导出,针对数据的导入导出简单复盘一下。 为了不占用资源消耗时间,影响用户体验,大量数据的导入导出一般都是异步执行 导入的时候,如果数据量很大,一次…

研发日记,Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结 前言 见《研发日记,Matlab/Simulink避坑指南(一)——Data Store Memory模块执行时序Bug》 见《研发日记,Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《…

安科瑞Acrel-2000ES储能能量管理系统——安科瑞赵嘉敏

一、产品说明 安科瑞Acrel-2000ES储能能量管理系统具有完善的储能监控与管理功能,涵盖了储能系统设备(PCS、BMS、电表、消防、空调等)的详细信息,实现了数据采集、数据处理、数据存储、数据查询与分析、可视化监控、报警管理、统计报表等功能。在高级应…

Qt开源版 vs 商业版 详细比较!!!!

简单整理Qt开源版与商业版有哪些差别,仅供参考。 简单对比 开源版商业版许可证大部分采用对商业使用不友好的LGPLv3具备商业许可证保护代码专有许可证相关大部分模块使用LGPLv3和部分模块使用GPL组成仅第三方开源组件使用Qt的其他许可证Qt模块功能支持支持技术支持…

机器人顶会IROS,ICRA论文模板下载及投稿须知,以及机器人各大会议查询

一、背景 机器人方向,不止期刊TRO,TASE,RAM,RAL上的成果被认可,机器人顶会上的成果也是非常好的。当决定要写一篇IROS论文时,结果IROS论文模板和投稿须知找了半天才找到,且意外发现了一个特别好…

java参数校验,完整报错信息返回

业务要求返回信息中展示所有的异常信息&#xff1a; private void checkParams(DevicesTelemetryToExcelInfoDTO params) {List<String> warnList new ArrayList<>();Set<String> devicesUuidSet new HashSet<>();params.getDevicesTelemetryToExce…

go基础-垃圾回收+混合写屏障GC全分析

垃圾回收(Garbage Collection&#xff0c;简称GC)是编程语言中提供的自动的内存管理机制&#xff0c;自动释放不需要的对象&#xff0c;让出存储器资源&#xff0c;无需程序员手动执行。 Golang中的垃圾回收主要应用三色标记法&#xff0c;GC过程和其他用户goroutine可并发运行…

【linux】-centos7版本前后-变化篇

1.centos7版本前后区别 首先文件系统变化&#xff0c;由EXT4&#xff0c;变为XFS格式。可支持容量500TB的文件&#xff0c;而6代仅能支持16TB。首个进程变为systemd, 替换了熟悉的init进程。它的特点是功能强大&#xff0c;体积也很强大。 systemd给我们带来了一个全家桶命令&…

ESP8266 传感器搭配 Node-RED实时显示数据,邮件告警 实验

前言 esp8266 12f,wif模块,接倾斜传感器,火焰传感器,烟雾传感器,水浸传感器,蜂鸣器。通过mqtt发布数据,并使用node-red实时获取数据,显示到页面上。并且通过邮件和页面两种方式报警。 需求如下: ①倾斜传感器:监测是否保持平衡。UI界面显示平衡度。如果不平衡,UI界…

【ArcGIS微课1000例】0099:土地利用变化分析

本实验讲述在ArcGIS软件中基于两期土地利用数据,做土地利用变化分析。 文章目录 一、实验描述二、实验过程三、注意事项一、实验描述 对城市土地利用情况进行分析时,需要考虑不同时期土地利用图层在空间上的差异性,如农用地转建筑用地的空间变化。而该变化过程表现为各时期…

Sentinel之道:流控模式解析与深度探讨

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Sentinel之道&#xff1a;流控模式解析与深度探讨 前言流控模式基础&#xff1a;Sentinel的多面光环直接模式&#xff1a;规则之箭&#xff0c;直指核心直接模式的核心概念&#xff1a;实际案例演示&a…

STM32——I2C

通信协议见&#xff08;STM32——SPI&#xff09; 一、I2C协议 1.1 I2C协议介绍&#xff1b; I2C是&#xff08;Inter IC Bus&#xff09;是由Philips公司开发的一种通用数据总线&#xff1b; 有多根通信线&#xff1b; 一根SDA&#xff08;串行通信线&#xff09;&#xf…

如何用Docker+jenkins 运行 python 自动化?

1.在 Linux 服务器安装 docker 2.创建 jenkins 容器 3.根据自动化项目依赖包构建 python 镜像(构建自动化 python 环境) 4.运行新的 python 容器&#xff0c;执行 jenkins 从仓库中拉下来的自动化项目 5.执行完成之后删除容器 前言 环境准备 Linux 服务器一台(我的是 CentOS7)…