重构项目,使用Vite+Ts

pangu
PeterAlbus 3 years ago
parent f6650092ab
commit 24b6febc15

@ -0,0 +1,14 @@
{
"0 debug pnpm:scope": {
"selected": 1
},
"1 error pnpm": {
"code": "ERR_PNPM_NO_SCRIPT",
"err": {
"name": "pnpm",
"message": "Missing script: install",
"code": "ERR_PNPM_NO_SCRIPT",
"stack": "pnpm: Missing script: install\n at Object.handler (D:\\softwares\\Program Files\\nodejs\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:176134:15)\n at async D:\\softwares\\Program Files\\nodejs\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:180328:21\n at async run (D:\\softwares\\Program Files\\nodejs\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:180302:34)\n at async runPnpm (D:\\softwares\\Program Files\\nodejs\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:180513:5)\n at async D:\\softwares\\Program Files\\nodejs\\node_global\\node_modules\\pnpm\\dist\\pnpm.cjs:180505:7"
}
}
}

@ -1,2 +1,2 @@
# PeterAlbus_Blog
My personal blog based on vue.
use Vite+Vue+Ts+ElementPlus

6
auto-imports.d.ts vendored

@ -0,0 +1,6 @@
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
}
export {}

28
components.d.ts vendored

@ -0,0 +1,28 @@
// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399
declare module 'vue' {
export interface GlobalComponents {
ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCol: typeof import('element-plus/es')['ElCol']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElImage: typeof import('element-plus/es')['ElImage']
ElInput: typeof import('element-plus/es')['ElInput']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
ElTag: typeof import('element-plus/es')['ElTag']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElUpload: typeof import('element-plus/es')['ElUpload']
Footer: typeof import('./src/components/Footer.vue')['default']
TopNavBar: typeof import('./src/components/TopNavBar.vue')['default']
}
}
export { }

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta data-n-head="1" data-hid="description" name="description" content="">
<meta data-n-head="1" data-hid="keywords" name="keywords" content="">
<title>PeterAlbus的博客</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

