初步完成页面搭建
This commit is contained in:
commit
aefd2850e6
4
.env.development
Normal file
4
.env.development
Normal file
@ -0,0 +1,4 @@
|
||||
NODE_ENV = development
|
||||
VITE_APP_TITLE = DEV标题
|
||||
VITE_BASE_URL = /
|
||||
VITE_API_BASE_URL = /api
|
||||
4
.env.production
Normal file
4
.env.production
Normal file
@ -0,0 +1,4 @@
|
||||
NODE_ENV = production
|
||||
VITE_APP_TITLE = PROD标题
|
||||
VITE_BASE_URL = ./
|
||||
VITE_API_BASE_URL = /api
|
||||
15
.eslintrc.cjs
Normal file
15
.eslintrc.cjs
Normal file
@ -0,0 +1,15 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
},
|
||||
rules: {}
|
||||
}
|
||||
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
8
.vscode/extensions.json
vendored
Normal file
8
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
44
README.md
Normal file
44
README.md
Normal file
@ -0,0 +1,44 @@
|
||||
# vue3-template
|
||||
|
||||
基于vite的vue3 项目基础模板
|
||||
|
||||
vue3：3.3.11
|
||||
|
||||
vue-router：4.2.5
|
||||
|
||||
pinia：2.1.7
|
||||
|
||||
element-plus：2.4.4
|
||||
|
||||
store持久化存储：pinia-plugin-persistedstate 3.2.1
|
||||
https://prazdevs.github.io/pinia-plugin-persistedstate/guide/config.html
|
||||
|
||||
mitt：3.0.1
|
||||
|
||||
## Customize configuration
|
||||
|
||||
vite配置 [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## 项目初始化
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### 运行dev服务
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 构建项目
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### eslint检测 [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-hans">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
6059
package-lock.json
generated
Normal file
6059
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
36
package.json
Normal file
36
package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "vue3-blog-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --mode development",
|
||||
"serve": "vite --mode development",
|
||||
"build": "vite build --mode production",
|
||||
"preview": "vite preview --mode development",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "~1.6.2",
|
||||
"element-plus": "~2.4.4",
|
||||
"mitt": "~3.0.1",
|
||||
"pinia": "~2.1.7",
|
||||
"pinia-plugin-persistedstate": "~3.2.1",
|
||||
"qs": "~6.11.2",
|
||||
"vue": "~3.3.11",
|
||||
"vue-router": "~4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.3",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"prettier": "^3.0.3",
|
||||
"sass": "^1.69.5",
|
||||
"unplugin-auto-import": "^0.17.2",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "^5.0.10"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
45
public/json/pageList.json
Normal file
45
public/json/pageList.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "成功",
|
||||
"data": {
|
||||
"total": 4,
|
||||
"pageList": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "测试123标题1231",
|
||||
"author": "lau",
|
||||
"createTime": "2024-01-21",
|
||||
"category": "分类",
|
||||
"abstract": "e是一种现代化的前端开发工具，其工作原理主要分为以下几个步骤：基于ESM构建：Vite作为一款基于ESM的前端构建工具，通过ES模块提供的动态导入功能来实现快速的开发和构建。零配置开发：Vite允许开发者在不需要任何配置的情况下启动一个服务器进行开发，通过对文件的即时编译和缓存，来提高开源代码加载模块，而不是打包后的文件，从而可以避免打包的过程带来的性能损失按需编译和缓存：Vite会按需编译和缓存",
|
||||
"tags": ["标签1", "标签2123"]
|
||||
},
|
||||
{
|
||||
"id": 22,
|
||||
"title": "测试标题12321321",
|
||||
"author": "lau",
|
||||
"createTime": "2024-01-22",
|
||||
"category": "分类",
|
||||
"abstract": "e是一种现代化的前端开发工具，其工作原理主要分为以下几个步骤：基于ESM构建：Vite作为一款基于ESM的前端构建工具，通过ES模块提供的动态导入功能来实现快速的开发和构建。零配置开发：Vite允许开发者在不需要任何配置的情况下启动一个服务器进行开发，通过对文件的即时编译和缓存，来提高开发效率。基于浏览器原生的ESM加载：Vite将所有文件视为ES模块，并且在开发时会直接从源代码加载模块，而不是打包后的文件，从而可以避免打包的过程带来的性能损失按需编译和缓存：Vite会按需编译和缓存",
|
||||
"tags": ["标签1", "标签2123"]
|
||||
},
|
||||
{
|
||||
"id": 23,
|
||||
"title": "测试标题123123323",
|
||||
"author": "lau",
|
||||
"createTime": "2024-01-24",
|
||||
"category": "分类",
|
||||
"abstract": "e是一种现代化的前端开发工具，其工作原理主要分为以下几个步骤：基于ESM构建：Vite作为一款基于ESM的前端构建工具，通过ES模块提供的动态导入功能来实现快速的开发和构建。零配置开发：Vite允许开发者在不需要任何配置的情况下启动一个服务器进行开发，通过对文件的即时编译和缓存，来提高开发效率。基于浏览器原生的ESM加载：Vite将所有文件视为ES模块，并且在开发时会直接从源代码加载模块，而不是打包后的文件，从而可以避免打包的过程带来的性能损失按需编译和缓存：Vite会按需编译和缓存",
|
||||
"tags": ["标签1", "标签2123"]
|
||||
},
|
||||
{
|
||||
"id": 44,
|
||||
"title": "测试标题1234211234",
|
||||
"author": "lau",
|
||||
"createTime": "2024-01-24",
|
||||
"category": "分类",
|
||||
"abstract": "e是一种现代化的前端开发工具，其工作原理主要分为以下几个步骤：基于ESM构建：Vite作为一款基于ESM的前端构建工具，通过ES模块提供的动态导入功能来实现快速的开发和构建。零配置开发：Vite允许开发者在不需要任何配置的情况下启动一个服务器进行开发，通过对文件的即时编译和缓存，来提高开发效率。基于浏览器原生的ESM加载：Vite将所有文件视为ES模块，并且在开发时会直接从源代码加载模块，而不是打包后的文件，从而可以避免打包的过程带来的性能损失按需编译和缓存：Vite会按需编译和缓存",
|
||||
"tags": ["标签1", "标签2123"]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
7
src/App.vue
Normal file
7
src/App.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
17
src/api/home.js
Normal file
17
src/api/home.js
Normal file
@ -0,0 +1,17 @@
|
||||
import http from '@/utils/http'
|
||||
|
||||
/** 登录接口
|
||||
* @function getPageList 获取文章列表
|
||||
* @param {Number} currentPage 当前分页
|
||||
* @param {Number} pageSize 每次获取数量
|
||||
* */
|
||||
export const getPageList = (currentPage = 1, pageSize = 10) => {
|
||||
return http({
|
||||
url: '/page-list',
|
||||
method: 'post',
|
||||
data: {
|
||||
currentPage,
|
||||
pageSize
|
||||
}
|
||||
})
|
||||
}
|
||||
15
src/api/login.js
Normal file
15
src/api/login.js
Normal file
@ -0,0 +1,15 @@
|
||||
import http from '@/utils/http'
|
||||
|
||||
/** 登录接口
|
||||
* @function login 登录接口
|
||||
* @param {Object} data 登录数据
|
||||
* @param {String} data.account 账号
|
||||
* @param {String} data.password 密码
|
||||
* */
|
||||
export const login = (data) => {
|
||||
return http({
|
||||
url: '/login',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
5
src/assets/base.css
Normal file
5
src/assets/base.css
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
|
||||
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
|
||||
}
|
||||
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
21
src/assets/reset.css
Normal file
21
src/assets/reset.css
Normal file
@ -0,0 +1,21 @@
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
img,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
86
src/components/Button/TagCom.vue
Normal file
86
src/components/Button/TagCom.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'auto'
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
border: {
|
||||
type: String,
|
||||
default: '1px solid #ddd'
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#777'
|
||||
},
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: '14px'
|
||||
},
|
||||
fontWeight: {
|
||||
type: String,
|
||||
default: '400'
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal'
|
||||
},
|
||||
cursor: {
|
||||
type: String,
|
||||
default: 'pointer'
|
||||
}
|
||||
})
|
||||
|
||||
const style = computed(() => {
|
||||
const obj = {}
|
||||
obj['width'] = props.width
|
||||
obj['height'] = props.height
|
||||
obj['color'] = props.color
|
||||
obj['background-color'] = props.backgroundColor
|
||||
obj['font-size'] = props.fontSize
|
||||
obj['font-weight'] = props.fontWeight
|
||||
obj['border'] = props.border
|
||||
obj['cursor'] = props.cursor
|
||||
switch (props.size) {
|
||||
case 'normal':
|
||||
obj['padding'] = '12px 20px'
|
||||
break
|
||||
case 'small':
|
||||
obj['padding'] = '8px 14px'
|
||||
break
|
||||
case 'large':
|
||||
obj['padding'] = '16px 24px'
|
||||
break
|
||||
}
|
||||
return obj
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!--
|
||||
宽高、背景颜色、字体颜色、字体大小、字体粗细、边框大小和颜色、大小
|
||||
-->
|
||||
<button class="tag-item" :style="style">
|
||||
<span>
|
||||
<slot name="default"></slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tag-item {
|
||||
border-radius: 8px;
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
src/components/Footer/FooterCom.vue
Normal file
45
src/components/Footer/FooterCom.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup></script>
|
||||
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="copyright">
|
||||
<p>
|
||||
Copyright © 2016-{{ new Date().getFullYear() }}
|
||||
<a href="https://git.6yim.com" target="_blank">Lauym</a>. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div class="beian">
|
||||
<a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备19012284号</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 24px 0;
|
||||
background-color: #444;
|
||||
color: #aaa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
> div {
|
||||
a {
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
text-decoration: solid;
|
||||
}
|
||||
&:active{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
> .copyright {
|
||||
// text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
src/components/Header/HeaderCom.vue
Normal file
146
src/components/Header/HeaderCom.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import menuIcon from '@/components/Icon/btn/menuIcon.vue'
|
||||
|
||||
const props = defineProps({
|
||||
menuList: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ label: '所有文章', path: '/pages', menuId: 1 },
|
||||
{ label: '分类', path: '/categories', menuId: 2 },
|
||||
{ label: '标签', path: '/tags', menuId: 3 },
|
||||
{ label: '关于我', path: '/about-me', menuId: 4 },
|
||||
{ label: '杂记', path: '/', menuId: 5 }
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
const isMobileMenuShow = ref(false)
|
||||
const handleShowMobileMenu = (value) => {
|
||||
isMobileMenuShow.value = value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header">
|
||||
<el-row>
|
||||
<el-col :lg="{ span: 3, offset: 4 }">
|
||||
<div class="logo-and-title">
|
||||
<img src="@/assets/logo.png" alt="" />
|
||||
<h1 @click="$router.push('/')">YM Blog</h1>
|
||||
<div class="mobile-menu-btn hidden-lg-only">
|
||||
<menuIcon @click="handleShowMobileMenu" :open="isMobileMenuShow"></menuIcon>
|
||||
</div>
|
||||
<ul class="mobile-menu hidden-lg-only" v-show="isMobileMenuShow">
|
||||
<li
|
||||
v-for="item in props.menuList"
|
||||
:key="item.menuId"
|
||||
@click="handleShowMobileMenu(false)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :lg="{ span: 8, offset: 2 }" class="hidden-md-and-down">
|
||||
<ul class="menu">
|
||||
<li v-for="item in props.menuList" :key="item.path" @click="$router.push(item.path)">
|
||||
{{ item.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'element-plus/theme-chalk/display.css';
|
||||
|
||||
$heaher-height: 60px;
|
||||
.header {
|
||||
height: $heaher-height;
|
||||
background-color: #fafafa;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 4px 10px 0 rgba($color: #777, $alpha: 0.5);
|
||||
}
|
||||
.logo-and-title {
|
||||
height: $heaher-height;
|
||||
padding: 0 0 0 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
// height: 30px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
> .mobile-menu-btn {
|
||||
position: absolute;
|
||||
top: calc($heaher-height - 50px);
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
}
|
||||
> .mobile-menu {
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
// border: 1px solid red;
|
||||
position: absolute;
|
||||
top: $heaher-height;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> li {
|
||||
width: inherit;
|
||||
height: 34px;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-left: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu {
|
||||
height: $heaher-height;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
> li {
|
||||
min-width: 80px;
|
||||
height: inherit;
|
||||
padding: 0 12px 0 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: #2376b7;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:nth-child(n + 2) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/components/Icon/btn/menuIcon.vue
Normal file
66
src/components/Icon/btn/menuIcon.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
open: { type: Boolean, default: false }
|
||||
})
|
||||
const emits = defineEmits(['click'])
|
||||
const active = ref(false)
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
active.value = props.open
|
||||
}
|
||||
)
|
||||
const onClick = () => {
|
||||
active.value = !active.value
|
||||
emits('click', active.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="-menu-icon" :class="{ active: active }" @click="onClick">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.-menu-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: relative;
|
||||
> div {
|
||||
width: inherit;
|
||||
height: 4px;
|
||||
background-color: #444;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all 0.2s linear;
|
||||
&:nth-child(1) {
|
||||
top: 8px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
top: 16px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.-menu-icon.active {
|
||||
> div {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(-45deg) translate(-4px, 7px);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(45deg) translate(-4px, -7px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
105
src/components/List/PageList.vue
Normal file
105
src/components/List/PageList.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
// import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ul class="page-list">
|
||||
<li v-for="item in props.list" :key="item.id">
|
||||
<h2>
|
||||
<router-link :to="`/detail/${item.title}`">{{ item.title }}</router-link>
|
||||
</h2>
|
||||
<div class="info">
|
||||
<span>作者: {{ item.author }}</span>
|
||||
<span>发布于: {{ item.createTime }}</span>
|
||||
<span class="category"
|
||||
>分类:
|
||||
<router-link :to="`/categories/${item.category}`"> {{ item.category }}</router-link></span
|
||||
>
|
||||
</div>
|
||||
<div class="abstract">{{ item.abstract }}...</div>
|
||||
<div class="read">
|
||||
<router-link :to="`/detail/${item.title}`">阅读全文</router-link>
|
||||
</div>
|
||||
<div class="tags">
|
||||
<span v-for="tag in item.tags" :key="tag">
|
||||
<router-link :to="`/tags/${tag}`">{{ tag }}</router-link
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-list {
|
||||
> li {
|
||||
margin-bottom: 40px;
|
||||
padding: 10px 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 6px 0 rgba(177, 177, 177, 0.3);
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 6px 12px 0 rgba(177, 177, 177, 0.7);
|
||||
}
|
||||
a {
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
> h2 {
|
||||
padding: 10px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
> .info {
|
||||
> span {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-right: 10px;
|
||||
}
|
||||
> .category {
|
||||
a {
|
||||
color: #2376b7;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.abstract {
|
||||
padding: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
line-height: 22px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
> .read {
|
||||
text-indent: 2em;
|
||||
> a {
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
|
||||
> .tags {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> span {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
59
src/components/List/PaginationCom.vue
Normal file
59
src/components/List/PaginationCom.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'prev, pager, next'
|
||||
},
|
||||
pagerCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
}
|
||||
})
|
||||
|
||||
const emits = defineEmits(['currentChange'])
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
console.log(val)
|
||||
emits('currentChange', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="custom-pagination">
|
||||
<el-pagination
|
||||
:current-page="props.currentPage"
|
||||
:page-size="props.pageSize"
|
||||
:total="props.total"
|
||||
:layout="props.layout"
|
||||
:pager-count="props.pagerCount"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-pagination {
|
||||
:deep(.el-pagination) {
|
||||
> .el-pager {
|
||||
> .is-active {
|
||||
color: #2376b7;
|
||||
}
|
||||
> li:hover {
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
64
src/layout/LayoutView.vue
Normal file
64
src/layout/LayoutView.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import HeaderCom from '@/components/Header/HeaderCom.vue'
|
||||
import FooterCom from '@/components/Footer/FooterCom.vue'
|
||||
|
||||
const minHeight = ref(200)
|
||||
onMounted(() => {
|
||||
minHeight.value = document.documentElement.clientHeight - 144 + 'px'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot name="header">
|
||||
<HeaderCom />
|
||||
</slot>
|
||||
<div class="body">
|
||||
<el-row>
|
||||
<el-col :lg="{ span: 4 }" class="hidden-md-and-down">
|
||||
<div class="left-side">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 12, offset: 1 }">
|
||||
<div class="center">
|
||||
<slot name="content"></slot>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 5, offset: 1 }">
|
||||
<div class="right-side">
|
||||
<slot name="right"></slot>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<slot name="footer">
|
||||
<FooterCom />
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'element-plus/theme-chalk/display.css';
|
||||
|
||||
.body {
|
||||
// margin-top: 20px;
|
||||
.left-side {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
// background-color: red;
|
||||
}
|
||||
.center {
|
||||
width: 100%;
|
||||
min-height: v-bind(minHeight);
|
||||
padding: 20px 5px;
|
||||
box-sizing: border-box;
|
||||
// background-color:;
|
||||
}
|
||||
.right-side {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
// background-color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/main.js
Normal file
26
src/main.js
Normal file
@ -0,0 +1,26 @@
|
||||
import './assets/reset.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import pinia from './stores/pinia'
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
// 全局自定义指令
|
||||
app.directive('permission', {
|
||||
mounted(el, binding) {
|
||||
const { value } = binding
|
||||
if (value.includes(1)) {
|
||||
el['hidden'] = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
17
src/router/index.js
Normal file
17
src/router/index.js
Normal file
@ -0,0 +1,17 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import routes from './routes'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes,
|
||||
scrollBehavior: () => ({ left: 0, top: 0, behavior: 'smooth' })
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach(() => {})
|
||||
|
||||
router.afterEach((to) => {
|
||||
document.title = import.meta.env.VITE_APP_TITLE + ` | ${to.meta.title || ''}`
|
||||
})
|
||||
|
||||
export default router
|
||||
84
src/router/routes.js
Normal file
84
src/router/routes.js
Normal file
@ -0,0 +1,84 @@
|
||||
import HomePage from '@/views/HomePage/HomeView.vue'
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
meta: {
|
||||
title: '首页'
|
||||
},
|
||||
component: HomePage
|
||||
},
|
||||
{
|
||||
path: '/detail/:title',
|
||||
name: 'detail',
|
||||
meta: {
|
||||
title: '详情',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/DetailPage/DetailView.vue')
|
||||
},
|
||||
{
|
||||
path: '/pages',
|
||||
name: 'pages',
|
||||
meta: {
|
||||
title: '所有内容',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/ListPage/ListView.vue')
|
||||
},
|
||||
{
|
||||
path: '/categories',
|
||||
name: 'categories',
|
||||
meta: {
|
||||
title: '分类列表',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/CategoriesPage/CategoriesView.vue')
|
||||
},
|
||||
{
|
||||
path: '/categories/:categoryName',
|
||||
name: 'category',
|
||||
meta: {
|
||||
title: '分类',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/ListPage/ListView.vue')
|
||||
},
|
||||
{
|
||||
path: '/tags',
|
||||
name: 'tags',
|
||||
meta: {
|
||||
title: '标签列表',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/TagsPage/TagsView.vue')
|
||||
},
|
||||
{
|
||||
path: '/tags/:tagName',
|
||||
name: 'tag',
|
||||
meta: {
|
||||
title: '标签',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/ListPage/ListView.vue')
|
||||
},
|
||||
{
|
||||
path: '/about-me',
|
||||
name: 'about',
|
||||
meta: {
|
||||
title: '关于我',
|
||||
keepAlive: true
|
||||
},
|
||||
component: () => import('@/views/AboutPage/AboutMe.vue')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: '404',
|
||||
meta: {
|
||||
title: '404 Not Found'
|
||||
},
|
||||
component: () => import('@/views/404.vue')
|
||||
}
|
||||
]
|
||||
|
||||
export default routes
|
||||
7
src/stores/pinia.js
Normal file
7
src/stores/pinia.js
Normal file
@ -0,0 +1,7 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
|
||||
const store = createPinia()
|
||||
store.use(piniaPluginPersistedstate)
|
||||
|
||||
export default store
|
||||
29
src/stores/user.js
Normal file
29
src/stores/user.js
Normal file
@ -0,0 +1,29 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
const useUser = defineStore(
|
||||
'user',
|
||||
() => {
|
||||
const name = ref('张三')
|
||||
const age = ref(18)
|
||||
const loginInfo = reactive({
|
||||
token: '123',
|
||||
lastLoginTime: ''
|
||||
})
|
||||
|
||||
const modifyLoginInfo = (data) => {
|
||||
loginInfo.token = data.token
|
||||
loginInfo.lastLoginTime = data.lastLoginTime
|
||||
}
|
||||
|
||||
return { name, age, loginInfo, modifyLoginInfo }
|
||||
},
|
||||
{
|
||||
// 持久化存储
|
||||
persist: {
|
||||
storage: window.localStorage
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default useUser
|
||||
61
src/utils/http.js
Normal file
61
src/utils/http.js
Normal file
@ -0,0 +1,61 @@
|
||||
import axios from 'axios'
|
||||
import router from '@/router'
|
||||
import { ElMessage, ElNotification } from 'element-plus'
|
||||
|
||||
const API_URL = import.meta.env.VITE_API_BASE_URL
|
||||
|
||||
// console.log(API_URL)
|
||||
|
||||
const http = axios.create({
|
||||
baseURL: API_URL,
|
||||
timeout: 30 * 1000,
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
// 请求不携带cookie
|
||||
withCredentials: false
|
||||
})
|
||||
|
||||
// 请求拦截
|
||||
http.interceptors.request.use(
|
||||
(config) => {
|
||||
config.headers.Authorization = `Bearer ${localStorage.getItem('token') || 'NoToken'}`
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截
|
||||
http.interceptors.response.use(
|
||||
(res) => {
|
||||
if (res.status === 200) {
|
||||
const code = res.data.code || 0
|
||||
// 根据返回的自定义code来做不同的处理
|
||||
if (code === 401) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '登录已过期 或 未登录，请重新登录',
|
||||
duration: 2000
|
||||
})
|
||||
router.push({ path: '/login' })
|
||||
}
|
||||
} else {
|
||||
ElNotification({
|
||||
title: '错误',
|
||||
message: res.data.message,
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
|
||||
return res.data
|
||||
},
|
||||
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default http
|
||||
23
src/utils/ls.js
Normal file
23
src/utils/ls.js
Normal file
@ -0,0 +1,23 @@
|
||||
const getItem = (itemName) => {
|
||||
return window.localStorage.getItem(itemName)
|
||||
}
|
||||
|
||||
const setItem = (itemName, itemValue) => {
|
||||
return window.localStorage.setItem(itemName, itemValue)
|
||||
}
|
||||
|
||||
const removeItem = (itemName) => {
|
||||
return window.localStorage.removeItem(itemName)
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
return window.localStorage.clear()
|
||||
}
|
||||
|
||||
export const getToken = () => getItem('token')
|
||||
|
||||
export const setToken = (token) => setItem('token', token)
|
||||
|
||||
export const clearToken = () => removeItem('token')
|
||||
|
||||
export const clearAll = () => clear()
|
||||
33
src/views/404.vue
Normal file
33
src/views/404.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="not-found">
|
||||
<el-card class="box-card">
|
||||
<div class="text-center">
|
||||
<h1>404</h1>
|
||||
<p>抱歉，访问的页面不存在</p>
|
||||
<p>
|
||||
<el-button type="" @click="$router.push('/')">返回首页</el-button>
|
||||
</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.not-found {
|
||||
text-align: center;
|
||||
h1 {
|
||||
margin: 40px;
|
||||
}
|
||||
p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
13
src/views/AboutPage/AboutMe.vue
Normal file
13
src/views/AboutPage/AboutMe.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
about me
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
95
src/views/CategoriesPage/CategoriesView.vue
Normal file
95
src/views/CategoriesPage/CategoriesView.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="categories">
|
||||
<div class="title">所有分类<span>4</span></div>
|
||||
<div class="category-items">
|
||||
<el-row>
|
||||
<el-col :lg="{ span: 8 }" :md="{ span: 12 }">
|
||||
<div class="category-title">Vue <span>12</span></div>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`"
|
||||
>te吃啥地啥的神盾局t似懂非懂</router-link
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`">test似懂非懂</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`">test似懂非懂</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 8 }" :md="{ span: 12 }">
|
||||
<div class="category-title">Vue <span>12</span></div>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`"
|
||||
>te吃啥地啥的神盾局t似懂非懂</router-link
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`">test似懂非懂</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="`/detail/test似懂非懂`">test似懂非懂</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.categories {
|
||||
> .title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> span {
|
||||
text-indent: 6px;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
> .category-items {
|
||||
padding: 20px 0;
|
||||
.category-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
> span {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding: 10px 14px;
|
||||
> li {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
|
||||
>a{
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
&:hover{
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/views/DetailPage/DetailView.vue
Normal file
30
src/views/DetailPage/DetailView.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="detail-page">
|
||||
<h2 class="title">title</h2>
|
||||
<div class="info">
|
||||
<div class="author">
|
||||
<span>lau</span>发布在
|
||||
<span>
|
||||
<router-link to="/categories/vue">detail</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<div class="time">发布时间<span>2023-12-21</span></div>
|
||||
</div>
|
||||
|
||||
<div class="detail-content">内容</div>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-page {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
54
src/views/HomePage/HomeView.vue
Normal file
54
src/views/HomePage/HomeView.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
import PageList from '@/components/List/PageList.vue'
|
||||
import PaginationCom from '@/components/List/PaginationCom.vue'
|
||||
|
||||
const pageList = ref([])
|
||||
const currentPage = ref(1)
|
||||
|
||||
onMounted(() => {
|
||||
fetch('/json/pageList.json')
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
pageList.value.splice(0, pageList.value.length)
|
||||
res.data.pageList.forEach((item) => {
|
||||
pageList.value.push(item)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const handleCurrentPageChange = (val) => {
|
||||
currentPage.value = val
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="page-list">
|
||||
<PageList :list="pageList"></PageList>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<PaginationCom
|
||||
:currentPage="currentPage"
|
||||
:total="14"
|
||||
@currentChange="handleCurrentPageChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-list {
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 10px 20px 50px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
101
src/views/ListPage/ListView.vue
Normal file
101
src/views/ListPage/ListView.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{
|
||||
title: 'Vue 3',
|
||||
description: 'Vue 3 is a progressive framework for building user interfaces.',
|
||||
url: 'https://v3.vuejs.org/',
|
||||
createTime: '2023-12-21'
|
||||
},
|
||||
{
|
||||
title: 'Vue1大山',
|
||||
description: 'Vue 3 is a progressive framework for building user interfaces.',
|
||||
url: 'https://v3.vuejs.org/',
|
||||
createTime: '2023-12-21'
|
||||
},
|
||||
{
|
||||
title: 'Vue saDv',
|
||||
description: 'Vue 3 is a progressive framework for building user interfaces.',
|
||||
url: 'https://v3.vuejs.org/',
|
||||
createTime: '2023-12-21'
|
||||
},
|
||||
{
|
||||
title: '123123十多个十多个',
|
||||
description: 'Vue 3 is a progressive framework for building user interfaces.',
|
||||
url: 'https://v3.vuejs.org/',
|
||||
createTime: '2023-12-21'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '列表'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="page-list">
|
||||
<div class="title">{{ props.type }}</div>
|
||||
<div class="total">{{ props.total }} 篇</div>
|
||||
<ul>
|
||||
<li v-for="item in props.list" :key="item.title">
|
||||
<router-link :to="`/detail/${item.title}`">{{ item.title }}</router-link>
|
||||
<span>{{ item.createTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-list {
|
||||
> .title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
>.total{
|
||||
padding: 10px 0;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
}
|
||||
> ul {
|
||||
padding: 20px 40px;
|
||||
> li {
|
||||
height: 26px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
> a {
|
||||
color: #444;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #2376b7;
|
||||
}
|
||||
}
|
||||
>span{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
src/views/TagsPage/TagsView.vue
Normal file
30
src/views/TagsPage/TagsView.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<script setup>
|
||||
import LayoutView from '@/layout/LayoutView.vue'
|
||||
import TagCom from '@/components/Button/TagCom.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutView>
|
||||
<template #content>
|
||||
<div class="tags">
|
||||
<ul>
|
||||
<li><TagCom @click="$router.push('/detail/title')">测试阿斯达</TagCom></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</LayoutView>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags {
|
||||
> ul {
|
||||
padding: 20px 40px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
> li {
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
36
vite.config.js
Normal file
36
vite.config.js
Normal file
@ -0,0 +1,36 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import process from 'node:process'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// 按需导入 Element-plus 模块
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
console.log(mode)
|
||||
return {
|
||||
server: {
|
||||
port: 3002,
|
||||
proxy: {}
|
||||
},
|
||||
base: loadEnv(mode, process.cwd()).VITE_BASE_URL,
|
||||
plugins: [
|
||||
vue(),
|
||||
// Element-plus 按需导入模块
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
})
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user