Vue3.3.4+Vite使用组合式API开发一个简单的博客+打包上线

摘要

本次案例是使用Vue3.3.4的组合式API实现一个简单的博客开发流程和组件使用示例代码，比较简单，主要是通俗易懂，了解组合式API的使用。

创建项目

Windows cmd创建一个Vue3.2项目（使用cnpm国内镜像高速构建）

开发

组件

views/Index.vue 首页组件
components/blogList.vue 博客列表
components/SingleBlog.vue 单条博客
views/blogInfo.vue 单条博客的详情

路由

main.js

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

router/index.js

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index
    },
    {
      path: '/blog/:id',
      name: 'blogInfo',
      component: blogInfo
    }
  ]
})

export default router

组件代码

views/Index.vue

<script setup>
import { ref } from "vue"

// 导入博客列表组件
import blogList from "../components/blogList.vue"

// 博客数据（仅作演示，实际需要通过async await axios请求服务器获取）
const blogData = ref([
  { id:100, title:"广东2023年高招专科批征集志愿投档分数线", body:"100内容" },
  { id:101, title:"广东：2023年高考专科批体育艺术类统考共投出14927人", body:"101内容" },
  { id:102, title: "广东2023年高考专科批投档分数线", body: "102内容" },
  { id:103, title: "广东2023年高考专科提前批投档情况公布", body: "103内容" },
  { id:104, title:"广东2023年本科批第二次征集志愿投档分数线", body:"104内容" }
])
</script>

<template>
  <div class="blogContainer">

    <!-- 使用博客列表组件，将博客数据传递过去 -->
    <blogList :blogList="blogData" />
  </div>
</template>

<style scoped>
  .blogContainer{
    width: 60%;
    margin: 50px auto 0;
    background: #f1f1f1;
    padding: 20px;
    border-radius: 10px;
  }
</style>

components/blogList.vue

<script setup>

// 导入单条博客组件
import SingleBlog from "../components/SingleBlog.vue"

// 接收Index组件传过来的博客数据展示在博客列表组件中
// Array代表传过来的数据类型
// 例如 [{},{},{},...] 所以是Array
defineProps({
    blogList:Array
})

</script>

<template>
  <div v-for="blog in blogList" :key="blog.id" class="blogCard">

    <!-- 将for出来的每一条都传到单条博客组件 -->
    <SingleBlog :blog="blog"/>
  </div>
</template>

<style scoped>
  .blogCard{
    width: 100%;
    height: 100px;
  }
</style>

components/SingleBlog.vue

<script setup>

// 接收博客列表传过来的单条博客数据
// Object代表传过来的是一个对象
// 例如 { id:100, title:"广东2023年高招专科批征集志愿投档分数线", body:"100内容" }
// 所以是Object
defineProps({
    blog:Object
})

</script>

<template>

  <!-- 使用路由跳转 -->
  <RouterLink :to="'/blog/' + blog.id">

    <!-- 标题 -->
    <h4>{{ blog.title }}</h4>
  </RouterLink>

  <!-- 内容，这里实际上运用需要做截断处理，因为body属于正文，超长就影响阅读了，所以在列表只需要展示部分内容 -->
  <p>{{ blog.body }}</p>
</template>

<style scoped>
  p{
    color: #666;
  }
</style>

views/blogInfo.vue

<script setup>

import { ref } from "vue"

// 导入使用路由的组件
// 用途：获取路由参数
import { useRouter } from "vue-router";

// 获取当前路由参数
const router = useRouter();
const router_id = router.currentRoute.value.params.id;

// 根据blogId从服务器获取博客内容
const blogId = ref(router_id)

// axios
// 这里我就不写了，自己加强学习，结合axios请求服务器获取Array然后渲染到这个组件即可

</script>

<template>
  <h1>当前博客ID：{{ blogId }}</h1>
</template>

<style scoped>
</style>

App.vue
这个组件直接使用路由容器即可，因为在路由配置中已经将所有组件渲染到<RouterView></RouterView>，即根据路由来决定渲染的组件，然后将这个组件渲染到<RouterView></RouterView>

<script setup>
</script>

<template>
  <RouterView></RouterView>
</template>

<style scoped>

</style>

效果

打包

打包在根目录，无需配置。
打包后，准备部署在生产环境的二级目录，需要在vite.config.js配置二级目录路径。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? '/vue3-vite-bulid-blog/' : '/',
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  }
})

其中base: process.env.NODE_ENV === 'production' ? '/vue3-vite-bulid-blog/' : '/',这个配置，如果没有，你需要增加。/vue3-vite-bulid-blog/是你的服务器的二级目录名。

打包命令
我目前所在的开发环境是Windows，在项目目录进入cmd，执行：

npm run build

即可快速打包。
我使用的是cnpm

打包完成后，会有一个dist目录

里面就是可以放在服务器运行的编译后html、css、JavaScript代码。

将这些代码全部上传至你打包配置的目录下，访问域名即可。

演示

http://demo.likeyunba.com/vue3-vite-bulid-blog/

作者

TANKING