作为最菜的前端开发者，不写一篇文章 怎么能证明我最菜呢？
开始吧。
打开命令行检查一下node版本，注意 Vite 需要 Node.js 版本 >= 12.0.0
node -v
频繁切node太麻烦？试试nvm
我这边用到的版本是 v17.6.0（为保持一致方便新手阅读，以下只用npm）
输入如下 回车
npm init @vitejs/app
第一步输入y 回车
第二步给项目起名字 直接用默认的 回车就行
第三步选择react 回车
第四步选择react 回车
然后桌面上就有了我们的项目，名字为默认名字：vite-project
把项目拖到vscode里，可以看到 目前有这些目录
然后命令行依次执行
cd vite-project
npm install
npm run dev
可以看到 项目成功启动 耗时362ms,这也是vite很受前端欢迎的原因之一，启动特别快。然后复制链接在浏览器打开，如下，项目成功启动了。
我们先从router6开始吧,可以新启一个命令行，输入（等的太慢可以用_cnpm_）
npm install react-router-dom@6 --save
(PS：目前官方从5开始已经放弃原有的react-router库，统一命名为react-router-dom)
然后在package.json可以看到安装的router版本
成功之后，娃们可以看到在main.jsx文件里引入了,那我们改造一下App.jsx文件吧，内容全部替换如下
export default function App() { return <div>Hello,world!</div>}
然后看看页面，是不是有些许熟悉的感觉呢？好啦 开始构建我们的路由吧。
在src下新建pages文件夹，然后在pages下新建
Home.jsx文件
export default function Home() { return <div style={{color:'red'}}>这里是主页的内容</div>}
About.jsx文件
export default function About() { return <div style={{color:'green'}}>关于我你想知道什么？</div>}
OK,然后回到App.jsx文件，开始建我们的路由吧
App.jsx
import { Link, BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";export default function App() { return ( <BrowserRouter> <ul> <li> <Link to="/">去主页</Link> </li> <li> <Link to="/about">去关于</Link> </li> </ul> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/about" element={<About />}></Route> </Routes> </BrowserRouter> );}
然后打开页面 一个简易的路由就出来啦。
Link,相当于a链接，用来改变路由，跳转到相应位置，BrowserRouter是包裹路由的，Routes是包裹Route的，这是必须的，Route是路由的最小单元。从页面上可以看出react router6和之前版本的一些区别。下一章，我会带你了解router的编程式导航内容，还会带你把项目结构优化一下，使之成为一个工程项目。
git地址：github.com/1575411352/…
