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

云风的知识库
云风网前端重构,采用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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32存储左右互搏 QSPI总线读写FLASH W25QXX

STM32存储左右互搏 QSPI总线读写FLASH W25QXX FLASH是常用的一种非易失存储单元,W25QXX系列Flash有不同容量的型号,如W25Q64的容量为64Mbit,也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库Qual SPI总线操作W25Q各型号FLASH的例程。 W25Q…

游泳耳机要怎么选购?一篇文章告诉你如何选购游泳耳机

在进行运动时享受音乐的乐趣是许多人的喜好,对于在地面展开的一般运动,选择耳机相对简单,但若是涉及水中游泳,我们就需要一款具备防水性能的专业游泳耳机。市面上已有数款针对游泳设计的防水耳机,本文将为您详细介绍如…

【解刊】审稿人极其友好!中科院2区SCI,3个月录用,论文质量要求宽松!

计算机类 • 高分快刊 今天带来Springer旗下计算机领域高分快刊,有投稿经验作者表示期刊审稿人非常友好,具体情况一起来看看下文解析。如有投稿意向可重点关注: 01 期刊简介 Complex & Intelligent Systems ✅出版社:Sprin…

光杆司令如何部署大模型?

1、背景 今天这种方式非常贴合低配置笔记本电脑的小伙伴们, 又没有GPU资源, 可以考虑使用api方式,让模型服务厂商提供计算资源 有了开放的api,让你没有显卡的电脑也能感受一下大模型管理知识库,进行垂直领域知识的检索和问答.算是自己初步玩一下AI agent 之前有写过一篇《平民…

Java二维码图片识别

前言 后端识别二维码图片 代码 引入依赖 <dependency><groupId>com.google.zxing</groupId><artifactId>javase</artifactId><version>3.2.1</version></dependency><dependency><groupId>com.google.zxing<…

软件压力测试:探究其目的与重要性

随着软件应用在各行各业中的广泛应用&#xff0c;确保软件在高负载和极端条件下的稳定性变得至关重要。软件压力测试是一种验证系统在不同负载条件下的性能和稳定性的方法。本文将介绍软件压力测试的目的以及为什么它对软件开发和部署过程至关重要。 验证系统性能的极限&#x…

二、人工智能之提示工程(Prompt Engineering)

黑8说 岁月如流水匆匆过&#xff0c;哭一哭笑一笑不用说。 黑8自那次和主任谈话后&#xff0c;对这个“妖怪”继续研究&#xff0c;开始学习OpenAI API&#xff01;关注到了提示工程(Prompt Engineering)的重要性&#xff0c;它包括明确的角色定义、自然语言理解&#xff08;…

10个关键字让你的谷歌竞价排名瞬间飙升-华媒舍

在现代社会中&#xff0c;搜索引擎已经成为获取信息的主要途径之一。在这其中&#xff0c;谷歌搜索引擎以其强大的搜索算法和智能化的用户体验而闻名。对于企业主来说&#xff0c;如何提高在谷歌搜索结果中的排名&#xff0c;对于他们的品牌推广和获取潜在客户非常重要。 1. 关…

springboot137欢迪迈手机商城设计与开发

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

Shell脚本——免交互

目录 一、Here Document免交互 1、免交互概述 2、语法格式 2.1示例&#xff1a;免交互方式实现对行数的统计&#xff0c;将要统计的内容置于标记EOF之间&#xff0c;直接将内容传给wc-l来统计 3、变量设定 ①变量图换成实际值 ②整行内容作为变量并输出结果 ③使输出内…

二、图像色彩空间转换

一、色彩空间头文件 在项目的头文件中&#xff0c;右击添加&#xff0c;新建项 例如我的是testopencv.h 自定义一个头文件&#xff0c;用于图片色彩空间的转换和保存操作 定义个Colors类 里面有一个函数声明void colorspaces(Mat& image);&#xff0c;用于实现图片的色…

第九节HarmonyOS 常用基础组件22-Marquee

1、描述 跑马灯组件&#xff0c;用于滚动展示一段单行文本&#xff0c;仅当文本内容宽度超过跑马灯组件宽度时滚动。 2、接口 Marquee(value:{start:boolean, step?:number, loop?:number, fromStart?: boolean ,src:string}) 3、参数 参数名 参数类型 必填 描述 st…

SparkStreaming---入门

文章目录 1.SparkStreaming简介1.1 流处理和批处理1.2 实时和离线1.3 SparkStreaming是什么1.4 SparkStreaming架构图 2.背压机制3.DStream案例实操 1.SparkStreaming简介 1.1 流处理和批处理 流处理和批处理是两种不同的数据处理方式&#xff0c;它们在处理数据的方式和特点…

【Midjourney】AI绘画案例(1)龙年吉祥神兽

说明&#xff1a; 1、文中图片版权均为Midjourney所有&#xff0c;请勿用作商业用途。 2、文中图片均经过 Upscale x 4 处理。 3、由于模型原因&#xff0c;某些图片存在暇玼。 1、吉祥神兽——天马&#xff08;独角兽&#xff09; 天马消灾星。 提示词 Prompt: Sky Unicor…

Vue.js 学习14 集成H265web.js播放器实现webpack自动化构建

Vue.js 学习14 集成H265web.js播放器实现webpack自动化构建 一、项目说明1. H265web.js 简介2. 准备环境 二、项目配置1. 下载 H265web.js2. 在vue项目里引入 H265web3. 设置 vue.config.js 三、代码引用1. 参照官方demo &#xff0c; 创建 executor.js2. 在 vue 页面里引用htm…

你的MiniFilter安全吗?

简介 筛选器管理器 (FltMgr.sys)是Windows系统提供的内核模式驱动程序, 用于实现和公开文件系统筛选器驱动程序中通常所需的功能; 第三方文件系统筛选器开发人员可以使用FltMgr的功能可以更加简单的编写文件过滤驱动, 这种驱动我们通常称为MiniFilter, 下面是MiniFilter的基本…

【Vue】vue项目中使用tinymce富文本组件(@tinymce/tinymce-vue)

【Vue】vue项目中使用tinymce富文本组件&#xff08;tinymce/tinymce-vue&#xff09; 一、安装二、前期准备工作1、去[官网](https://www.tiny.cloud/get-tiny/language-packages/)下载语言包&#xff1b;2、将下载的语言包复制到项目中的assets&#xff08;存放路径您随意&am…

TensorFlow2实战-系列教程5:猫狗识别2------数据增强

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 猫狗识别1 数据增强 猫狗识别2------数据增强 猫狗识别3------迁移学习 1、猫狗识别任…

通过ETLCloud CDC构建高效数据管道解决方案

随着企业数据规模的快速增长和多样化的数据&#xff0c;如何高效地捕获、同步和处理数据成为了业务发展的关键。本文将介绍如何利用ETLCloud CDC技术&#xff0c;构建一套高效的CDC数据管道&#xff0c;实现实时数据同步和分析&#xff0c;助力企业实现数据驱动的业务发展。 一…

基于Java SSM框架实现影院购票系统项目【项目源码+论文说明】

基于java的SSM框架实现影院购票系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识&#…