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