Angular项目实战:创建项目

安装angular-cli

把 npm 切换成国内镜像

npm config set registry https://registry.npm.taobao.org

安装angular-cli

npm install -g @angular/cli

新建项目

项目名: my-angular-project

ng new my-angular-project --style less

提示:

Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict (y/N)
您是否要在工作空间中执行更严格的类型检查和更严格的捆绑包预算？
此设置有助于提高可维护性并提前发现错误。
有关更多信息，请参见https://angular.io/strict y 需要 n 不需要

Would you like to add Angular routing? (y/N)
你需要增加 Angular 路由吗? y 确认 n 不添加

添加NG-ALAIN后台前端解决方案

$ ng add ng-alain
$ ? Would you like to share anonymous usage data about this project with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see https://angular.io/analytics. (y/n)

选择N

更换端口

打开项目根目录,编辑package.json,更改scripts下的start

"start": "ng s --port 3000 -o"

目录作用

├── _mock                                       # Mock 数据规则
├── src
│   ├── app
│   │   ├── core                                # 核心模块
│   │   │   ├── i18n
│   │   │   ├── net
│   │   │   │   └── default.interceptor.ts      # 默认HTTP拦截器
│   │   │   ├── services
│   │   │   │   └── startup.service.ts          # 初始化项目配置
│   │   │   └── core.module.ts                  # 核心模块文件
│   │   ├── layout                              # 通用布局
│   │   ├── routes
│   │   │   ├── **                              # 业务目录
│   │   │   ├── routes.module.ts                # 业务路由模块
│   │   │   └── routes-routing.module.ts        # 业务路由注册口
│   │   ├── shared                              # 共享模块
│   │   │   └── shared.module.ts                # 共享模块文件
│   │   ├── app.component.ts                    # 根组件
│   │   └── app.module.ts                       # 根模块
│   │   └── delon.module.ts                     # @delon模块导入
│   ├── assets                                  # 本地静态资源
│   ├── environments                            # 环境变量配置
│   ├── styles                                  # 样式目录
└── └── style.less                              # 样式引导入口

启动完成

Angular项目实战:创建项目相关推荐

软件测试项目实战(Web项目)
软件测试项目实战(Web项目) 下载地址资源介绍共5天的测试项目实战讲解,大小4G.仅供软件测试人员学习交流参考,不可用作其他商业用途. 内容展示
如何在阿里云物联网平台上利用已有的 IoT Studio项目模板创建项目
目录前言一.在阿里云找到已有的IoT Studio公开项目模板二.选择公开项目模板三.其他选择结语前言前面的文章里,我们介绍了如何在阿里云物联网平台上添加LoRa节点设备,并让LoRa节 ...
Cookiecutter通过项目模板创建项目
Cookiecutter是一个通过项目模板创建项目的命令行工具文档:https://cookiecutter.readthedocs.io/ 安装 pip install cookiecutter ...
react项目实战 1 项目介绍、项目搭建
目录一项目介绍二项目搭建 2.1 本地接口部署 1 创建并导入数据 2 启动接口 3 测试接口 2.2 初始化项目 1 创建项目 2 整理项目的目录一项目介绍名称: 好客租房形式: 移 ...
【Selenium项目实战】项目环境搭建：安装JDK、mysql、Tomcat、jpress和测试系统
前言一直想学习自动化测试,但是都没行动,业余时间学习零零碎碎并记录20210416. [Selenium项目实战] 项目环境搭建:安装JDK.mysql.Tomcat.jpress和测试系统需求分 ...
项目实战-图像识别项目-通过QT制作图形界面并调用百度AI进行图像识别（一）
转自迅为4412开发板项目实战教程 B站视频地址:https://www.bilibili.com/video/BV157411c7sc?p=7 硬件平台:iTOP-4412开发板项目名称:图像识别 ...
web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
web前端项目实战_Vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
开发android项目实战,Android 项目实战：手机安全卫士开发案例解析
Android 项目实战:手机安全卫士开发案例解析作者:王家林,王家俊,王家虎出版时间:2013 丛编项:移动互联应用开发系列内容简介本书通过对一款手机安全卫士开发案例的详细解析,讲解了一个 ...

Angular项目实战:创建项目

安装angular-cli

新建项目

添加NG-ALAIN后台前端解决方案

更换端口

目录作用

启动完成

Angular项目实战:创建项目相关推荐

最新文章

热门文章