commit
2761478f49
@ -0,0 +1,20 @@ |
|||||||
|
module.exports = { |
||||||
|
root: true, |
||||||
|
env: { browser: true, es2020: true }, |
||||||
|
extends: [ |
||||||
|
'eslint:recommended', |
||||||
|
'plugin:react/recommended', |
||||||
|
'plugin:react/jsx-runtime', |
||||||
|
'plugin:react-hooks/recommended', |
||||||
|
], |
||||||
|
ignorePatterns: ['dist', '.eslintrc.cjs'], |
||||||
|
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, |
||||||
|
settings: { react: { version: '18.2' } }, |
||||||
|
plugins: ['react-refresh'], |
||||||
|
rules: { |
||||||
|
'react-refresh/only-export-components': [ |
||||||
|
'warn', |
||||||
|
{ allowConstantExport: true }, |
||||||
|
], |
||||||
|
}, |
||||||
|
} |
@ -0,0 +1,24 @@ |
|||||||
|
# Logs |
||||||
|
logs |
||||||
|
*.log |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
pnpm-debug.log* |
||||||
|
lerna-debug.log* |
||||||
|
|
||||||
|
node_modules |
||||||
|
dist |
||||||
|
dist-ssr |
||||||
|
*.local |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.vscode/* |
||||||
|
!.vscode/extensions.json |
||||||
|
.idea |
||||||
|
.DS_Store |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw? |
@ -0,0 +1,8 @@ |
|||||||
|
# React + Vite |
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
||||||
|
|
||||||
|
Currently, two official plugins are available: |
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh |
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
@ -0,0 +1,14 @@ |
|||||||
|
<!doctype html> |
||||||
|
<html lang="zh"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8" /> |
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
|
<title>延安嘉盛石油机械有限责任公司</title> |
||||||
|
<link rel="stylesheet" href="/style.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="root"></div> |
||||||
|
<script type="module" src="/src/main.jsx"></script> |
||||||
|
</body> |
||||||
|
</html> |
@ -0,0 +1,29 @@ |
|||||||
|
{ |
||||||
|
"name": "vite-project", |
||||||
|
"private": true, |
||||||
|
"version": "0.0.0", |
||||||
|
"type": "module", |
||||||
|
"scripts": { |
||||||
|
"dev": "vite", |
||||||
|
"build": "vite build", |
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", |
||||||
|
"preview": "vite preview" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "^1.4.0", |
||||||
|
"react": "^18.2.0", |
||||||
|
"react-dom": "^18.2.0", |
||||||
|
"react-router-dom": "^6.14.2", |
||||||
|
"sass": "^1.64.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@types/react": "^18.2.15", |
||||||
|
"@types/react-dom": "^18.2.7", |
||||||
|
"@vitejs/plugin-react": "^4.0.3", |
||||||
|
"eslint": "^8.45.0", |
||||||
|
"eslint-plugin-react": "^7.32.2", |
||||||
|
"eslint-plugin-react-hooks": "^4.6.0", |
||||||
|
"eslint-plugin-react-refresh": "^0.4.3", |
||||||
|
"vite": "^4.4.5" |
||||||
|
} |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,5 @@ |
|||||||
|
html,body{ |
||||||
|
position: relative; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
@ -0,0 +1,9 @@ |
|||||||
|
import {useRef, useEffect} from "react"; |
||||||
|
import routes from './routes/index.jsx' |
||||||
|
import {useRoutes} from "react-router-dom"; //导入路由表 |
||||||
|
function App() { |
||||||
|
const element = useRoutes(routes) |
||||||
|
return element |
||||||
|
} |
||||||
|
|
||||||
|
export default App |
@ -0,0 +1,12 @@ |
|||||||
|
import React from 'react' |
||||||
|
import ReactDOM from 'react-dom/client' |
||||||
|
import { BrowserRouter } from "react-router-dom"; |
||||||
|
import App from './App.jsx' |
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render( |
||||||
|
<React.StrictMode> |
||||||
|
<BrowserRouter> |
||||||
|
<App /> |
||||||
|
</BrowserRouter> |
||||||
|
</React.StrictMode>, |
||||||
|
) |
@ -0,0 +1,3 @@ |
|||||||
|
export default function About(){ |
||||||
|
return <div>About</div> |
||||||
|
} |
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,22 @@ |
|||||||
|
import css from './index.module.scss' |
||||||
|
import {Outlet} from 'react-router-dom' |
||||||
|
import headerPng from './header.png' |
||||||
|
export default function App(){ |
||||||
|
|
||||||
|
return <> |
||||||
|
<div className={css.home}> |
||||||
|
<header> |
||||||
|
<nav> |
||||||
|
<div><img src={headerPng} alt=""/></div> |
||||||
|
<div> |
||||||
|
<div>关于我们</div> |
||||||
|
<div>新闻</div> |
||||||
|
<div>视频</div> |
||||||
|
<div>首页</div> |
||||||
|
</div> |
||||||
|
</nav> |
||||||
|
</header> |
||||||
|
<Outlet/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
} |
@ -0,0 +1,36 @@ |
|||||||
|
.home{ |
||||||
|
& > header{ |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 82px; |
||||||
|
& > nav{ |
||||||
|
position: relative; |
||||||
|
max-width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
display: flex; |
||||||
|
& > div:first-child{ |
||||||
|
position: relative; |
||||||
|
flex-shrink: 0; |
||||||
|
& > img{ |
||||||
|
height: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
& > div:last-child{ |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: row-reverse; |
||||||
|
line-height: 80px; |
||||||
|
font-size: 1.2em; |
||||||
|
& > div{ |
||||||
|
position: relative; |
||||||
|
margin: 0 20px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
& > div{ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,3 @@ |
|||||||
|
export default function News(){ |
||||||
|
return <div>News</div> |
||||||
|
} |
@ -0,0 +1,3 @@ |
|||||||
|
export default function Video(){ |
||||||
|
return <div>Video</div> |
||||||
|
} |
@ -0,0 +1,59 @@ |
|||||||
|
import { Navigate } from 'react-router-dom' |
||||||
|
import Home from "../pages/Home/index.jsx"; |
||||||
|
import About from "../pages/About/index.jsx"; |
||||||
|
import News from "../pages/News/index.jsx"; |
||||||
|
import Video from "../pages/Video/index.jsx"; |
||||||
|
|
||||||
|
//eslint-disable-next-line |
||||||
|
export default [ |
||||||
|
{ |
||||||
|
path: '/jsview', |
||||||
|
element: <Home/>, |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: 'about', |
||||||
|
element: <About/>, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'video', |
||||||
|
element: <Video/>, |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: 'news', |
||||||
|
element: <News/>, |
||||||
|
}, |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
path: '/', //当路径的端口号后面没有地址时就渲染'<Navigate>' |
||||||
|
element: <Navigate to="/jsview"/> //只要`<Navigate>`组件被渲染,就会修改路径,切换视图 |
||||||
|
} |
||||||
|
// { |
||||||
|
// path: '/home', //路径,这里式一级路由,所以在路径前要带上'/' |
||||||
|
// element: <Home/>, //在该路径下需要渲染的元素节点 |
||||||
|
// children: [ //home下的子路由 //该路径下的子路由 |
||||||
|
// { |
||||||
|
// path: 'message', //子路由的路径,不需要'/',如果加了'/'则会覆盖掉前面的路由路径 |
||||||
|
// element: <Message/>, //子路由下需要渲染的元素节点 |
||||||
|
// children: [ //message下的子路由 //子路由的子路由,下面称为孙子路由 |
||||||
|
// { |
||||||
|
// //使用params的方式传参时,需要在path上声明接收参数 |
||||||
|
// // path: 'detail/:id/:title/:msg', |
||||||
|
// path: 'detail', //孙子路由的路径,一样不需要'/',否则将会覆盖前面的路由路径 |
||||||
|
// element: <Detail/> //孙子路由下需要渲染的元素节点 |
||||||
|
// } |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// path: 'news', |
||||||
|
// element: <News/>, |
||||||
|
// children: [ |
||||||
|
// { |
||||||
|
// path: 'detail', |
||||||
|
// element: <Detail/> |
||||||
|
// } |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
// ] |
||||||
|
// }, |
||||||
|
] |
@ -0,0 +1,7 @@ |
|||||||
|
import { defineConfig } from 'vite' |
||||||
|
import react from '@vitejs/plugin-react' |
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({ |
||||||
|
plugins: [react()], |
||||||
|
}) |
Loading…
Reference in new issue