【项目搭建】项目搭建与开发

正确的项目启动思路

软件开发流程

软件需求设计规范

1. 功能性需求:

• 用户可以打开网站

• 顶部导航栏、走马灯、热门推荐等等

  2.非功能性需求：

• 网站使用React + Typescript

• 代码逻辑清晰

创建ts项目

在typescript中，类型的定义我们需要使用 .d.ts 为后缀的文件来表示，.d.ts 是typescript专用的声明类型的文件，这个文件只包含类型声明，它不会包含任何逻辑。不会被编译、也不会被webpack打包。

打开src文件夹，创建一个名叫 custom.d.ts 的文件。在这个文件中，我们来定义css。

定义声明需要使用typescript中的关键词 declear module，输入字符串 *.css，表示只要我们在import css为后缀的文件时，都会遵循以下的定义

declare module "*.css" {
	const css: { [key: string]: string };
	export default css;
}

安装脚手架

npx create-react-app react-travel --template typescript

安装CSS模块依赖

npm install typescript-plugin-css-modules --save-dev

给项目安装一个第三方插件依赖，这个插件可以解析css文件，并生成typescitpt的引用类型。
把这个插件安装在dev依赖项中。

何为dev依赖项，为什么要分普通的依赖与dev依赖呢？dev依赖就是指那些仅参与代码开发，而不参与最终上线打包的项目，比如typescipt，babel-loader等等。

打开tsconfig.json

"plugins": [{ "name": "typescript-plugin-css-modules" }]

接下来，对于使用vs code，我们还需要做一点编辑器的配置。在根目录下创建一个.vscode的文件夹，这个文件夹是用来处理vs code配置的，添加文件settings.json

{
	"typescript.tsdk": "node_modules/typescript/lib",
	"typescript.enablePromptUseWorkspaceTsdk": true
}

在componenets文件夹中添加一个叫做 Robot.module.css 的文件，

import styles from "./Robot.module.css";