云风的知识库
云风网前端重构,采用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
准备工作就绪,可以进行代码编写开发了