跳到主要内容

初始化本地前端空项目

提示

此文档针对的是完全脱离平台，从零开始进行本地前端开发。如果是从平台导出项目进行二次开发的项目，请参考 导出代码到本地进行前端开发

配置本地前端开发环境​

按照文档 配置本地前端开发环境 配置本地前端开发环境

使用脚手架初始化项目​

在你想要放项目代码的地方运行如下命令。new-website 是你的项目名字。

npx --registry https://nexus.dev.bizops.com.cn/repository/npm-group/ create-icp-app@latest new-website

项目结构​

使用脚手架创建项目成功过后，在 new-website 文件夹下，会生成如下结构的项目文件：

frontend
├── appConfig
│   └── app.config.json
├── mockServer
│   ├── server.js
│   └── ...
├── public
│   ├── index.html
│   └── ...
├── src
│   ├── pbc
│   ├── pbcCode
│   ├── App.js
│   └── ...
├── .eslintrc.js
├── package.json
├── README.md
├── webpack.config.js
└── yarn.lock
└── ...

运行开发模式​

yarn start

默认情况下，浏览器会打开 http://localhost:9092 的新窗口，看到界面，就表示安装流程成功了。

现在你可以在项目里开发新功能了，修改项目文件夹代码，浏览器窗口会自动刷新。

构建​

当功能开发完成之后，需要构建项目静态资源以部署到服务器上。

yarn build

构建好的所有前端静态代码会被放到 /build 目录下，部署请拷贝改项目在所有文件到部署服务器文件夹。