5.1 使用vite + vue搭建

win + r 打开终端

切换到你想要搭建的盘

npm init vite@latest

跟着以下步骤取名即可

cd fullStackBlog

npm install

npm run dev

默认在 http://localhost:5173/ 下启动了

5.2 用vscode打开项目并安装需要的插件

1、删除多余的 HelloWorld.vue 文件

2、安装需要的插件

网络请求我直接用fetch了，你需要用axios的话就执行以下命令安装，使用也很简单

npm i axios -S

安装Element-Plus并引入到入口文件 main.js （这里使用了全局引入，按需引入的参考官网，很简单）

安装element-plus/icons-vue图标

npm install @element-plus/icons-vue

全局引入

npm install element-plus --save

在main.js中引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.mount('#app')

**按需引入需要装两个插件，然后在vite.config.js中配置（打开注释部分即可）：

npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons

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 Icons from 'unplugin-icons/vite'
// import IconsResolver from 'unplugin-icons/resolver'

// http://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // AutoImport({
    //   resolvers: [
    //     ElementPlusResolver(),
    //     IconsResolver({
    //       prefix: 'Icon',
    //     })
    //   ],
    // }),
    // Components({
    //   resolvers: [
    //     ElementPlusResolver(),
    //     IconsResolver({
    //       enabledCollections: ['ep'],
    //     }),
    //   ],
    // }),
    // Icons({
    //   autoInstall: true,
    // }),
  ],
})

安装tailwindcss并配置

执行以下命令安装tailwindcss和相应的插件

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

会生成 tailwind.config.js 和 postcss.config.js 文件即可

然后在assets文件夹下创建一个 tailwind.css 文件（名称可以自定义） 写上以下代码，并引入到入口文件main.js

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// tailwind.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

// main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/css/tailwind.css'
import './style.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3、在App.vue中验证element 与 tailwind 是否生效

// App.vue

  
    
demo
    button
  

验证没问题！

5.3 页面布局

安装vue-router路由

npm install vue-router@4

在src目录下新建router文件夹，新建index.js路由文件

// router/index.js

import { createRouter, createWebHistory } from "vue-router";

const route = [
    {
        path: '/',
        component: () => import('../views/blog/List.vue')
    },
    {
        path: '/add',
        component: () => import('../views/blog/Add.vue')
    }
]

const router = createRouter({
  history: createWebHistory(),
  routes: [...route]
});

export default router;

在src下新建views文件夹，在views下新建blog文件夹，在blog下新建List.vue 和 Add.vue 文件

// List.vue

    list

// Add.vue

    add

在main.js中引入路由并挂载

// main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/css/tailwind.css'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount('#app')

在components下新建Header.vue Main.vue Footer.vue Nav.vue 并添加如下代码：

// Header.vue

    
        
            
                
                    
                        blog
                        blog
                    
                
                
                    

// Main.vue

    
        
            
        
    





.container {
    min-width: 100%;
    height: calc(100vh - 128px);
}

// Footer.vue

    
        Footer
    

// Nav.vue

  
    List
  
  
    Add
  








.button-container {
  display: flex;
  background-color: rgba(0, 73, 144);
  width: 250px;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px,
    rgba(0, 73, 144, 0.5) 5px 10px 15px;
  transition: all 0.5s;
}
.button-container:hover {
  width: 300px;
  transition: all 0.5s;
}

.button {
  outline: 0 !important;
  border: 0 !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all ease-in-out 0.3s;
  cursor: pointer;
}

.button:hover {
  transform: translateY(-3px);
}

.icon {
  font-size: 20px;
}

// App.vue改造为以下结构

初步布局完成，页面如图：

5.4 新增博客页面 （前端部分）

页面使用了markdown语法，安装以下插件：

编写markdowm：mavon-editor

展示markdown：markdown-it、highlight.js

vue2下安装mavon-editor，vue3下安装mavon-editor@next

npm install mavon-editor@next markdown-it highlight.js  --save

// Add.vue

四个字段：

​ 标题：title

​ 作者： auth

​ 文档：mdoc

​ 创建时间：createtime

// markdowm 暂时对图片没做处理

    
        
            
            
        

        
            
        

        
            
                Submit
            
        
    





.add-wrapper {
    width: 90%;
    height: 96%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.top-anonymous {
    width: 100%;
}
.bottom-anonymous {
    margin-top: 32px;
    width: 100%;
    height: 100%;
}




.button_submit {
  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
  border: none;
  font-size: 1.2em;
  border-radius: 1.5em;
  padding: 4px;
  transition: border-top-left-radius 0.2s ease-in, 
  border-top-right-radius 0.2s ease-in 0.15s, 
  border-bottom-right-radius 0.2s ease-in 0.3s,
  border-bottom-left-radius 0.2s ease-in 0.45s, 
  padding 0.2s ease-in;
  position: relative;
}

.button_submit__int {
  background-color: #212121;
  color: white;
  border-radius: 1.3em;
  padding: 10px 40px;
  transition: all 0.2s ease-in,
  border-top-left-radius 0.2s ease-in, 
  border-top-right-radius 0.2s ease-in 0.15s, 
  border-bottom-right-radius 0.2s ease-in 0.3s,
  border-bottom-left-radius 0.2s ease-in 0.45s,
  padding 0.2s ease-in;
  font-weight: 600;
  z-index: -1;
  box-shadow: -15px -10px 30px -5px rgba(225, 0, 255, 0.8),
    15px -10px 30px -5px rgba(255, 0, 212, 0.8),
    15px 10px 30px -5px rgba(255, 174, 0, 0.8),
    -15px 10px 30px -5px rgba(255, 230, 0.8);
}

.button_submit:active .button_submit__int {
  padding: 10px 30px;
}

.button_submit:hover {
  border-radius: 0;
}

.button_submit:hover .button_submit__int {
  border-radius: 0;
}

.button_submit:hover .button_submit__int {
  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.7),
    25px -10px 30px -5px rgba(255, 0, 212, 0.7),
    25px 10px 30px -5px rgba(255, 174, 0, 0.7),
    -25px 10px 30px -5px rgba(255, 230, 0, 0.7);
}

5.4 列表页面展示（前端部分）

// List.vue 页面数据目前是伪造的，后面后端写完后直接调用

    
        
            
                
            
            
                
                    
                        {{ item.title }}
                    
                    
                        
                            
                                
                            
                            {{ item.auth }}
                        
                        
                            
                                
                            
                            {{ item.createtime }}
                        
                    
                    
                        
                    
                    
                
            
            
        
        
            
            
        
    
    
        
    





.write-btn-wrapper {
    position: fixed;
    top: 120px;
    right: 40px;
}
.blog-list {
    height: 90%;
}