WIL (21.09.27-21.10.01)

21570 ワード
テキストリンク
入社1週間後に管理ページの作成を開始します.
組長さん、デザイナーさんと相談した後、argon-dashboard-templateで丁寧にレイアウトを作り、素子設計を始めたいと思っていましたが、antdを使わせてもらっただけなので再開しています…^^いずれにしても、私たちの組長は回転輪が面白いと思っているのではないでしょうか.
用意した翼が苦労した理由は….next.jsは設置されていないので.だからantdしか使わないことにしました.

開発環境の設定


1. next.js+typescript+sass設定

npx create-next-app 프로젝트명
yarn add sass
next.js 9.3バージョンからsassを基本的にサポートします.

2.lessで設定します。

const path = require('path');

module.exports = {
  reactStrictMode: true,
};

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')], 
  },
  images: {
    disableStaticImages: true,
  },
};

3. next.typescriptをjsに適用する

yarn add  typescript @types/react @types/node --dev
インストール後、sassファイルが作成されます.next.config.jsファイルとtsconfig.jsonファイルの拡張子を_app.jsに変更します.
yarn run dev
命令語でnext開発モードでjsを実行します.(index.jsにデフォルト設定が自動的に入力されます.)

4.antdのインストール

yarn add antd

5.antdの適用


まず、すべてのscssファイルをインポートするscssファイルを作成します.

/* styles/scss/antd.scss */

antd 컴포넌트 추가 
@import '~antd/dist/antd.css';

@import './constants/colors';
@import './constants/fonts';
@import './constants/typography';

@import './base/layouts';
tsxにtsconfig.jsonファイルを追加します.
import "../styles/scss/antd.scss";
import React from "react";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

グローバルレイアウト構成部品の設定


管理者がログインしているときとログインしていないときのレイアウト設定が異なり、管理者ページで使用されているコンポーネントにのみ管理者ページのレイアウトが適用されます._app.tsxは、すべてのページコンポーネントにレイアウトプロパティがあると宣言します.

/* ./pages/_app.tsx */
import "../styles/scss/antd.scss";
import Head from "next/head";
import Router from "next/router";
import React, {Fragment} from "react";


function MyApp({ Component, pageProps }) {
  
  
  const Layout = Component.layout || (({ children }) => <>{children}</>);

  return (
    <Fragment>
      <Head>
        <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>Admin Page</title>
      </Head>
      <Layout> <Component {...pageProps} /></Layout>
    </Fragment >)
    ;
}

export default MyApp;
antd.scssを使用して、管理者機能を持つページ要素がAdminレイアウト要素のサブノードに入る必要があるため、ノードを作成します.
/* ./layouts/Admin.tsx */

import React, { Fragment, useRef, createRef, useEffect } from 'react';
import { useRouter } from "next/router";
import routes from "./routes";
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

import Sidebar from "Components/Sidebar/Sidebar";
import AdminHeader from 'Components/Header';


function Admin(props: any) {

	const router = useRouter();
	let mainContentRef = createRef<HTMLDivElement>();

	if (typeof window !== "undefined") {
		useEffect(() => {
			window.document.documentElement.scrollTop = 0;
			window.document.scrollingElement!.scrollTop = 0;
			mainContentRef.current!.scrollTop = 0;
		}, []);
	}

	return (
		<Fragment>
			<Layout style={{ minHeight: '100vh' }} className="admin-layout">
				<Sidebar />
				<Layout>
					<div className="main-content" ref={mainContentRef}>
						{props.children}
					</div>
				</Layout>
			</Layout>
		</Fragment>
	);
}

export default Admin;
ページ構成部品のレイアウト値をAdminに設定すると、ページ構成部品のノードがAdmin構成部品の_app.tsx divに作成されます.
/* pages/admin/dashboard.tsx */
import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Row, Col, Card } from 'antd';
import { Content, Footer } from 'antd/lib/layout/layout';
import Admin from 'layouts/Admin';
import AdminHeader from 'Components/Header';
import Button from 'antd/lib/skeleton/Button';

const Dashboard = (props: any) => {
	const [collapsed, onCollapse] = useState(false);

	return (
		<>
			<AdminHeader />
			<Content style={{ minHeight: '100vh', margin: '0 16px' }}>
			</Content>
		</>);
};

Dashboard.layout = Admin;

export default Dashboard;
redisトランザクションマルチプロセスシミュレーション秒殺在庫を保証する正しいluaスクリプトとwatchの方法
ポアソンの使い方.Excelオフィス365のdist機能?