开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天 第24篇，点击查看活动详情

简介

最近预览过很多比较有趣和比较鲜艳的博客界面，深深被吸引了过去，比如图中这位大佬的博客主页，随算不上功能强大，但是简约的风格跟掘金差不多，哈哈，这也是为什么被掘金这种风格吸引的缘故；而且拥有属于自己的一个博客主页（不是别人平台的网站）也是蛮有成就感的；但是现在越来越多的小伙伴都拥有自己的博客发表博文了，也不差我一个；我就想到了另一个方向。

能既不用耗费金钱购买服务器，又不用花费更多精力搭建一个内容管理系统还要时刻预防被人攻击的风险的选择，那就是在Github上面搭建一个静态网站；我考虑的方案是采用Vue3.2构建项目，打包后的代码发上去；即便被攻击我也不怕哈哈，有大佬（Git公司）撑腰。当然静态的网站，与其在那，还不如在掘金发文，有流量又有礼品，而且编写文章及各种主题选择都很方便，何必舍近求远呢。

所以我打算做一个用于展示功能模块，以及样式参考的demo(纯前端)，这是我的GitBlog定位，下面就介绍下搭建历程，后续会继续分模块跟大家分享我建博客的过程直到发布成功，哈哈哈，欢迎点赞关注谢谢

Git: 在Github上轻松搭建个人博客

Vue3.2: 记Vite+ESLint与Prettier项目搭建实用配置

项目创建

使用vite初始化项目

项目命名为tmx(掘金昵称：糖墨夕)-gitblog(github上面搭建blog),简称：tmx-gitblog

yarn create vite-app tmx-blog

1. 初始化完项目，通过cd tmx-gitblog进行到项目里面，然后再执行npm install安装依赖(建议使用淘宝镜像)

2. 依赖安装完需要通过npm run dev启动项目

是不是瞬间体验到了秒启动项目的感觉，启动之后就可以通过http://localhost:3000来访问项目了

查看项目结构

使用vscode打开项目之后，可以查看到新建的项目结构与vue-cli4创建的项目结构基本一样，都是我们很熟悉的App.vue和main.js

打开main.js我们发现Vue2.x和Vue3.x的写法悄然变化，

Vue2.x

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App
  }
});

Vue3.x

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')

引入TDesign

选择可以支持Vue3版本的Vue Next

进度

目前初步成形， 后面会逐步完善每一个盒子，敬请关注期待😚

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 23 天，点击查看活动详情