最近找工作屡屡碰壁，突然不想努力了…
最初想搭建一个个人博客，技术栈确定为React + TS + Vite，一方面是为了学习新知识，一方面是实在闲着。但是由于之前做过个人博客所有觉得个人博客可能没啥意思。主要是设计也是一大麻烦，毕竟前端嘛做的东西还是得好看点的。
1.界面情况（目前）
完成了主界面
图片如下
2.功能实现之vite搭建React项目
第一种方法
1.初始化项目
npm init -y
2.引入vite
yarn add vite -D
3.加入命令脚本
“scripts”: {
“dev”: “vite”
}
(package.json文件)
4.根目录创建index.html,index.jsx文件
index.html文件内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background-color: #02101b;}html{font-size: 20px;}</style>
</head>
<body><div id="app"></div>//TweenMax为第三方动画库，需要去下载这个js文件<script src="./assest/js/TweenMax.min.js"></script>//直接cdn引入react<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>//index.jsx为初始js文件，通过ReactDom.render()挂载页面到#app内<script type="module" src="./index.jsx"></script>
</body>
</html>
index.jsx文件内容
import ReactDOM from 'react-dom';
import {useCallback, useEffect, useState,useLayoutEffect} from 'react'function App(){return(<div></div>)
}ReactDOM.render(<App/>,document.getElementById('app')
)
我们的页面元素可以直接丢入app内，后续会嵌套路由
2.使用vite一步到位
yarn create vite
输入项目名称
选择react模式
回车即可
3.引入scss，react-router-dom
yarn add scss -D
yarn add react-router-dom -D
后续会引入aplayer
yarn add aplayer -D
4.运用React-router
由于我们不是单页面开发，会设计多个页面跳转
我们建立一个router文件夹（用过vue的小伙伴一定不陌生）
router文件夹呢建立index.jsx文件
我们在router内配置路由并导出routerjs文件
5.修改index.jsx文件运用路由
import ReactDOM from 'react-dom';
import MyRouter from './router/index.jsx';
import {useCallback, useEffect, useState,useLayoutEffect} from 'react'function App(){return(<div><MyRouter></MyRouter></div>)
}ReactDOM.render(<Router><App/></Router>,document.getElementById('app')
)
到这一步我们的环境大体已经搭建好了，下篇文章会去实现meun菜单。
至于为什么不用TS，因为，我写的时候忘记了…
ps:TweenMax.js传送门（https://www.tweenmax.com.cn/index.html）
