基于vue3+ts+elementplus+vite+vuex+router4的博客网

这是一个结合vue3、typescript、elementplus、vite、vuex、router4和spring boot的博客平台。前端实现了博客首页、技术文章列表、分页查询、文章详情、评论、注册登录等功能;后端利用spring boot提供了文章发布、markdown支持、评论管理和用户管理等服务。
摘要由CSDN通过智能技术生成

一 博客网介绍

博客网是基于vue3+ts+elementplus+vite+vuex+router4+springboot打造的前台和后台项目,前台有博客的首页,技术文章列表,文章分页,文章高级查询,文章详情,文章评论,注册,登录,关于我们等,后台管理系统 发布技术文章,支持markdown格式,markdown上传文件,评论管理,用户管理,系统管理等等功能

二 技术说明

前端:
vue3
typescript
vuex
elementplus
vite2
router4
markdown编辑
后端
springboot+ssm

三 项目结构图

在这里插入图片描述

四 功能设计和实现

博客首页
在这里插入图片描述
核心代码实现:

<el-main style="height:800px" class='main_index_cls'>
              <el-image
               style="width: 256px; margin-top:100px; height: 256px"
               src="../../static/logo/blog.png" 
              >
              </el-image>

             <div style="font-size:40px;color:green;height:30px;font-weight:900">VueBlog</div>

              <el-button type="success"  style="font-size:30px;margin-top:100px">开始阅读->
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Vue3 + TypeScript + Vite + Element Plus + Router + Axios搭建前端项目框架的步骤: 1. 首先,确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本: ```shell node -v npm -v ``` 2. 创建一个新的项目文件夹,并在该文件夹中打开命令行。 3. 在命令行中运行以下命令来初始化一个新的Vite项目: ```shell npm init vite ``` 在初始化过程中,你需要选择Vue作为模板,选择TypeScript作为语言,并填写项目名称。 4. 进入项目文件夹,并安装所需的依赖: ```shell cd your-project-name npm install ``` 5. 安装Vue RouterVuex和Axios: ```shell npm install vue-router@next vuex@next axios ``` 6. 在项目文件夹中创建一个新的文件夹,用于存放页面组件和路由配置文件。 7. 在src文件夹中创建一个新的文件夹,用于存放页面组件。 8. 在src文件夹中创建一个新的文件夹,用于存放路由配置文件。 9. 在src/router文件夹中创建一个新的文件,命名为index.ts,并在其中编写路由配置: ```typescript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, // 添加其他页面的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 10. 在src/main.ts文件中导入并使用Vue Router: ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 11. 在src/views文件夹中创建一个新的文件,命名为Home.vue,并在其中编写一个简单的页面组件: ```vue <template> <div> <h1>Welcome to Home Page</h1> </div> </template> <script> export default { name: 'Home', }; </script> ``` 12.src/App.vue文件中添加一个路由出口,用于显示组件: ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', }; </script> ``` 13. 在src/main.ts文件中导入并使用Element Plus: ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; createApp(App).use(router).use(ElementPlus).mount('#app'); ``` 14. 运行以下命令来启动开发服务器: ```shell npm run dev ``` 15. 打开浏览器,并访问http://localhost:3000,你将看到一个简单的页面,其中包含"Welcome to Home Page"的文本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值