从0开始边做边学，用vue和python做一个博客，非规范化项目，怎么简单怎么弄，跑的起来有啥毛病解决啥毛病（一）

本文链接：https://blog.youkuaiyun.com/obliv/article/details/144088183

非专业程序员，只是记录一下从啥也不会，一步一步根据需求去做这么一个项目，毕竟没系统学过，上手快才是王道，怎么简单怎么弄，跑的起来有啥毛病解决啥毛病。虽然AI现在很强大，但是自己知道些底层的东西比较好之后做些零碎的小活。

项目大概情况：

个人博客站点，前端vue，有个vite的东西据说加载的快，然后ui我看有个挺好看的naive-ui，最新的那个缓存什么的用pinia，嗯，大概就这些，后端python的fastapi，因为别的语言没接触过，就python还算能看懂些。

规划一下总体的内容：

第一步：基本博客

博客，文章、分类、用户留言评论，邮件回复评论，无用户注册登录那些。主要是学学前端怎么美化和基础框架的学习吧。

第二步：用户相关和知识付费功能

增加用户注册登录，对接支付和文章付费，会员充值，页面广告等内容。如果有空的话还会研究下各个自媒体平台文章同步的功能，比如公众号、知乎、csdn、头条等等这些平台。尽量满足作为一个科技类自媒体博主的日常需求吧。

第三步：功能接入变为多应用站点

站点加一些直接可以用的应用进去，除了文章教程外，直接就能有结果的站点应该还是很棒的，会把一些常用的功能逐步集成进去，比如所有的AI接口，AI文字、AI图片、AI视频什么的，一些需要消耗资源的作为付费内容去搞点零花钱。

第四步：移动端开发

有了应用付费功能在了，就要开始研究手机端H5和小程序相关内容了，目前看小程序端应该就是用uniapp了。具体的到时候再研究了。

看来这个战线拉的很长，尽量一个月看看搞成什么样吧。

项目开始

先新建文件夹创建一个vue项目

vue项目有cli和vite，具体是什么也不用太考虑，什么优缺点也无所谓，感觉主流是vite创建项目，因为加载快，那就用这个。

创建项目自然跟着文档来了，有需要详细的自己看☞ vite的中文文档
在创建项目之前需要node环境
vite官方说明
node.js就正常下载安装一路下一步就行了。☞node.js官方地址
然后按照vite官方文档开始创建项目。

npm create vite@latest

开始填坑：当你cmd窗口输入这个内容的时候会报错
在这里插入图片描述
因为你需要管理员权限打开cmd才可以。。。
然后就提示你输入项目名称
然后选择vue项目模板

然后选择语言，ts不懂，就选择js吧

现在项目就创建成功了，他会提示让你进入文件夹，然后运行启动

依次输入这三行代码，第一行就是进入到项目文件夹，第二行就是安装默认的一些包，第三行就是启动程序了。
在这里插入图片描述
现在看到提示这个地址http://localhost:5173/就可以用浏览器打开了

vue项目创建成功。

开始主页设计

先在src目录下创建一个views文件夹保存页面文件，然后新建一个home.vue文件开始写主页内容。
在这里插入图片描述
主页设计的样子大概就这样，毕竟没有UI设计的功底，简单点先弄着吧

一个好的页面当然需要一个好看的UI库了，接下来就是安装naive-ui了

naive-ui安装

详细的看这个文档就可以naive-ui中文文档
在这里插入图片描述
首先在项目下安装UI和字体，照着弄就行。

npm i -D naive-ui

安装字体

npm i -D vfonts

naive-ui的图标是使用的xicons，也有很多图标可以使用，选一个喜欢的安装就行
在这里插入图片描述

安装图标库

npm i  @vicons/ionicons5

配置自动引入，文档中的这部分直接cv到vite.config.js中
在这里插入图片描述
前提是需要安装这两个组件unplugin-auto-import和unplugin-vue-components

npm i unplugin-auto-import
npm i unplugin-vue-components

然后需要再main.js中挂载naive-ui和字体那些内容才可以使用。
默认项目的main.js是这样的

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

引入UI之后是这样

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import naive from 'naive-ui'
// 通用字体
import 'vfonts/Lato.css'
// 等宽字体
import 'vfonts/FiraCode.css'

createApp(App).use(naive).mount('#app')

接下来就试试好不好用，先拿官网的一个按钮和图标来试一下
在这里插入图片描述

放到app.vue中看下效果

<script setup>
import {GameControllerOutline, GameController} from "@vicons/ionicons5";
</script>

<template>
  <n-button type="tertiary">
    Tertiary
  </n-button>
  <n-icon size="40">
    <GameControllerOutline/>
  </n-icon>
  <n-icon size="40" color="#0e7a0d">
    <GameController/>
  </n-icon>
  <n-icon size="40" :component="GameController"/>

</template>

在这里插入图片描述
目测正常接下来就可以开始编辑咱们得主页了，但是作为一个三剑客都没系统学过的我写css感觉可是有点烦，这个时候又发现一个好东西，叫做原子化css，就是把一堆样式封装到一起，感觉应该是便捷些，那就搞一搞吧。

原子化css

网上说tailwindcss这个行，官网说的也挺nb的，只要html就行，本着能省事则省的原则，那就按这个弄。tailwindcss中文官网
在这里插入图片描述
进入网站中按照新手入门开始搞，在这个位置找到vite框架指南

然后选择vue

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后会生成一个tailwind.config.js文件

按照官网示例把这些内容复制进去

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

然后创建一个全局的样式文件style.css
因为原有项目src中有style.css就直接改他就行
在这里插入图片描述

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

之后在我们的app.vue中写入这个示例，然后运行
在这里插入图片描述
成功！

基础样式的东西也就这样了，接下来开始搞页面实现吧！