Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
肉松圆圆
vite-react-ts
提交
8d228b63
V
vite-react-ts
项目概览
肉松圆圆
/
vite-react-ts
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vite-react-ts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
8d228b63
编写于
2月 10, 2023
作者:
L
lm83680
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
- add icons
上级
da636c53
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
77 addition
and
66 deletion
+77
-66
README.md
README.md
+1
-1
package-lock.json
package-lock.json
+15
-0
package.json
package.json
+1
-0
src/router/index.tsx
src/router/index.tsx
+9
-4
src/router/loading.css
src/router/loading.css
+42
-0
src/router/routeList.tsx
src/router/routeList.tsx
+1
-1
src/views/home/index.css
src/views/home/index.css
+0
-42
src/views/home/index.tsx
src/views/home/index.tsx
+2
-17
yarn.lock
yarn.lock
+6
-1
未找到文件。
README.md
浏览文件 @
8d228b63
...
...
@@ -11,8 +11,8 @@
- add sass
- add axios 及 封装api请求
- add zustand #状态管理工具
- add icons #link:https://react-icons.github.io/react-icons
#### 待装载
- add icons #link:https://react-icons.github.io/react-icons
- add framer #动画库 link:https://www.framer.com/motion/
- add chakra-ui #ui库
\ No newline at end of file
package-lock.json
浏览文件 @
8d228b63
...
...
@@ -11,6 +11,7 @@
"axios"
:
"^1.3.2"
,
"react"
:
"^18.2.0"
,
"react-dom"
:
"^18.2.0"
,
"react-icons"
:
"^4.7.1"
,
"react-router-dom"
:
"^6.4.3"
,
"sass"
:
"^1.58.0"
,
"zustand"
:
"^4.3.2"
...
...
@@ -1183,6 +1184,14 @@
"react"
:
"^18.2.0"
}
},
"node_modules/react-icons"
:
{
"version"
:
"4.7.1"
,
"resolved"
:
"https://registry.npmmirror.com/react-icons/-/react-icons-4.7.1.tgz"
,
"integrity"
:
"sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw=="
,
"peerDependencies"
:
{
"react"
:
"*"
}
},
"node_modules/react-refresh"
:
{
"version"
:
"0.14.0"
,
"resolved"
:
"https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz"
,
...
...
@@ -2283,6 +2292,12 @@
"scheduler"
:
"^0.23.0"
}
},
"react-icons"
:
{
"version"
:
"4.7.1"
,
"resolved"
:
"https://registry.npmmirror.com/react-icons/-/react-icons-4.7.1.tgz"
,
"integrity"
:
"sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw=="
,
"requires"
:
{}
},
"react-refresh"
:
{
"version"
:
"0.14.0"
,
"resolved"
:
"https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz"
,
...
...
package.json
浏览文件 @
8d228b63
...
...
@@ -12,6 +12,7 @@
"
axios
"
:
"
^1.3.2
"
,
"
react
"
:
"
^18.2.0
"
,
"
react-dom
"
:
"
^18.2.0
"
,
"
react-icons
"
:
"
^4.7.1
"
,
"
react-router-dom
"
:
"
^6.4.3
"
,
"
sass
"
:
"
^1.58.0
"
,
"
zustand
"
:
"
^4.3.2
"
...
...
src/router/index.tsx
浏览文件 @
8d228b63
import
{
Routes
,
Route
,
BrowserRouter
as
Router
}
from
"
react-router-dom
"
;
import
{
Suspense
}
from
"
react
"
;
import
routeList
from
"
./routeList
"
import
"
./loading.css
"
// 封装一层 专门负责显示页面标题
const
DomTitle
=
({
item
}
:
any
)
=>
{
const
DomTitle
=
({
item
}
:
any
)
=>
{
document
.
title
=
item
.
title
;
return
<
item
.
component
/>
}
const
MyRouter
=
()
=>
(
<
Router
>
<
Suspense
fallback
=
{
<
div
>
loading...
</
div
>
}
>
<
Suspense
fallback
=
{
<
div
className
=
"spinner-loading-box"
>
<
div
className
=
"spinner-loading"
></
div
>
</
div
>
}
>
<
Routes
>
{
routeList
.
map
((
item
:
any
,
index
)
=>
(
<
Route
key
=
{
index
}
path
=
{
item
.
path
}
element
=
{
<
DomTitle
item
=
{
item
}
/>
}
></
Route
>
routeList
.
map
((
item
:
any
,
index
)
=>
(
<
Route
key
=
{
index
}
path
=
{
item
.
path
}
element
=
{
<
DomTitle
item
=
{
item
}
/>
}
></
Route
>
))
}
</
Routes
>
...
...
src/router/loading.css
0 → 100644
浏览文件 @
8d228b63
.spinner-loading-box
{
height
:
100vh
;
width
:
100vw
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
.spinner-loading
{
width
:
56px
;
height
:
56px
;
display
:
grid
;
border
:
4.5px
solid
#0000
;
border-radius
:
50%
;
border-color
:
#dbdcef
#0000
;
animation
:
spinner-e04l1k
1s
infinite
linear
;
}
.spinner-loading
::before
,
.spinner-loading
::after
{
content
:
""
;
grid-area
:
1
/
1
;
margin
:
2.2px
;
border
:
inherit
;
border-radius
:
50%
;
}
.spinner-loading
::before
{
border-color
:
#474bff
#0000
;
animation
:
inherit
;
animation-duration
:
0.5s
;
animation-direction
:
reverse
;
}
.spinner-loading
::after
{
margin
:
8.9px
;
}
@keyframes
spinner-e04l1k
{
100
%
{
transform
:
rotate
(
1turn
);
}
}
\ No newline at end of file
src/router/routeList.tsx
浏览文件 @
8d228b63
...
...
@@ -2,6 +2,6 @@ import { lazy } from "react";
export
default
[
{
path
:
"
/
"
,
title
:
"
Hello vite
"
,
component
:
lazy
(()
=>
import
(
"
../views/home
"
))
},
{
path
:
"
/login
"
,
component
:
lazy
(()
=>
import
(
"
../views/login
"
))
},
{
path
:
"
/login
"
,
title
:
"
Login
"
,
component
:
lazy
(()
=>
import
(
"
../views/login
"
))
},
// { path: "*", component: lazy(() => import("./404")) }
];
\ No newline at end of file
src/views/home/index.css
已删除
100644 → 0
浏览文件 @
da636c53
#root
{
max-width
:
1280px
;
margin
:
0
auto
;
padding
:
2rem
;
text-align
:
center
;
}
.logo
{
height
:
6em
;
padding
:
1.5em
;
will-change
:
filter
;
transition
:
filter
300ms
;
}
.logo
:hover
{
filter
:
drop-shadow
(
0
0
2em
#646cff
aa
);
}
.logo.react
:hover
{
filter
:
drop-shadow
(
0
0
2em
#61dafb
aa
);
}
@keyframes
logo-spin
{
from
{
transform
:
rotate
(
0deg
);
}
to
{
transform
:
rotate
(
360deg
);
}
}
@media
(
prefers-reduced-motion
:
no-preference
)
{
a
:
nth-of-type
(
2
)
.
logo
{
animation
:
logo-spin
infinite
20s
linear
;
}
}
.card
{
padding
:
2em
;
}
.read-the-docs
{
color
:
#888
;
}
src/views/home/index.tsx
浏览文件 @
8d228b63
import
reactLogo
from
'
../../assets/react.svg
'
import
'
./index.css
'
import
store
from
'
../../store
'
import
{
FaBeer
}
from
'
react-icons/fa
'
;
function
Home
()
{
const
getUNum
=
store
.
user
(((
state
:
{
userNum
:
number
})
=>
state
.
userNum
));
...
...
@@ -8,15 +7,7 @@ function Home() {
const
subUNum
=
store
.
user
(((
state
:
{
subUserNum
:
Function
})
=>
state
.
subUserNum
));
return
(
<
div
className
=
"App"
>
<
div
>
<
a
href
=
"https://vitejs.dev"
target
=
"_blank"
>
<
img
src
=
"/vite.svg"
className
=
"logo"
alt
=
"Vite logo"
/>
</
a
>
<
a
href
=
"https://reactjs.org"
target
=
"_blank"
>
<
img
src
=
{
reactLogo
}
className
=
"logo react"
alt
=
"React logo"
/>
</
a
>
</
div
>
<
h1
>
Vite + React
</
h1
>
<
h3
>
Lets go for a
<
FaBeer
color
=
'red'
/></
h3
>
<
div
className
=
"card"
>
<
button
>
{
getUNum
}
store状态值
...
...
@@ -27,13 +18,7 @@ function Home() {
<
button
onClick
=
{
subUNum
}
>
-1 subtractVotes
</
button
>
<
p
>
Edit
<
code
>
src/App.tsx
</
code
>
and save to test HMR
</
p
>
</
div
>
<
p
className
=
"read-the-docs"
>
Click on the Vite and React logos to learn more
</
p
>
</
div
>
)
}
...
...
yarn.lock
浏览文件 @
8d228b63
...
...
@@ -661,6 +661,11 @@
"loose-envify" "^1.1.0"
"scheduler" "^0.23.0"
"react-icons@^4.7.1":
"integrity" "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw=="
"resolved" "https://registry.npmmirror.com/react-icons/-/react-icons-4.7.1.tgz"
"version" "4.7.1"
"react-refresh@^0.14.0":
"integrity" "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ=="
"resolved" "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz"
...
...
@@ -681,7 +686,7 @@
dependencies:
"@remix-run/router" "1.3.2"
"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.2.0", "react@>=16.8":
"react@
*", "react@
^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.2.0", "react@>=16.8":
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
"resolved" "https://registry.npmmirror.com/react/-/react-18.2.0.tgz"
"version" "18.2.0"
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录