23281
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,37 +1,35 @@
{
"name": "peteralbus_blog",
"version": "0.1.0",
"name": "vite-peteralbus-blog",
"private": true,
"version": "0.0.0",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
"dev": "vite --host",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@kangc/v-md-editor": "^2.3.6",
"axios": "^0.21.1",
"element-plus": "^1.1.0-beta.9",
"@element-plus/icons-vue": "^1.1.3",
"@kangc/v-md-editor": "^2.3.14",
"@types/lodash-es": "^4.17.6",
"@types/qs": "^6.9.7",
"axios": "^0.26.1",
"element-plus": "^2.1.4",
"font-awesome": "^4.7.0",
"highlight.js": "^11.1.0",
"mavon-editor": "^2.9.1",
"prismjs": "^1.24.1",
"qs": "^6.5.2",
"vue": "^3.2.28",
"vue-axios": "^3.2.4",
"vue-router": "^4.0.0-0",
"vue3-social-share": "^0.1.3",
"vuex": "^4.0.0-0"
"prismjs": "^1.27.0",
"qs": "^6.10.3",
"vue": "^3.2.25",
"vue-axios": "^3.4.1",
"vue-router": "^4.0.14",
"vue3-social-share": "0.1.4"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"sass": "^1.26.5",
"sass-loader": "^8.0.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
"@vitejs/plugin-vue": "^2.2.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"typescript": "^4.5.4",
"unplugin-auto-import": "^0.6.6",
"unplugin-vue-components": "^0.18.3",
"vite": "^2.8.0",
"vue-tsc": "^0.29.8"
}
}

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 135 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -1,19 +0,0 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta data-n-head="1" data-hid="description" name="description" content="">
<meta data-n-head="1" data-hid="keywords" name="keywords" content="">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PeterAlbus的博客</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -5,8 +5,8 @@
</template>
<script>
import TopNavBar from "@/components/TopNavBar";
import Footer from "@/components/Footer";
import TopNavBar from "@/components/TopNavBar.vue";
import Footer from "@/components/Footer.vue";
export default {
name:'App',
components: {Footer, TopNavBar}
@ -21,6 +21,14 @@ html,body,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,p{
padding: 0;
}
a {
text-decoration: none;
}
.router-link-active {
text-decoration: none;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;

@ -36,7 +36,7 @@ export default {
width: 100%;
overflow: hidden;
background: #373D41;
border-top: 10px solid #4B6186;
border-top: 10px solid #326139;
position: relative;
text-align: center;
}

@ -1,64 +1,55 @@
<template>
<div class="navbar" >
<el-menu active-text-color="#326139" text-color="#FFFFFF" id="navid" class="nav" mode="horizontal" :router="true">
<el-menu-item
v-if="screenWidth>=600"
class="nav-title"
style="font-size: large"
index="0"
route="/"
>PeterAlbus的博客</el-menu-item>
<div style="display: flex;justify-content: right">
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/"
index="1"
><i class="el-icon-s-home"></i>主页</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/types"
index="2"
><i class="el-icon-menu"></i>分类</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/about"
index="4"
><i class="el-icon-user"></i>关于我</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/photo"
index="5"
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
</div>
</el-menu>
<div class="navbar nav" v-if="screenWidth>=600">
<div
class="nav-title"
style="font-size: large"
>PeterAlbus的博客</div>
<div style="display: flex">
<div class="nav-item">
<router-link to="/" active-class="active-top-item">
<el-icon style="vertical-align: -10%"><home-filled /></el-icon>
</router-link>
</div>
<div class="nav-item">
<router-link to="/types" active-class="active-top-item">
<el-icon style="vertical-align: -10%"><Menu /></el-icon>
</router-link>
</div>
<div class="nav-item">
<router-link to="/about" active-class="active-top-item">
<el-icon style="vertical-align: -10%"><user-filled /></el-icon>
</router-link>
</div>
<div class="nav-item">
<router-link to="/photo" active-class="active-top-item">
<el-icon style="vertical-align: -10%"><picture-filled /></el-icon>
</router-link>
</div>
</div>
</div>
<div class="navbar-bottom" v-if="screenWidth<600">
<el-row class="navbar-bottom-list">
<el-col :span="6" class="navbar-bottom-item">
<router-link to="/" active-class="active-item">
<p><i class="el-icon-s-home navbar-bottom-icon"></i></p>
<p><el-icon><home-filled /></el-icon></p>
<span class="navbar-bottom-text">主页</span>
</router-link>
</el-col>
<el-col :span="6" class="navbar-bottom-item">
<router-link to="/types" active-class="active-item">
<p><i class="el-icon-menu navbar-bottom-icon"></i></p>
<p><el-icon><grid /></el-icon></p>
<span class="navbar-bottom-text">分类</span>
</router-link>
</el-col>
<el-col :span="6" class="navbar-bottom-item">
<router-link to="/about" active-class="active-item">
<p><i class="el-icon-user navbar-bottom-icon"></i></p>
<p><el-icon><user-filled /></el-icon></p>
<span class="navbar-bottom-text">关于我</span>
</router-link>
</el-col>
<el-col :span="6" class="navbar-bottom-item">
<router-link to="/photo" active-class="active-item">
<p><i class="el-icon-picture-outline navbar-bottom-icon"></i></p>
<p><el-icon><picture-filled /></el-icon></p>
<span class="navbar-bottom-text">照片墙</span>
</router-link>
</el-col>
@ -67,8 +58,12 @@
</template>
<script>
import {HomeFilled,Menu,UserFilled,PictureFilled,Grid} from '@element-plus/icons-vue'
export default {
name: "TopNavBar",
components:{
HomeFilled,Menu,UserFilled,PictureFilled,Grid
},
created () {
},
mounted () {
@ -103,7 +98,9 @@ export default {
top: 0;
left: 0;
right: 0;
height:10px; /* 高度 */
/*height:10px; !* 高度 *!*/
display: flex;
justify-content: space-around;
z-index:99; /* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
@ -148,8 +145,13 @@ export default {
transition: .3s;
}
.active-top-item{
position: relative;
color: #82A96D !important;
transition: .3s;
}
.nav{
justify-content: space-between;
background: rgba(0, 0, 0, 0.5) !important;
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
@ -157,10 +159,14 @@ export default {
.nav-item{
height: 100%;
line-height: 60px;
margin-right: 20px;
padding:0 30px 0 30px;
background: rgba(0, 0, 0, 0) !important;
}
.nav-item a{
color: white;
}
.nav-menu{
color: black !important;
}

12
src/env.d.ts vendored

@ -0,0 +1,12 @@
/// <reference types="vite/client" />
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}
declare module '@kangc/v-md-editor'
declare module '@kangc/v-md-editor/lib/theme/vuepress'
declare module 'prismjs'

@ -1,16 +1,12 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
import 'font-awesome/css/font-awesome.min.css'
import './assets/iconfont/iconfont.css'
import qs from 'qs'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
@ -23,11 +19,13 @@ import 'vue3-social-share/lib/index.css'
axios.defaults.withCredentials=false;
axios.defaults.baseURL='https://www.peteralbus.com:8089/'
VMdEditor.use(vuepressTheme, {
Prism
});
const app=createApp(App)
app.config.globalProperties.$axios=axios;
app.config.globalProperties.$qs=qs;
app.use(VueAxios,axios).use(store).use(router).use(ElementPlus).use(VMdEditor).use(PeterAlbusVue).mount('#app')
app.config.devtools=true
app.use(VueAxios,axios).use(router).use(VMdEditor).use(PeterAlbusVue).mount('#app')
// app.config.devtools=true

@ -1,139 +0,0 @@
import { createRouter, createWebHashHistory } from 'vue-router'
const Home=()=>import('../views/Home')
const Blog=()=>import('../views/Blog')
const Photo=()=>import('../views/Photo')
const Types=()=>import('../views/Types')
const About=()=>import('../views/About')
const Document=()=>import('../views/Document')
const EditBlog=()=>import('../views/EditBlog')
const UploadPhoto=()=>import('../views/UploadPhoto')
const AddFriendLink=()=>import('../views/AddFriendLink')
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta:{
title:'主页——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客主页'
}
}
},
{
path: '/blog',
name: 'Blog',
component: Blog,
meta:{
title:'博文——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客博文页'
}
}
},
{
path: '/about',
name: 'About',
component: About,
meta:{
title:'关于我——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的个人介绍'
}
}
},
{
path: '/document',
name: 'Document',
component: Document,
meta:{
title:'归档——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客归档页'
}
}
},
{
path: '/photo',
name: 'Photo',
component: Photo,
meta:{
title:'照片墙——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的照片墙'
}
}
},
{
path: '/types',
name: 'Types',
component: Types,
meta:{
title:'分类查看——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客列表'
}
}
},
{
path: '/editBlog',
name: 'EditBlog',
component: EditBlog,
meta:{
title:'编辑/创建博客——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客编辑页'
}
}
},
{
path: '/uploadPhoto',
name: 'UploadPhoto',
component: UploadPhoto,
meta:{
title:'上传照片——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
},
{
path: '/addFriendLink',
name: 'AddFriendLink',
component: AddFriendLink,
meta:{
title:'添加友情链接——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
router.beforeEach((to, from, next)=>{
if(to.meta.content) { //路由发生变化时候修改meta中的content
document.querySelector('meta[name="keywords"]').setAttribute('content',to.meta.content.keywords)
document.querySelector('meta[name="description"]').setAttribute('content',to.meta.content.description)
}
if(to.meta.title) { //路由发生变化时候修改页面中的title
document.title = to.meta.title
}
next()
})
export default router

@ -0,0 +1,142 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const Home=()=>import('../views/Home.vue')
const Blog=()=>import('../views/Blog.vue')
const Photo=()=>import('../views/Photo.vue')
const Types=()=>import('../views/Types.vue')
const About=()=>import('../views/About.vue')
const Document=()=>import('../views/Document.vue')
const EditBlog=()=>import('../views/EditBlog.vue')
const UploadPhoto=()=>import('../views/UploadPhoto.vue')
const AddFriendLink=()=>import('../views/AddFriendLink.vue')
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
meta:{
title:'主页——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客主页'
}
}
},
{
path: '/blog',
name: 'Blog',
component: Blog,
meta:{
title:'博文——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客博文页'
}
}
},
{
path: '/about',
name: 'About',
component: About,
meta:{
title:'关于我——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的个人介绍'
}
}
},
{
path: '/document',
name: 'Document',
component: Document,
meta:{
title:'归档——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客归档页'
}
}
},
{
path: '/photo',
name: 'Photo',
component: Photo,
meta:{
title:'照片墙——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的照片墙'
}
}
},
{
path: '/types',
name: 'Types',
component: Types,
meta:{
title:'分类查看——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客列表'
}
}
},
{
path: '/editBlog',
name: 'EditBlog',
component: EditBlog,
meta:{
title:'编辑/创建博客——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客编辑页'
}
}
},
{
path: '/uploadPhoto',
name: 'UploadPhoto',
component: UploadPhoto,
meta:{
title:'上传照片——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
},
{
path: '/addFriendLink',
name: 'AddFriendLink',
component: AddFriendLink,
meta:{
title:'添加友情链接——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
// router.beforeEach((to, from, next)=>{
// if(to.meta.content) {
// // @ts-ignore
// document.querySelector('meta[name="keywords"]').setAttribute('content',to.meta.content.keywords)
// // @ts-ignore
// document.querySelector('meta[name="description"]').setAttribute('content',to.meta.content.description)
// }
// if(to.meta.title) {
// // @ts-ignore
// document.title = to.meta.title
// }
// next()
// })
export default router

@ -1,12 +0,0 @@
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

@ -22,7 +22,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
<a href="mailto:wuhongdb@163.com">

@ -24,7 +24,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<p>若有侵权深表歉意可联系删除</p>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">

@ -20,7 +20,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
<a href="mailto:wuhongdb@163.com">

@ -2,7 +2,7 @@
<div class="home-banner">
<div class="banner-container">
<div>
<el-avatar :size="150" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="150" src="/assets/2.png"></el-avatar>
<h2>欢迎来到PeterAlbus的个人博客</h2>
<br>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
@ -35,7 +35,7 @@
<el-col :span="16">
<div class="blog-description">
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
<h4>{{item.blogTitle}}&emsp;<el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
<h4>{{item.blogTitle}}&emsp;<el-tag size="small">{{getType(item.blogType)}}</el-tag></h4>
</router-link>
<p style="height: 110px">{{item.blogDescription}}</p>
<p class="info">
@ -59,7 +59,7 @@
<el-col :span="16">
<div class="blog-description">
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
<h4 style="height: 40px"><span style="white-space: nowrap">{{item.blogTitle}}&emsp;</span><el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
<h4 style="height: 40px"><span style="white-space: nowrap">{{item.blogTitle}}&emsp;</span><el-tag size="small">{{getType(item.blogType)}}</el-tag></h4>
</router-link>
<p style="height: 90px;overflow: hidden">{{item.blogDescription}}</p>
<p class="info">
@ -76,7 +76,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
<a href="mailto:wuhongdb@163.com">

@ -58,7 +58,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<p>若有侵权深表歉意可联系删除</p>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">

@ -10,7 +10,14 @@
<el-col :span="24">
<el-row>
<el-col :lg="{span:16,offset:4}">
<el-radio-group v-model="selectType">
<el-radio-group v-model="selectType" size="large" v-if="screenWidth>=500">
<el-radio-button :label="1">学习笔记</el-radio-button>
<el-radio-button :label="2">生活</el-radio-button>
<el-radio-button :label="3">ACG</el-radio-button>
<el-radio-button :label="4">科技</el-radio-button>
<el-radio-button :label="5">随笔</el-radio-button>
</el-radio-group>
<el-radio-group v-model="selectType" size="small" v-if="screenWidth<500">
<el-radio-button :label="1">学习笔记</el-radio-button>
<el-radio-button :label="2">生活</el-radio-button>
<el-radio-button :label="3">ACG</el-radio-button>
@ -31,7 +38,7 @@
<el-col :span="16">
<div class="blog-description">
<router-link :to="{ path: '/blog',query:{id:item.blogId}}">
<h4 style="height: 40px"><span style="white-space: nowrap">{{item.blogTitle}}&emsp;</span><el-tag size="mini">{{getType(item.blogType)}}</el-tag></h4>
<h4 style="height: 40px"><span style="white-space: nowrap">{{item.blogTitle}}&emsp;</span><el-tag size="small">{{getType(item.blogType)}}</el-tag></h4>
</router-link>
<p style="height: 90px;overflow: hidden">{{item.blogDescription}}</p>
<p class="info">
@ -43,7 +50,7 @@
</el-col>
</el-row>
</el-card>
<div style="background-color: white">
<div style="background-color: white;display: flex;justify-content: center">
<el-pagination v-if="screenWidth>=600"
layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[5,10,20]"
@ -64,7 +71,7 @@
<el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<el-avatar :size="50" src="/assets/2.png"></el-avatar>
<h4>PeterAlbus</h4>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
<a href="mailto:wuhongdb@163.com">

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["element-plus/global"],
"skipLibCheck": true, // element-pulsts
"baseUrl": ".",
"paths": {
"@/*":["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

@ -0,0 +1,29 @@
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'
import * as Path from 'path'
// https://vitejs.dev/config/
export default defineConfig(({command, mode}) => {
return {
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve:{
alias:{
'@':Path.resolve('src'),
}
},
server: {
port: 80
}
}
})

@ -1,7 +0,0 @@
module.exports = {
devServer: {
port: 80, //修改服务端口号
public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':80',
},
}
Loading…
Cancel
Save