您的位置:首页 > 财经 > 金融 > dw网页设计免费模板_传媒建站推荐_搜索引擎优化的技巧有哪些_产品网络营销策划方案

dw网页设计免费模板_传媒建站推荐_搜索引擎优化的技巧有哪些_产品网络营销策划方案

2024/12/22 12:36:11 来源:https://blog.csdn.net/weixin_42382758/article/details/143446825  浏览:    关键词:dw网页设计免费模板_传媒建站推荐_搜索引擎优化的技巧有哪些_产品网络营销策划方案
dw网页设计免费模板_传媒建站推荐_搜索引擎优化的技巧有哪些_产品网络营销策划方案

#pic_center =400x
参考文章:
react开发环境搭建

系列文章:


文章目录

    • create-react-app安装react
      • npm版本管理
      • npm 镜像安装


create-react-app安装react

查看是否安装过create-react-app

npm list create-react-app
输出:-- create-react-app@5.0.1

npm版本管理

npm版本升级指南
npm -v显示版本:X.X.XX

升级npm

npm install -g npm

在这里插入图片描述
npm报错 npm WARN deprecated…的问题解决方式
可能npm版本 过高 或 过低

npm 镜像安装

直接使用官方镜像搭建react,比较慢, 所以使用国内镜像.
【npm淘宝镜像过期解决办法】
查看镜像

npm config get registry

临时使用:
在使用npm安装包的时候,可以通过–registry参数指定一个临时的镜像源。例如:

npm install [package_name] --registry=https://registry.npm.taobao.org

永久设置:
可以通过修改npm的配置文件来永久设置镜像源。配置文件通常位于用户的家目录下,文件名为.npmrc。你可以使用文本编辑器打开这个文件,并添加或修改以下行:

registry=https://registry.npm.taobao.org

或者命令行

npm config set registry https://registry.npmmirror.com

也就是说https://registry.npm.taobao.org该镜像已过期无法使用需要更换,需要更换其他如npm官方镜像源,淘宝更新后的新镜像源,已经阿里云,腾讯云其他镜像地址。
这里可以更换的镜像有:
npm 官方原始镜像网址是:https://registry.npmjs.org/ (这里是更换回npm官方镜像,下载依赖过慢不推荐使用)
npm新淘宝镜像:https://registry.npmmirror.com
阿里云 NPM 镜像:https://npm.aliyun.com
腾讯云 NPM 镜像:https://mirrors.cloud.tencent.com/npm/
华为云 NPM 镜像:https://mirrors.huaweicloud.com/repository/npm/
网易 NPM 镜像:https://mirrors.163.com/npm/
中科院大学开源镜像站:http://mirrors.ustc.edu.cn/
清华大学开源镜像站:https://mirrors.tuna.tsinghua.edu.cn/
这里通过npm config set registry 镜像地址,设置新的镜像

使用create-react-app搭建react, --template typescript通过–template typescript使得我们的项目支持ts,但是项目中package.json中没看到typescript,

npx create-react-app antd-demo --template typescript

npm安装typescript,将TypeScript作为开发依赖项安装到你的项目中。–save-dev标志表示TypeScript将被添加到你的package.json文件中的devDependencies部分。

# 不需要执行npm install typescript --save-dev 因为 --template typescript已经支持并且在react内置了typescipt
npm install typescript --save-dev

安装 antd

npm install antd --save

在写代码时发现导入组件时 如import {UseRefDemo}“./components/index.tsx” 必须写上 tsx后缀。因此想要配置默认解析一些文件拓展名,配置主要参看文章1,如下:

1- create-react-app 定义路径别名,默认识别 jsx格式文件
2-create-react-app设置路径别名

# 原先的脚本"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},# 新的脚本"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom"},

原理是:使用create-react-app时,内部将一些配置文件封闭了,执行

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com