commit
8cc4e1019b
26 changed files with 3291 additions and 0 deletions
@ -0,0 +1,14 @@ |
|||
# http://editorconfig.org |
|||
root = true # 应在文件顶部指定的特殊属性，true表示停止搜索当前文件 |
|||
|
|||
[*] |
|||
charset = utf-8 # 统一字符格式 |
|||
indent_style = space # 缩进方式为空格 |
|||
indent_size = 2 # 缩进为两个空格 |
|||
end_of_line = lf # 换行符统一用lf |
|||
insert_final_newline = true # 保证文件结尾留一个空行 |
|||
trim_trailing_whitespace = true # 移除新一行前的空白字符 |
|||
|
|||
[*.md] |
|||
insert_final_newline = false |
|||
trim_trailing_whitespace = false |
|||
@ -0,0 +1,5 @@ |
|||
node_modules |
|||
.DS_Store |
|||
dist |
|||
dist-ssr |
|||
*.local |
|||
@ -0,0 +1,21 @@ |
|||
# 秦时明月 |
|||
|
|||
### 技术栈 |
|||
|
|||
* vite |
|||
* react |
|||
* react-router |
|||
* redux |
|||
* windicss |
|||
|
|||
### 目的 |
|||
|
|||
制作一个展示秦时明月的网站 |
|||
|
|||
> 资源链接： |
|||
> [React Router](https://reactrouter.com/web/guides/quick-start) |
|||
> [vite](https://cn.vitejs.dev/config/#resolve-alias) |
|||
> [windicss](https://windicss.org/utilities/variants.html) |
|||
> [react-admin](https://gitee.com/sxfad/react-admin?_from=gitee_search) |
|||
> [实现SLOT](https://www.jb51.net/article/165648.htm) |
|||
> [context](https://www.jianshu.com/p/65b348bf86ad) |
|||
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,13 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
<title>Vite App</title> |
|||
</head> |
|||
<body> |
|||
<div id="root"></div> |
|||
<script type="module" src="/src/main.tsx"></script> |
|||
</body> |
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,26 @@ |
|||
{ |
|||
"version": "0.0.0", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "tsc && vite build", |
|||
"serve": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"classnames": "^2.3.1", |
|||
"react": "^17.0.0", |
|||
"react-dom": "^17.0.0", |
|||
"react-router-dom": "^5.2.0" |
|||
}, |
|||
"devDependencies": { |
|||
"@types/node": "^15.12.5", |
|||
"@types/react": "^17.0.0", |
|||
"@types/react-dom": "^17.0.0", |
|||
"@types/react-router-dom": "^5.1.7", |
|||
"@vitejs/plugin-react-refresh": "^1.3.1", |
|||
"sass": "^1.35.1", |
|||
"typescript": "^4.3.2", |
|||
"vite": "^2.3.8", |
|||
"vite-plugin-windicss": "^1.2.0", |
|||
"windicss": "^3.1.3" |
|||
} |
|||
} |
|||
@ -0,0 +1,41 @@ |
|||
import { |
|||
BrowserRouter as Router, |
|||
Switch, |
|||
Redirect, |
|||
Route, |
|||
Link, |
|||
} from "react-router-dom"; |
|||
import React from "react"; |
|||
|
|||
import { pageList } from "@/plugins/pageHoc"; |
|||
|
|||
import Layout from "@/views/Layout"; |
|||
|
|||
import Home from "@/views/Home"; |
|||
import About from "@/views/About"; |
|||
|
|||
export default function () { |
|||
console.log(pageList); |
|||
|
|||
return ( |
|||
<Router> |
|||
<Layout |
|||
render={() => { |
|||
return ( |
|||
<Switch> |
|||
<Route path="/about"> |
|||
<About /> |
|||
</Route> |
|||
<Route path="/home"> |
|||
<Home /> |
|||
</Route> |
|||
<Route path="/"> |
|||
<Redirect to="/home"></Redirect> |
|||
</Route> |
|||
</Switch> |
|||
); |
|||
}} |
|||
></Layout> |
|||
</Router> |
|||
); |
|||
} |
|||
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
@ -0,0 +1,127 @@ |
|||
/* http://meyerweb.com/eric/tools/css/reset/ |
|||
v2.0 | 20110126 |
|||
License: none (public domain) |
|||
*/ |
|||
|
|||
html, |
|||
body, |
|||
div, |
|||
span, |
|||
applet, |
|||
object, |
|||
iframe, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
p, |
|||
blockquote, |
|||
pre, |
|||
a, |
|||
abbr, |
|||
acronym, |
|||
address, |
|||
big, |
|||
cite, |
|||
code, |
|||
del, |
|||
dfn, |
|||
em, |
|||
img, |
|||
ins, |
|||
kbd, |
|||
q, |
|||
s, |
|||
samp, |
|||
small, |
|||
strike, |
|||
strong, |
|||
sub, |
|||
sup, |
|||
tt, |
|||
var, |
|||
b, |
|||
u, |
|||
i, |
|||
center, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ol, |
|||
ul, |
|||
li, |
|||
fieldset, |
|||
form, |
|||
label, |
|||
legend, |
|||
table, |
|||
caption, |
|||
tbody, |
|||
tfoot, |
|||
thead, |
|||
tr, |
|||
th, |
|||
td, |
|||
article, |
|||
aside, |
|||
canvas, |
|||
details, |
|||
embed, |
|||
figure, |
|||
figcaption, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
output, |
|||
ruby, |
|||
section, |
|||
summary, |
|||
time, |
|||
mark, |
|||
audio, |
|||
video { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
font-size: 100%; |
|||
font: inherit; |
|||
vertical-align: baseline; |
|||
} |
|||
/* HTML5 display-role reset for older browsers */ |
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
menu, |
|||
nav, |
|||
section { |
|||
display: block; |
|||
} |
|||
|
|||
ol, |
|||
ul { |
|||
list-style: none; |
|||
} |
|||
blockquote, |
|||
q { |
|||
quotes: none; |
|||
} |
|||
blockquote:before, |
|||
blockquote:after, |
|||
q:before, |
|||
q:after { |
|||
content: ""; |
|||
content: none; |
|||
} |
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
@import "./reset.scss"; |
|||
body, |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53", sans-serif; |
|||
} |
|||
body{ |
|||
background-image: url("@/assets/images/0.jpg"); |
|||
background-attachment: fixed; |
|||
background-position: center top 36px; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
} |
|||
a { |
|||
// color: initial; |
|||
text-decoration: none; |
|||
color: inherit; |
|||
} |
|||
|
|||
@mixin clearfix { |
|||
&:after { |
|||
clear: both; |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
line-height: 0; |
|||
overflow: hidden; |
|||
} |
|||
*height: 1%; |
|||
} |
|||
|
|||
.clearfix { |
|||
@include clearfix; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
$color: green; |
|||
@ -0,0 +1,11 @@ |
|||
import React from "react"; |
|||
import cs from "classnames" |
|||
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; |
|||
|
|||
export default function () { |
|||
return ( |
|||
<div className={cs("header clearfix")}> |
|||
这是一个标题 |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
import React from "react"; |
|||
import ReactDOM from "react-dom"; |
|||
import "@/assets/style/common.scss"; |
|||
import "virtual:windi.css"; |
|||
import "virtual:windi-devtools"; |
|||
|
|||
import Router from "./AppRouter"; |
|||
|
|||
ReactDOM.render( |
|||
<React.StrictMode> |
|||
<Router></Router> |
|||
</React.StrictMode>, |
|||
document.getElementById("root") |
|||
); |
|||
@ -0,0 +1,28 @@ |
|||
import React, { Component } from "react"; |
|||
|
|||
export const pageList:any[] = []; |
|||
|
|||
export default function (options: any) { |
|||
return (WrappedComponent: any) => { |
|||
const { |
|||
path, // 页面路径
|
|||
} = options; |
|||
|
|||
class HOC extends React.Component { |
|||
constructor(props: any) { |
|||
super(props); |
|||
} |
|||
componentDidMount() {} |
|||
|
|||
componentWillUnmount() {} |
|||
|
|||
render() { |
|||
return <WrappedComponent {...options} {...this.props} />; |
|||
} |
|||
} |
|||
|
|||
pageList.push([{ ...options, Component: HOC }]); |
|||
console.log(pageList); |
|||
return HOC; |
|||
}; |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
export interface IOption { |
|||
page: string; // 页面路径
|
|||
title: string; // 页面标题
|
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
import React from "react"; |
|||
import { useLocation } from "react-router-dom"; |
|||
|
|||
export default function (props: any) { |
|||
|
|||
let location = useLocation() |
|||
console.log(location); |
|||
return <div className="container mx-auto">About</div>; |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
import React from "react"; |
|||
import cs from "classnames"; |
|||
import style from "./index.module.scss"; |
|||
import { Link } from "react-router-dom"; |
|||
|
|||
export default () => { |
|||
console.log(style); |
|||
|
|||
return ( |
|||
<div className="h-36px leading-36px shadow bg-white fixed top-0 left-0 right-0"> |
|||
<div className="container clearfix mx-auto"> |
|||
<div className={cs(style.logo, "text-size-20px leading-36px")}>秦时明月</div> |
|||
<ul className={cs(style.menu, style.left)}> |
|||
<li className={cs(style.menuItem, style.hover)}> |
|||
<div className={cs(style.menuItemText)}>首页</div> |
|||
</li> |
|||
<li className={cs(style.menuItem, style.hover)}> |
|||
<div className={cs(style.menuItemText)}>主角</div> |
|||
<ul className={cs(style.subMenu)}> |
|||
<li className={cs(style.subMenuItem, style.hover)}>荆天明</li> |
|||
<li className={cs(style.subMnuItem, style.hover)}>月儿（姬如千泷）</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
<ul className={cs(style.menu, style.right)}> |
|||
<li className={cs(style.menuItem)}> |
|||
<div className={cs(style.menuItemText)} title="点击登录注册">登录/注册</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,42 @@ |
|||
.logo { |
|||
@apply float-left font-bold inline-block cursor-pointer; |
|||
} |
|||
|
|||
.menu { |
|||
@apply ml-[30px]; |
|||
} |
|||
|
|||
.menu.left { |
|||
@apply float-left; |
|||
} |
|||
.menu.right { |
|||
@apply float-right; |
|||
} |
|||
.menuItem { |
|||
@apply relative float-left text-gray-800; |
|||
} |
|||
|
|||
.menuItem.hover{ |
|||
@apply hover:bg-cool-gray-200 hover:text-gray-600; |
|||
} |
|||
|
|||
.menuItemText { |
|||
@apply whitespace-nowrap block px-3 cursor-pointer; |
|||
} |
|||
|
|||
.subMenu { |
|||
@apply hidden cursor-pointer rounded-b overflow-hidden; |
|||
} |
|||
.menuItem:hover { |
|||
.subMenu { |
|||
@apply absolute left-0 top-full block bg-white shadow; |
|||
} |
|||
} |
|||
|
|||
.subMenuItem { |
|||
@apply whitespace-nowrap block px-20px text-gray-800; |
|||
} |
|||
|
|||
.subMenuItem.hover{ |
|||
@apply hover:bg-cool-gray-200 hover:text-gray-600; |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
import React from "react"; |
|||
import style from "./index.module.scss"; |
|||
import Header from "./Header"; |
|||
|
|||
export default function (props: any) { |
|||
console.log(props); |
|||
|
|||
return ( |
|||
<div> |
|||
<Header></Header> |
|||
<div className="mt-36px"> |
|||
<div className="bg-white min-h-100vh"> |
|||
<div className="container clearfix mx-auto h-500px">box</div> |
|||
</div> |
|||
<div className="min-h-100vh"> |
|||
|
|||
</div> |
|||
<div className="bg-white min-h-100vh"> |
|||
<div className="container clearfix mx-auto"> |
|||
{[...Array(100)] |
|||
.map((v, i) => i) |
|||
.map((v) => { |
|||
return <p key={v}>v</p>; |
|||
})} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
import React from "react"; |
|||
import { useLocation } from "react-router-dom"; |
|||
|
|||
export default function (props: any) { |
|||
return ( |
|||
<div> |
|||
<div className="content">{props?.render()}</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1 @@ |
|||
/// <reference types="vite/client" />
|
|||
@ -0,0 +1,25 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "ESNext", |
|||
"lib": ["DOM", "DOM.Iterable", "ESNext"], |
|||
"allowJs": false, |
|||
"skipLibCheck": false, |
|||
"esModuleInterop": false, |
|||
"allowSyntheticDefaultImports": true, |
|||
"strict": true, |
|||
"forceConsistentCasingInFileNames": true, |
|||
"module": "ESNext", |
|||
"moduleResolution": "Node", |
|||
"resolveJsonModule": true, |
|||
"isolatedModules": true, |
|||
"noEmit": true, |
|||
"jsx": "react", |
|||
"rootDir": ".", |
|||
"baseUrl": ".", |
|||
"paths": { |
|||
"@/*": ["src/*"] |
|||
} |
|||
}, |
|||
"include": ["src", "types"], |
|||
"exclude": ["node_modules"] |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
import { defineConfig } from "vite"; |
|||
import reactRefresh from "@vitejs/plugin-react-refresh"; |
|||
import WindiCSS from "vite-plugin-windicss"; |
|||
const { resolve } = require("path"); |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
css: { |
|||
preprocessorOptions: { |
|||
scss: { |
|||
additionalData: `@import "@/assets/style/global.scss";`, |
|||
}, |
|||
}, |
|||
}, |
|||
resolve: { |
|||
alias: [{ find: "@", replacement: resolve(__dirname, "src") }], |
|||
}, |
|||
plugins: [WindiCSS(), reactRefresh()], |
|||
}); |
|||
@ -0,0 +1,15 @@ |
|||
import { defineConfig } from "vite-plugin-windicss"; |
|||
function range(size, startAt = 1) { |
|||
return Array.from(Array(size).keys()).map((i) => i + startAt); |
|||
} |
|||
export default defineConfig({ |
|||
preflight: false, |
|||
safelist: [ |
|||
range(30).map((i) => `p-${i}`), // p-1 to p-3
|
|||
range(10).map((i) => `mt-${i}`), // mt-1 to mt-10
|
|||
], |
|||
extract: { |
|||
include: ['src/**/*.{vue,html,jsx,tsx}'], |
|||
exclude: ['node_modules', '.git'], |
|||
}, |
|||
}); |
|||
Loading…
Reference in new issue