Vue3.2开发一个博客Demo项目

Vue3.2开发一个博客Demo项目

技术选型
Vue3 + Vue-router + Pinia + ElementPlus

代码地址
https://gitee.com/galen.zhang/vue3-demo/tree/master/tech-blog

Mock后台服务器代码
https://gitee.com/galen.zhang/vue3-demo/tree/master/mock-server

cd mock-server
npm install
npm run dev
1
2
3

---

创建项目

npm create vue@latest
√ Project name: ... tech-blog
√ Add TypeScript? ... No 
√ Add JSX Support? ... No 
√ Add Vue Router for Single Page Application development? ...  Yes
√ Add Pinia for state management? ...  Yes
√ Add Vitest for Unit Testing? ... No 
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... Yes
√ Add Prettier for code formatting? ... Yes

cd tech-blog
npm install
npm run format
npm run dev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

浏览器访问
http://localhost:5173/

---

安装Element Plus

官方文档
https://element-plus.org/zh-CN/guide/installation.html

安装Element Plus

npm install element-plus --save
npm install @element-plus/icons-vue
1
2

在 src/main.js 中引入Element Plus

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus)
app.use(createPinia())
app.use(router)

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

路由配置

修改文件 src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/blog/:id',
      component: () => import('../views/BlogDetailView.vue')
    },
    {
      path: '/blog/:id/edit',
      component: () => import('../views/CreateEditBlogView.vue')
    },
    {
      path: '/create',
      component: () => import('../views/CreateEditBlogView.vue')
    },
    {
      path: '/myBlog',
      component: () => import('../views/MyBlogView.vue')
    },
    {
      path: '/register',
      component: () => import('../views/RegisterView.vue')
    },
    {
      path: '/login',
      component: () => import('../views/LoginView.vue')
    }
  ]
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---

封装网络请求工具类Axios

npm install axios --save
// 进度条
npm install nprogress --save
1
2
3

封装网络请求工具类 src/utils/request.js

import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export const serverUrl = 'http://localhost:3000'

const service = axios.create({
  baseURL: serverUrl,
  timeout: 5000
})

// Add a request interceptor 全局请求拦截
service.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    NProgress.start() // 启动进度条
    // 此处还可以设置token
    return config
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error)
  }
)

// Add a response interceptor 全局相应拦截
service.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    NProgress.done()

    // 如果是固定的数据返回模式，此处可以做继续完整的封装
    const resData = response.data || {}
    if (resData.code == '0') {
      return resData.data
    }
    return Promise.reject(resData.message)
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    NProgress.done()

    // 此处需要对返回的状态码或者异常信息作统一处理
    return Promise.reject(error)
  }
)

export const get = (url, params) => {
  return service.get(url, {
    params
  })
}

export const post = (url, data) => service.post(url, data)

export const put = (url, data) => service.put(url, data)

export const del = (url, data) => service.delete(url)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

---

后台请求api接口

博客后台请求接口api文件 src/api/blogApi.js

import { get, post, put, del } from "../utils/request";

// 获取博客列表
export async function getBlogList(opt = {}) {
    const { page = 1, pageSize = 10, category = '', keyword = '', my = false } = opt;
    return get(`/api/blogs?page=${page}&pageSize=${pageSize}&category=${category}&keyword=${keyword}&my=${my}`);
}

// 创建博客
export async function createBlog(data) {
    return post('/api/blogs', data);
}

// 编辑博客
export async function editBlog(id, data) {
    return put(`/api/blogs/${id}`, data);
}

// 删除博客
export async function deleteBlog(id) {
    return delete(`/api/blogs/${id}`);
}

// 根据 ID 获取单个博客
export async function getBlogById(id) {
    return get(`/api/blogs/${id}`);
}

// 点赞博客
export async function likeBlog(id) {
    return post(`/api/blogs/${id}/like`);
}

// 取消点赞博客
export async function unlikeBlog(id) {
    return del(`/api/blogs/${id}/like`);
}

// 收藏博客
export async function favoriteBlog(id) {
    return post(`/api/blogs/${id}/favorite`);
}

