(项目尚未完成) 该项目源码可以在github上找到，喜欢的话可以star一下，以资鼓励

项目结构

    my-blog
    |——public
    |——src
    |  |——assets
    |  |  |——img
    |  |  |——font
    |  |  |——...
    |  |——components
    |  |——Header.vue
    |  |——Footer.vue
    |  |——Article.vue
    |  |——...
    |  |——css
    |  |——style.css
    |  |——App.vue
    |——index.html
    |——package.lock.json
    |——package.json
    |——postcss.config.cjs
    |——tailwind.config.cjs
    |——vite.config.cjs

技术栈

学习一项技术是需要成本的，成本指的是时间成本。个人觉得互联网技术的没有金钱成本，几乎所有的技术你都能够找到官方网站，并且学习他们的官方文档。官方文档是一个很好的学习工具，利用好官方文档将大大减少你的学习成本。

• vue全家桶(vue+vuex+vue-router-vite)
  • 中文文档
    • vue
    • vuex
    • vue-router
    • vite
  • 英文文档
    • vue
    • vuex
    • vue-router
    • vite
• axios
  • 英文文档
• tailwindcss框架
  • 中文文档
  • 英文文档

相关文件配置

package.json的配置

{
  "name": "my_blog",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "mime-types": "^2.1.35",
    "typescript": "^4.9.3",
    "vite": "^4.2.0",
    "vue-tsc": "^1.2.0"
  }
}

tailwind配置

tailwind是一个前端css框架，使用起来非常方便，只需要在元素上直接写类名就可以添加样式。下面是该项目的与tailwind的一些配置(在tailwind.config.cjs中进行配置)

module.exports = {
    content:[
        './src/**/*{.vue,.js,.ts,.jsx,.tsx}',
        "./src/**/*{.otf,.ttf,.woff,.woff2,.eot,.svg}",
        './index/html'
    ],
    // darkMode:'class',
    theme:{
        // 直接在theme中添加colors对象会重写tailwind的colors，修改默认的颜色配置，
        // 如果想添加颜色配置而不想修改默认颜色配置，可以在theme下的extend做出修改
        colors:{
        // 配置颜色
            red: {
                lighter: "#ff0000",
                default: "#8b0000",
                darker: "#ffb6c1"
            },
            orange: {
                lighter: "#ffa500",
                default: "#ff8c00",
                darker: "#ffdab9"
            }，
            // 根据项目需求自行添加颜色配置
        },
        // extend内的属性会对原有属性进行扩展，而不会完全覆盖原有属性
        extend:{
            // 在fontFamily中添加自定义的字体样式
            fontFamily:{
                "custom":["myfont", "sans-serif"] 
            },
            // 添加colors配置，不会重写colors
            colors：{}
            // 其他要添加的配置
        }
    }
}

postcss配置

postcss是一个对处理css文件浏览器兼容以及优化css文件的使用工具，搭配插件可以更好的管理代码，提高效率

    // 添加tailwind，方便管理tailwind
    const tailwindcss = require("tailwindcss")
    // 添加autoprefixer，autoprefixer是添加浏览器前缀的插件
    const autoprefixer = require("autoprefixer")
    module.exports = {
        plugins: [
            tailwindcss,
            autoprefixer
        ]
}

编写组件

Footer组件

<script setup lang="ts">
    //copomsable here
</script>
<template>
    <footer class=" py-6 ">
        <div class="container justify-between  items-center">
            <div class="text-[12px] flex flex-row justify-center">
                <p class="pr-[10px]">&copy; 2023 <a href="#home">Gotya.com</a>. All Rights Reserved.</p>
                <p class="text-[12px]">Designed by Gotya</p>
            </div>
        </div>
    </footer>
</template>