时间：2023-09-17 01:06:02 | 来源：网站运营
时间：2023-09-17 01:06:02 来源：网站运营
二、前端开发—搭建静态网站（：
在线咨询
# 1.首先使用 npm 在全局安装 create-react-appnpm install -g create-react-app# 2.在指定目录中创建一个 react 项目工程create-react-app my-blog# my-blog 是自己设置的项目名称# 3.进入到指定的项目文件，启动项目cd my-blognpm run start # 启动项目my-blog├── node_modules : 存放 npm 安装的工具包 或 模块├── public : 一些静态文件，一般不需要修改，除了网站标题和icon，或者要添加一些特定的东西|── src : 项目的源代码及资源| ├── api : 连接后端接口的 js 代码| ├── assets : 存放公共资源| ├── component : 存放项目共用的组件(不会修改其他组件状态)| ├── containers : 存放项目共用的组件(将会修改其他组件状态的组件)| ├── redux : 存放状态管理组件的 js 代码| └── index.js : js 的入口文件└── package.json : 项目的配置文件yarn add antdcracobash yarn add @craco/yarn add craco-less my-blog/package.json 中的 scripts 属性 /* package.json */ "scripts": {- "start": "react-scripts start",- "build": "react-scripts build",- "test": "react-scripts test",+ "start": "craco start",+ "build": "craco build",+ "test": "craco test", } my-blog/craco.config.js/ 用于修改默认配置。const CracoLessPlugin = require('craco-less');module.exports = { plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: { '@primary-color': '#1DA57A' }, javascriptEnabled: true, }, }, }, }, ],};bash yarn add @ant-design/iconsmy-blog/src/index.js 入口文件：import React from 'react'import ReactDom from 'react-dom'import Main from "./components/main/main";import 'antd/dist/antd.less'; // 导入 antd 组件样式ReactDom.render(<Main />, document.getElementById('root'))在 my-blog/src/components/main/ 中新建 main.jsx 文件：import React, {Component} from "react";import {Layout} from 'antd' const { Header, Footer, Content } = Layout;export default class Main extends Component{ render() { return ( <Layout> <Header> 导航栏 </Header> <Content> 内容体 </Content> <Footer> 页脚 </Footer> </Layout> ) }}Layout、Header、Content、Footer 都是 antd 中做好的组件，我们只需要拿来用即可。my-blog/src/components/nav-top/ 文件夹中新建 nav-top.jsx 写入：import React, {Component} from "react";import {MailOutlined,EditFilled,TabletFilled} from '@ant-design/icons'import { Menu } from 'antd';export default class NavTop extends Component{ state = { navList : [ { path: '/index', text: '首页', icon: <MailOutlined/> }, { path: '/project', text: '项目', icon: <EditFilled /> }, { path: '/diary', text: '日记', icon: <TabletFilled /> }, ] } render() { const {navList} = this.state return ( <div> <Menu theme={"dark"} mode="horizontal"> { navList.map((nav, index) => ( <Menu.Item icon={nav.icon} key={nav.path} selected={true}> {nav.text} </Menu.Item> )) } </Menu> </div> ) }}// Meau 是 antd 的导航菜单组件库，它提供了许多的 api，theme 可以设置主题样式、mode 设置菜单是横向排列还是竖向排列。// 有多少个 Menu.Item ，就有多少个菜单然后在静态博客框架 main.js 文件中导入 NavTop :import React, {Component} from "react";import {Layout} from 'antd'import NavTop from "../nav-top/nav-top";const { Header, Footer, Content } = Layout;export default class Main extends Component{ render() { return ( <Layout> <Header> <NavTop /> </Header> <Content> 内容体 </Content> <Footer> 页脚 </Footer> </Layout> ) }}导航栏的效果就显示出来了。my-blog/src/assets/css/ 中新建 index.less 文件：// 修改导航栏背景样式.ant-layout-header { background: #f0f2f5;}.ant-menu{ background: #f0f2f5;}// 修改导航栏字体样式.ant-menu .anticon + span { color: #738192;}.ant-menu .anticon { color: #738192;}.ant-menu .ant-menu-item-selected .anticon + span { color: #20a0ff;}.ant-menu .ant-menu-item-selected .anticon { color: #20a0ff;}在博客项目中导入 index.less:// my-blog/src/index.js 中导入 index.less...import 'antd/dist/antd.less'; // 导入 antd 组件样式import './assets/css/index.less'; // 用于覆盖上面 antd 定义的变量，必须放在 antd.less 下方...在 my-blog/src/components/nav-top/ 中新建 nav-top.less 样式文件：.ant-menu { display: inline-block; float: right;}随后，在 同级的文件 nav-top.jsx 中引入 nav-top.less 样式文件：...import { Menu } from 'antd';import "./nav-top.less" // 引入nav-top.less 样式文件export default class NavTop extends Component{...注： 为什么要在 src/assets/css/ 中新建一个 index.less 样式文件之后，还要在 nav-top.jsx 同级目录中新建一个 nav-top.less 样式文件。关键词：静态
