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

云风的知识库
云风网前端重构,采用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.rhkb.cn/news/249517.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arduino Uno R3通过ESP-01S连接网络

一、材料准备 Arduino Uno R3开发板 1 USB串口通信数据线(Uno开发板使用) 1 ESP8266-01S Wi-Fi模块 1 ESP8266固件烧录下载器(烧录固件使用) 1 WiFi无线收发转接板(适用于ESP-01S、ESP-01) 杜邦线…

京津冀科技盛会:2024北京国际智能科技产业展会(世亚智博会)

随着中国经济的快速发展,我们已逐渐从高速增长阶段转向高质量发展阶段。这一转变不仅是经济发展的必然趋势,也是全面建设社会主义现代化国家的首要任务。在这个过程中,数字经济以其高创新性、强渗透性和广覆盖性的特点,成为了构建…

《Docker技术革命:从虚拟机到容器化,全面解析Docker的原理与应用-上篇》

文章目录 Docker为什么会出现总结 Docker的思想Docker历史总结 Docker能干嘛虚拟机技术虚拟机技术的缺点 容器化技术Docker和虚拟机技术的区别 Docker概念Docker的基本组成镜像(image)容器(container)仓科(repository)…

怎样做好Code Review

Code Review方案 定义 Code Review代码评审是指在软件开发过程中,通过对源代码进行系统性检查的过程。通常的目的是查找各种缺陷,包括代码缺陷、功能实现问题、编码合理性、性能优化等;保证软件总体质量和提高开发者自身水平 code review …

AI绘画探索人工智能的未来

🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-8fL64RHWVzwpzR6m {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

C++引用、内联函数、auto关键字介绍以及C++中无法使用NULL的原因

文章目录 一、引用1.1 引用概念1.2 引用特性1.3 常引用1.4 使用场景1.4.1 做参数1.4.2做返回值 1.5 引用和指针的区别1.6 小结一下 二、内联函数2.1 内联的概念2.2 内联的特性2.3 【面试题】 三、auto关键字(C11)3.1 类型别名思考3.2 auto简介 四、auto的使用细则4.1 基于范围的…

海外短剧系统国际短剧源码h5多语言版app挂载tiktok油管ins

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目 前言 一、海外短剧系统是什么? 二、海外短剧系统功能与运营方式介绍 1.系统功能 2.短剧APP运营方式 总结 前言 本文简单介绍海外短剧系统的功能&#xff…

leetcode hot100跳跃游戏Ⅱ

本题和上一题还是有不一样的地方,这个题中,我们需要记录我们跳跃的步数并尽可能的满足最小的跳跃步数到达终点。 那么我们还是采用覆盖范围的概念,但是我们需要两个,一个是在当前位置的覆盖范围,另一个是下一步的覆盖…

SpringCloud Gateway(4.1.0) 返回503:原因分析与解决方案

文章目录 一、环境版本二、原因分析三、解决方案 一、环境版本 Versionspring-cloud-dependencies2023.0.0spring-cloud-starter-gateway4.1.0Nacosv2.3.0 二、原因分析 在 Spring Cloud Gateway 的早期版本中,Ribbon 被用作默认的负载均衡器。随着Spring Cloud的…

Windows 7 x64 SP1 安装 Google Chrome 109.0.5414.120 (正式版本) (64 位)

1 使用 IE 浏览器 输入网址 Google Chrome 网络浏览器得益于 Google 智能工具,Chrome 现在更易用、更安全、更快速。https://www.google.cn/chrome/,点击下载 Chrome。 2 点击 接受并安装。 3 提示。 4 保存。 5 双击 运行 ChromeSetup.exe。 6 等待安…

【Spark系列1】DAG中Stage和Task的划分全流程

一、整体流程 每个Aciton操作会创建一个JOB,JOB会提交给DAGScheduler,DAGScheduler根据RDD依赖的关系划分为多个Stage,每个Stage又会创建多个TaskSet,每个TaskSet包含多个Task,这个Task就是每个分区的并行计算的任务。…

学习鸿蒙基础(2)

arkts是声名式UI DevEcoStudio的右侧预览器可以预览。有个TT的图标可以看布局的大小。和html的布局浏览很像。 上图布局对应的代码: Entry //入口 Component struct Index {State message: string Hello Harmonyos //State 数据改变了也刷新的标签build() {Row()…

PyFlink使用教程,Flink,Python,Java

环境准备 环境要求 Java 11 Python 3.7, 3.8, 3.9 or 3.10文档:https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/dev/python/installation/ 打开 Anaconda3 Prompt > java -version java version "11.0.22" 2024-01-16 LTS J…

自动驾驶:Apollo如何塑造人类的未来出行

前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言1. 什么是自定义指令?2. Apollo中的自定义指令2.1 查询中的自定…

7款免费的Midjourney平替平台

AI艺术生成器正在改变设计和内容的制作方式。像Midjourney这样的工具已经将困难的想法转化为令人惊叹的视觉效果,改变了创造力的运作方式。但是,AI艺术涵盖了许多风格和需求。这就是Midjourney替代方案变得重要的原因(特别是免费的替代方案&a…

2024年,AI 掀起数据与分析市场的新风暴

2024 年伊始,Kyligence 联合创始人兼 CEO 韩卿在其公司内部的飞书订阅号发表了多篇 Rethink Data & Analytics 的内部信,分享了对数据与分析行业的一些战略思考,尤其是 AI 带来的各种变化和革命,是如何深刻地影响这个行业乃至…

【极数系列】Flink环境搭建Linux版本 (03)

文章目录 引言01 Linux部署JDK11版本1.下载Linux版本的JDK112.创建目录3.上传并解压4.配置环境变量5.刷新环境变量6.检查jdk安装是否成功 02 Linux部署Flink1.18.0版本1.下载Flink1.18.0版本包2.上传压缩包到服务器3.修改flink-config.yaml配置4.启动服务5.浏览器访问6.停止服务…

python爬虫-多线程-数据库——WB用户

数据库database的包: Python操作Mysql数据库-CSDN博客 效果: 控制台输出: 数据库记录: 全部代码: import json import os import threading import tracebackimport requests import urllib.request from utils im…

【数据结构 08】红黑树

一、概述 红黑树,是一种二叉搜索树,每一个节点上有一个存储位表示节点的颜色,可以是Red或Black。 通过对任何一条从根到叶子的路径上各个节点着色方式的限制,红黑树确保没有一条路径会比其他路径长上两倍,因而是接进…

-1- Python环境安装

1、Python安装 1.1、Windows安装Python 进入python官网:Welcome to Python.org点击 download——>all releases;建议选择3.7.2版本(网页链接:Python Release Python 3.7.2 | Python.org);下拉&#xf…