// 取消收藏博客
export async function unfavoriteBlog(id) {
    return del(`/api/blogs/${id}/favorite`);
}

export default {
    getBlogList,
    createBlog,
    editBlog,
    deleteBlog,
    getBlogById,
    likeBlog,
    unlikeBlog,
    favoriteBlog,
    unfavoriteBlog
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

---

封装hooks函数

修改页面标题
添加文件 src/hooks/usePageTitle.js

import { ref, isRef, onMounted, onBeforeUnmount, watchEffect } from 'vue'

const NAME = 'TechBlog'

function usePageTitle(title) {
  const originalTitle = ref(document.title)

  // 更新网页标题
  const updatePageTitle = () => {
    const titleValue = isRef(title) ? title.value : title
    if (!titleValue) {
      return
    }
    document.title = titleValue + ' - ' + NAME
  }

  if (isRef(title)) {
    watchEffect(updatePageTitle)
  }

  // 在组件挂载时更新网页标题
  onMounted(() => {
    updatePageTitle()
  })

  // 在组件卸载时恢复原始网页标题
  onBeforeUnmount(() => {
    document.title = originalTitle.value
  })

  return {
    updatePageTitle
  }
}

export default usePageTitle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在页面上使用，如登录页面

1
2
3
4
5

---

封装首页导航栏组件

添加文件 src/components/NavMenu.vue

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---

封装首页搜索组件

添加文件 src/components/SearchInput.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---

用户注册页

form表单提交数据 src/views/RegisterView.vue

  

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

---

用户登录页

在用户登录后，存储token到本地 src/views/LoginView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

---

状态管理Pinia

Pinia使用例子
src/stores/counter.js

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})
1
2
3
4
5
6
7
8
9
10
11
12

在页面中使用 counter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---

使用Pinia管理用户状态

添加文件 src/stores/user.js

import { reactive } from 'vue'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const userInfo = reactive({
    username: '',
    nickname: ''
  })

  function setUserInfo({ username, nickname }) {
    userInfo.username = username
    userInfo.nickname = nickname
  }

  function clearUserInfo() {
    userInfo.username = ''
    userInfo.nickname = ''
  }

  return { userInfo, setUserInfo, clearUserInfo }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在首页 src/App.vue 中获取用户信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

---

封装用户菜单组件

添加文件 src/components/UserInfo.vue

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

---

添加hooks函数，判断登录状态

添加文件 src/hooks/useNavToHome.js

import { watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

function useNavToHome() {
    const router = useRouter();
    const { userInfo } = useUserStore()
    // 监听 userInfo.username ，如果有值，说明用户已经登录，跳转到首页
    watch(() => userInfo.username, (val) => {
        if (val) {
            router.push('/');
        }
    }, { immediate: true });
}

export default useNavToHome
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在注册、登录页面中添加，如果已登录则跳转到首页

import useNavToHome from '@/hooks/useNavToHome'

useNavToHome()
1
2
3

---

首页列表分页展示博客信息

添加卡片式组件，展示博客关键信息 src/components/BlogCard.vue

  
  
  

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

列表分页显示 src/views/HomeView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

---

博客详情页

博客内容存储为marddown格式的文本
安装markdown工具 markdown-it

npm install markdown-it --save
1

博客详情页 src/view/BlogDetailView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---

封装分页组件

添加文件 src/components/ListPage.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

---

我的博客页面

使用table表格展示列表数据 src/views/MyBlogView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

---

新建、编辑博客页面

添加文件 src/views/CreateEditBlogView.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

---

性能优化–打包时拆分第三方依赖

打包项目

npm run build
1

可以查看打包后每个文件的大小

安装 Import Cost 插件，可以在每个vue文件中，查看第三方依赖库的文件大小

Vue、Element-Plus 可以拆分出来，减小首页index文件的大小
修改配置文件 vite.config.js

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将 Vue 和 Element Plus 单独打包为一个公共块
          vue: ['vue'],
          'element-plus': ['element-plus'],
          'markdown-it': ['markdown-it']
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12