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

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

Java抽取Hive、HDFS元数据信息

文章目录 一、技术二、构建SpringBoot工程2.1 创建maven工程并配置 pom.xml文件2.2 编写配置文件 application.yml2.3 编写配置文件 application.propertites2.4 开发主启动类2.5 开发配置类 三、测试抽取Hive、HDFS元数据四、将抽取的元数据存储到MySQL4.1 引入依赖4.2 配置ap…

防火墙综合拓扑(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; // 以所有点作为起点来进行…

oracle rman duplicate创建测试库

1.在目标端建立参数文件,并启动到nomount,如果测试库的文件存放路径和生产不一致,配置db_file_name_convert和log_file_name_convert 2.拷贝生产的密码文件到目标端,配置生产到目标端的tnsnames 3.配置目标端的监听为静态监听&a…

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

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

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

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

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

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

Python与CAD系列高级篇(二十五)分类提取坐标到excel(补充圆半径、线长度、圆弧)

目录 0 简述1 分类提取坐标到excel2 结果展示0 简述 上一篇中介绍了:对点、直线、多段线、圆、样条曲线分类读取坐标并提取到excel。考虑到进一步提取图形信息,此篇补充对圆半径、线长度以及圆弧几何信息的提取。 1 分类提取坐标到excel 代码实现: import math import nump…

linux -- per-CPU变量

per-CPU变量 per-CPU变量是一种存在与每个CPU本地的变量,对于每一种per-CPU变量,每个CPU在本地都有一份它的副本。 per-CPU变量的优点 多处理器系统(smp)中无需考虑与其他处理器的竞争问题(并非绝对的)可以利用处理器本地的cache硬件,提高…

ClickHouse(24)ClickHouse集成mongodb表引擎详细解析

文章目录 MongoDB创建一张表用法示例 资料分享系列文章clickhouse系列文章 MongoDB MongoDB 引擎是只读表引擎,允许从远程 MongoDB 集合中读取数据(SELECT查询)。引擎只支持非嵌套的数据类型。不支持 INSERT 查询。 创建一张表 CREATE TABLE [IF NOT EXISTS] [db…

知识点积累系列(三)golang框架篇【持续更新】

云原生学习路线导航页(持续更新中) 本文是 知识点积累 系列文章的第三篇,记录日常学习中遇到的golang框架相关的知识点 1、gin框架相关 1.1.在gin中间件中直接return,相当于什么 在 Gin 中间件中直接使用 return 语句&#xff0…

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 …