使用 Ant Design Pro 初始化前端项目

一、使用 pro-cli 来快速的初始化脚手架

1. 打开终端,输入命令

# 使用 npm
npm i @ant-design/pro-cli -g
# create 后面加要初始化的项目名称
pro create leapi-frontend

2. 报错

PS D:\code> pro create leapi-frontend
pro : 无法加载文件 D:\tools\nodejs\node_global\pro.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.m
icrosoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ pro create leapi-frontend
+ ~~~
    + CategoryInfo          : SecurityError: (:) [],PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

3. 解决

  • 输入 get-ExecutionPolicy 查看执行策略
  • Restricted 显示被限制
  • 输入 Set-ExecutionPolicy -Scope CurrentUser 开放权限
  • 显示需要为参数提供值
  • 输入 RemoteSigned 解决✔
PS D:\code> get-ExecutionPolicy
Restricted
PS D:\code> Set-ExecutionPolicy -Scope CurrentUser

位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned

4. 重新输入初始化命令

pro create leapi-frontend
  • 报错:'pro' 不是内部命令或外部命令
  • 在命令前加上 npx 即可

使用 Ant Design Pro 初始化前端项目_第1张图片

 5. 选择轻量的脚手架 simple

使用 Ant Design Pro 初始化前端项目_第2张图片

6. 安装成功

使用 Ant Design Pro 初始化前端项目_第3张图片 

二、安装依赖,运行项目

安装 Node.js:下载 | Node.js 中文网

安装多个 Node.js 参考文章:关于windows如何安装以及使用切换nodejs多版本_nodejs 多版本-CSDN博客

1. 查看 node.js 和 npm 的版本

使用 Ant Design Pro 初始化前端项目_第4张图片

2. 进入项目目录,安装依赖

$ cd myapp && npm install

3. 启动项目

npm run start

使用 Ant Design Pro 初始化前端项目_第5张图片

使用 Ant Design Pro 初始化前端项目_第6张图片

  •  登录查看效果

使用 Ant Design Pro 初始化前端项目_第7张图片

 

三、项目瘦身

1. 移除国际化

2. 移除 e2e 测试

你可能感兴趣的:(LeAPI,-,前端,前端,react,前端)