网站建设管理概述,贾汪区建设局网站,做网站推荐源创网络,wordpress 查看文章id文章目录 ⭐前言⭐next初始化TypeScript 开发项目安装react的ui框架#xff08;tDesign#xff09;设计布局 ⭐结束 ⭐前言
大家好#xff0c;我是yma16#xff0c;本期给大家分享next项目搭建博客的开始。 背景 因为我的博客网站https://yongma16.xyz是基于vue2搭建的tDesign设计布局 ⭐结束 ⭐前言
大家好我是yma16本期给大家分享next项目搭建博客的开始。 背景 因为我的博客网站https://yongma16.xyz是基于vue2搭建的单页面应用技术框架老旧所以想着给我的博客网站升级。 关于next框架 Next.js是一个 React 开发框架。 特性
直观的、 基于页面 的路由系统并支持 动态路由预渲染。支持在页面级的 静态生成 (SSG) 和 服务器端渲染 (SSR)自动代码拆分提升页面加载速度具有经过优化的预取功能的 客户端路由内置 CSS 和 Sass 的支持并支持任何 CSS-in-JS 库开发环境支持 快速刷新利用 Serverless Functions 及 API 路由 构建 API 功能完全可扩展
⭐next初始化
前提条件需要安装node关于node的安装可以查看我的笔记 nvm管理node
TypeScript 开发项目
用npx进行创建 latest安装最新的项目
$ npx create-next-applatest --typescript我们可以发现 react、react-dom、next在创建项目的时候已经添加到依赖 next dev运行
$ next dev默认目录即路由 打开预览 localhost:300ok没问题
安装react的ui框架tDesign
这里我使用腾讯出品的ui框架tdesing
$ npm i tdesign-react在next.js引入 next.config.js配置
/** type {import(next).NextConfig} */
const nextConfig {reactStrictMode: true,experimental: {transpilePackages: [tdesign-react]}
}
module.exports nextConfig_app.tsx配置
import /styles/globals.css
import tdesign-react/dist/tdesign.css; // 全局引入tdesign所有组件样式代码
import type { AppProps } from next/appexport default function App({ Component, pageProps }: AppProps) {return Component {...pageProps} /
}
设计布局
采用旧版博客的侧边导航布局 layout
// 主页布局样式
import React from react;
import { Layout } from tdesign-react;const { Header, Content, Footer, Aside } Layout;
const Home(){return (Layout style{{width:100vw,height:100vh}}AsideAside/AsideLayoutContentContent/ContentFooterCopyright 2023 Tencent. All Rights Reserved/Footer/Layout/Layout/)
}export default Home
效果
⭐结束
初始化搭建到这结束如有不足欢迎指出我们下篇博客见
