一:新建一个完整的react项目
1.环境准备
目前我的环境是
node:16.17.1
npm: 8.15.0
查看环境:1):打开命令提示符工具,利用node -v
和npm -v
查看一下自己的环境,如果觉得重新卸载、安装node比较麻烦,可以利用nvm进行node的管理,详细https://blog.csdn.net/Anony_me/article/details/124153201?spm=1001.2014.3001.5502
2)如果环境版本和我的不一样也没关系,后续安装插件可以找相应匹配的版本的插件就可以
2.创建项目
1):找到自己创建的文件夹,在文件夹中打开命令提示符,找到文件夹的路径,cmd,敲回车,打开命令提示符工具
2):输入命令:npm init vite
3)然后输入y
,意思是确定要创建项目吗,答案是yes
4)输入项目名称:lege-management
5)选择我们项目使用的框架:react
6)选择使用框架语言方式:react-ts
7)然后按照提示,输入cd lege-management
(进入项目路径),然后npm install
(安装包),然后 npm run dev
(启动程序)
8):复制local的链接浏览器粘贴打开或者ctrl+点击链接,可以看到react界面
3.安装项目需要的基础
1)状态管理
npm i redux
2)react-redux依赖于redux使用,react-redux帮助我们在react中使用redux
npm i react-redux
3)react中使用路由
npm i react-router-dom
4)完善命令
1.完善默认改变端口号,打开package.json,找到scripts中的dev,在dev后面添加–host --port 3002 如果再在后面加一个–open,就可以自动打开了–host --port 3002 --open
如图:
修改完之后,再运行就是3002的端口了
二:完善初始项目
1.页面样式初始化设置,安装reset-css
npm i reset-css //初始化文本屏幕之间的间距
//在页面初始化的时候引入 main.tsx或者index.js
//正确的样式引入顺序
//1.样式初始化一般放在最前面
import "reset-css"//放在引入App上面,防止App文件里面的样式被覆盖
//2.UI框架的样式
//3.全局样式
//4.组件的样式
import App from './App';
2.安装scss,,可以方便我们书写css
npm i --save-dev sass //dev是开发环境 ,加过dev,打包之后就放入到开发工具devDependencies的依赖下了
Tips(扩展一下):
devDependencies(开发工具)开发环境使用的,使用打包工具之后这些依赖不会被打包进去,但是dependencies(依赖工具)下的这些依赖会打包进去
4.页面初始化
(1) src下新建一个全局样式scss文件,src->assets->styles->global.scss
body{
//页面文字默认情况下鼠标是可以选择文字的
user-select:none;//禁止文字选中
}
img{
//图片默认情况下是可以进行拖动的
-webkit-user-drag:none;//禁止拖动图片
}
(2) main.txt或者index.js文件中引入global.scss文件
//1.样式初始化一般放在最前面
import "reset-css"//放在引入App上面,防止App文件里面的样式被覆盖
//2.UI框架的样式
import"./assets/style/golbal.scss"//3.全局样式
//4.组件的样式
import App from './App';
5.路径别名的配置
目前ts对@指向src目录的提示是不支持的,vite默认也是不支持的,所以需要手动配置@符号的指向。
(1)打开vite.config.ts文件,在vite.config.js中添加配置
import path from "path"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@":path.resolve(__dirname,'./src')
}
}
})
注意:dirname前面是两个__,不是一个_(双下划线前缀的变量是一种常见的约定,用于表示内部使用的变量名)。
在 Vite 的配置文件中,dirname 是一个 Node.js 全局变量,它表示当前文件所在的目录的绝对路径。但是,在 JavaScript 中,变量名不能以“”开头,这是语法规则限制的。因此,需要将 _dirname 改为 __dirname 才能使它正常工作。
(2)这个时候引入path模块会报红,但我们已经有node,所以就已经有path模块,只是缺少ts一些声明配置,所以要安装关于node这个库的ts声明配置。
npm i -D @types/node
如果import 后面的path 还有报红,可能是vite的版本不对应,就可以把引入改为
import * as path from "path
(3) global.scss文件中的import"./assets/style/golbal.scss"
改为import"@/assets/style/golbal.scss"
(该路径是相对于应用程序根目录的)
允许在应用程序中使用别名路径,这些别名路径被映射到应用程序的真实文件路径,它并不是一个绝对路径
(4)配置路径别名的提示
虽然现在路径别名已经有了,但文件中国输入@ 是没有提示路径的,需要在tsconfig.json中,添加两项配置
"compilerOptions":{
"baseUrl":"./",
"paths":{
"@/*":[
"src/*"
]
}
},
配置好之后巧@后路径资源就有提示了