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