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

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

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

相关文章

java生成dll,并利用c语言使用libcurl调用http接口

本文可能需要使用的环境和工具: c/ c和GCC编译器 (Windows) Cygwin或MinGW 本文运行环境为windows10,使用MinGW-W64-builds-4.2.0 curl-8.5.0 libcurl 可以在官网 http://curl.haxx.se/ 获得。 配置MinGW 将mingw.rar解压到D:,修改系统…

Java面试题之 IO(四)

Java面试题之 IO(四) 文章目录 Java面试题之 IO(四)随机访问流 文章来自Java Guide 用于学习如有侵权,立即删除 随机访问流 这里要介绍的随机访问流指的是支持随意跳转到文件的任意位置进行读写的 RandomAccessFile 。…

防火墙综合拓扑(NAT、双机热备)

实验需求 拓扑 实验注意点: 先配置双机热备,再来配置安全策略和NAT两台双机热备的防火墙的接口号必须一致如果其中一台防火墙有过配置,最好清空或重启,不然配置会同步失败两台防火墙同步完成后,可以直接在主状态防火墙…

浅谈WPF之UniformGrid和ItemsControl

在日常开发中,有些布局非常具有规律性,比如相同的列宽,行高,均匀的排列等,为了简化开发,WPF提供了UniformGrid布局和ItemsControl容器,本文以一个简单的小例子,简述,如何…

TSINGSEE青犀智能分析网关V4—让加油站迈入AI智能检测时代

一、背景与需求 中国目前建设加油站超过10万个,作为高危场所对于烟火,危险区域管控、消防器材等管理要求严格,稍有不慎即酿成大祸。由于春节临近,加油站各类人员进出频繁,安全意识较低,依靠普通监控人力的…

java常量和kotlin常量

在java中使用final声明常量在kotlin中使用const val声明常量 常量在编译为字节码后会直接把调用常量的地方直接替换为常量值,示例如下: public class ConstDemo {public static final String NAME "Even";private static final int ID 100…

海外云手机开辟企业跨境电商新道路

近几年,海外云手机为跨境电商、海外媒体引流、游戏行业等互联网领域注入了蓬勃活力。对于国内跨境电商而言,在亚马逊及其他平台上,短视频引流和社交电商营销成为最为有效的流量来源。如何通过海外云手机的助力,在新兴社交平台为企…

python二维高斯热力图绘制简单的思路代码

import numpy as np import matplotlib.pyplot as plt from scipy.ndimage import gaussian_filter import cv2# 生成一个示例图像 image_size 100 image np.zeros((image_size, image_size))# 在图像中心创建一个高亮区域 center_x, center_y image_size // 2, image_size …

【遥感专题系列】遥感影像信息提取之——人工目视解译

​遥感影像通过亮度值或像元值的高低差异(反映地物的光谱信息)及空间变化(反映地物的空间信息)来表示不同地物的差异,这是区分不同影像地物的物理基础。 ​人工解译是目前国内使用最多的一种影像提取方法,如…

力扣hot100 单词搜索 深度优先搜索 特殊字符判重

Problem: 79. 单词搜索 Code class Solution{int n, m;char[][] b;String word;int[] dx { 1, 0, -1, 0 };int[] dy { 0, 1, 0, -1 };public boolean exist(char[][] board, String word){b board;this.word word;n b.length;m b[0].length; // 以所有点作为起点来进行…

生词本----Python实例练习

题目描述 背单词是英语学习中最基础的一环,不少学生在背诵单词的过程中会整理自己的生词本,以不断拓展自己的词汇量。本实例要求编写生词本程序,该程序需具备以下功能。 (1)查看生词列表功能:输出生词本中…

系统分析师-22年-下午题目

系统分析师-22年-下午题目 更多软考知识请访问 https://ruankao.blog.csdn.net/ 试题一必答,二、三、四、五题中任选其中两题作答 试题一 (25分) 说明 某软件公司拟开发一套博客系统,要求能够向用户提供一个便捷发布自已心得,及时有效的…

腾讯云SDK并发调用优化方案

目录 一、概述 二、 网关的使用 2.1 核心代码 三、腾讯云SDK依赖包的改造 一、概述 此网关主要用于协调腾讯云SDK调用的QPS消耗,使得多个腾讯云用户资源能得到最大限度的利用。避免直接使用腾讯云SDK 时,在较大并发情况下导致接口调用异常。网关的工…

Yolo v8 入门学习之采用 coco128 数据集进行图片检测测试

示例入门代码 from ultralytics import YOLO import cv2 import matplotlib.pyplot as plt import matplotlib.image as mpimgdef test():# Create a new YOLO model from scratchmodel YOLO(yolov8n.yaml)# Load a pretrained YOLO model (recommended for training)model …

Redis -- 开篇热身,常用的全局命令

目录 Redis重要文件 启动停止脚本 配置文件 持久化文件存储目录 核心命令 set get 全局命令 keys exists del expire ttl 过期策略是如何实现的 定时器 type 小结 Redis重要文件 启动停止脚本 /usr/bin/redis-benchmark : 用于对Redis做性能基准…

SpringCloud_学习笔记_1

SpringCloud01 1.认识微服务 随着互联网行业的发展,对服务的要求也越来越高,服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢? 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff…

opencv学习 特征提取

内容来源于《opencv4应用开发入门、进阶与工程化实践》 图像金字塔 略 拉普拉斯金字塔 对输入图像进行reduce操作会生成不同分辨率的图像,对这些图像进行expand操作,然后使用reduce减去expand之后的结果,就会得到拉普拉斯金字塔图像。 …

【开源操作系统】上海道宁为您带来稳定、安全、开源和易用的操作系统——Ubuntu,为您的数字化生活保驾护航

Ubuntu是 源于非洲的一种传统价值观 意为“人性、关爱和共享” 这种价值观在 开源、稳定、安全、易用的 Ubuntu操作系统中 得到了完美的体现 除此之外,Ubuntu还具有 强大的安全性 它自带了诸多安全功能 如防火墙、加密文件系统等 可以有效地保护用户的隐私…

你ping一下,服务器累成狗--第二篇

你ping一下,服务器累成狗-目录篇文章浏览阅读1.7k次,点赞65次,收藏20次。我们的电脑怎么干活的https://blog.csdn.net/u010187815/article/details/135796967 你ping一下,服务器累成狗--第一篇文章浏览阅读62次,点赞6…

C#用正则表达式验证格式:电话号码、密码、邮编、手机号码、身份证、指定的小数点后位数、有效月

正则表达式在程序设计中有着重要的位置,经常被用于处理字符串信息。 用Regex类的IsMatch方法,使用正则表达式可以验证电话号码是否合法。 一、涉及到的知识点 Regex类的IsMatch方法用于指示正则表达式使用pattern参数中指定的正则表达式是否在输入字符串…