首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Angular 2 CLI中使用Susy

在Angular 2 CLI中使用Susy,可以通过以下步骤实现:

  1. 首先,确保已经安装了Angular CLI和Node.js。如果没有安装,可以通过以下命令进行安装:
代码语言:txt
复制

npm install -g @angular/cli

代码语言:txt
复制
  1. 创建一个新的Angular项目:
代码语言:txt
复制

ng new my-project

代码语言:txt
复制
  1. 进入项目目录:
代码语言:txt
复制

cd my-project

代码语言:txt
复制
  1. 安装Susy和Breakpoint:
代码语言:txt
复制

npm install susy breakpoint --save-dev

代码语言:txt
复制
  1. 在项目的styles.scss文件中引入Susy和Breakpoint:
代码语言:scss
复制

@import '~susy/sass/susy';

@import '~breakpoint-sass/stylesheets/breakpoint';

代码语言:txt
复制
  1. 在Angular组件的HTML文件中使用Susy的网格系统。例如,可以使用containerspangutter等Susy的网格类来布局页面:
代码语言:html
复制

<div class="container">

代码语言:txt
复制
 <div class="span-4">
代码语言:txt
复制
   <!-- Content -->
代码语言:txt
复制
 </div>
代码语言:txt
复制
 <div class="span-8">
代码语言:txt
复制
   <!-- Content -->
代码语言:txt
复制
 </div>
代码语言:txt
复制
 <div class="span-4">
代码语言:txt
复制
   <!-- Content -->
代码语言:txt
复制
 </div>

</div>

代码语言:txt
复制

这样就可以使用Susy的网格系统来创建响应式的布局。

  1. 运行Angular应用程序:
代码语言:txt
复制

ng serve

代码语言:txt
复制

然后在浏览器中访问http://localhost:4200,即可看到使用Susy的布局效果。

Susy是一个用于创建响应式网格布局的Sass工具包,它提供了一套强大的网格系统,可以帮助开发人员更轻松地创建自适应的布局。通过在Angular 2 CLI中使用Susy,可以快速构建灵活且具有响应性的布局。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云容器服务(TKE)。

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器实例,可满足各种规模和类型的应用需求。了解更多信息,请访问腾讯云云服务器
  • 腾讯云容器服务(TKE):基于Kubernetes的容器管理服务,提供高度可扩展的容器集群,可简化容器化应用的部署和管理。了解更多信息,请访问腾讯云容器服务

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLIAngular框架的命令行界面,用于在开发过程在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...$ node -v $ npm -v 检查Node.js和NPM版本 第2步:安装Angular CLI和PM2 接下来,使用npm包管理器安装Angular CLI和PM2 ,如图所示。...#install PM2 第3步:使用Angular CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app...$ cd sysmon-app $ sudo ng serve 使用Angular CLI提供Angular App 从ng serve命令的输出,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符...在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。

2.9K40

如何使用Angular CLI和PM2运行Angular应用程序

Angular CLIAngular框架的命令行界面,用于在开发过程在本地创建,构建和运行应用程序。 它旨在在开发服务器上构建和测试Angular项目。...在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。...:安装Angular CLI和PM2 接下来,使用npm包管理器安装Angular CLI和PM2,如图所示。...第3步:使用Angular CLI创建Angular项目 现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app...Angular CLI主页:https://angular.io/cli PM2主页:http://pm2.keymetrics.io/ 在本指南中,我们展示了如何使用Angular

2.2K30
  • 何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

    何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南 本文翻译自How to Install Angular on Windows: A Guide to...Angular CLI, Node.js, and Build Tools,作者为Ahmed Bouchefra 在本教程,我们将学习如何在 Windows 安装 Angular CLI使用它来创建...什么是 Angular CLIAngular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具( TypeScript、Webpack 等)的麻烦。...e2e (e): 构建并提供 Angular 应用程序,然后使用 Protractor 运行端到端测试。 generate (g): 根据原理图生成和/或修改文件。...结论 在本教程,我们了解了如何在 Windows 计算机上安装 Angular CLI,并使用它从头开始初始化一个新的 Angular 项目。

    47600

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...使用Angular CLI快速添加功能到现有的Angular应用程序: Angular CLI介绍: Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程...运行应用程序的端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加新的功能: ng...2、配置首页组件路由(多模块路由完美解决): 首先,我们的博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件配置多个模块的路由

    4K20

    教程|在 Angular 4 中加载功能模块(上)

    本教程将介绍如何在 Angular 开发和加载功能模块。尽管对于较小的应用程序,根模块就足够用了,但对于更大更复杂的应用程序,需要创建功能模块。还需要能够高效地加载模块,以获得最佳应用程序性能。...前提条件 要掌握本教程,需要在开发机器上安装两个工具: Node Angular CLI 输入命令 ng -v,以便找到您当前使用Angular CLI 和 Node 的版本。...如下所示,我使用的是 Node 7.9.0 和 Angular CLI 1.0.2。...2. 将 Angular4BaseModules 源文件(位于 Angular4TutorialSrc.zip )解压到一个空目录位置。我的目录名为 …/fm。 3....您会看到应用程序在默认端口 4200 成功运行,以及一条与此消息类似的消息: 图 1. 应用程序运行在端口 4200 ng 是一条 Angular CLI 命令,您将使用它构建和处理应用程序代码。

    2.2K10

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(新手入门篇)

    前言:   在之前的一篇文章已经介绍过了,公司正在使用NG-ZORRO组件库开发后台应用,并且详细的介绍了Angular开发环境的搭建和项目的创建。...这篇文章就是为了让大家熟悉了解我们该如何在Angular项目中使用到NG-ZORRO UI组件库搭建后台管理框架。...全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。 NG-ZORRO特性: 提炼自企业级后台产品的交互语言和视觉风格。.../cli 已被成功安装。...执行以下命令,@angular/cli 会在当前目录下新建一个名称为 YyFlight-NG-ZORRO的文件夹,并自动安装好相应依赖。 ng new YyFlight-NG-ZORRO ?

    3.5K11

    2.如何在RedHat7实现OpenLDAP集成SSH登录并使用sssd同步用户

    温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。...上安装OpenLDA并配置客户端》,安装及配置好OpenLDAP后,如何使用OpenLDAP上的用户登录集群服务器,本篇文章主要介绍如何在RedHat7实现OpenLDAP集成SSH登录并使用sssd...内容概述 1.安装OpenLDAP客户端及依赖包 2.OpenLDAP客户端SSSD配置 3.OpenLDAP与SSH集成 4.验证SSH登录 测试环境 1.RedHat7.3 2.OpenLDAP版本...注意:默认使用的是密码认证方式,在集成SSH登录时需要确保PasswordAuthentication yes配置为yes 2.修改配置文件/etc/pam.d/sshd,以确认调用pam认证文件 [root...查看 提示:代码块部分可以左右滑动查看噢 为天地立心,为生民立命,为往圣继绝学,为万世开太平。

    8.6K100

    看看Angular有啥新玩法!手把手教你在Angular15集成Excel报表插件

    小编为大家简单介绍几个Angular15的新特性(以下特性源于Angular官网): 独立API脱离开发者预览版 在Angular14版本的更新中使用了独立的API,使得开发者能够在不使用 NgModules...语言服务的自动导入 在Angular15,可以自动导入在模板中使用但是没有添加到NgModule的组 件或独立组件。 既然Angular都升级了,咱们是不是可以尝试一些新的玩法?...下面将介绍如何在Angular15集成Excel报表插件并实现简单的文件上传和下载。 在本教程,我们将使用node.js,请确保已安装最新版本。...//安装 Angular CLI globally npm install -g @angular/cli //通过Angular CLI 创建一个新项目 ng new spread-sheets-app...(初始化一个Angular工程) 将下面的表格资源粘贴到package.json文件的dependencies标签,并使用npm install指令下载和ng serve指令运行。

    36320

    【ASP.NET Core 基础知识】--前端开发--集成前端框架

    需要强大工具支持的项目: Angular生态系统的工具集,尤其是Angular CLI,提供了一整套的开发、构建、测试和部署工具,使得项目的管理变得更加高效。...下面我将为展示如何使用 .NET CLI 在命令行创建一个 ASP.NET Core 项目: 打开命令行界面: 打开命令行界面( PowerShell、CMD 或者终端),确保已经安装了 .NET...Angular 集成 创建 Angular 应用: 在命令行中使用 Angular CLI 创建一个 Angular 应用程序。...下面我将展示如何在 ASP.NET Core 创建和使用 RESTful API,并在前端框架中进行调用。...以下是一般的做法: 创建 Angular 应用: 使用 Angular CLI 创建一个 Angular 应用程序。

    18300

    Angular 6正式版发布,都有哪些新功能

    官方升级手册链接如下: https://update.angular.io/ ng update可以帮助你使用正确版本的依赖包,让你的依赖包与你的应用程序同步,使用 schematics 时,第三方还能提供脚本更新...ng add使用软件包管理器来下载新的依赖包并调用安装脚本,它可以通过更改配置和添加额外的依赖包( polyfills)来更新你的应用。...CLI v6 现已支持多项目工作区,多个应用程序或库,CLI 项目用 angular.json 取代 angular-cli.json 构建和配置项目。...使用Angular CLI 创建库可以查看下面的链接: https://github.com/angular/angular-cli/wiki/stories-create-library Tree...更新通常遵循 3 个步骤,请使用新 ng update 工具: 更新 @ angular / cli; 更新你的 Angular 框架包; 更新其他依赖包。

    4.2K20

    “别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

    简单地说就是你可以构建可以被添加到不使用 Angular 的 HTML 页面的组件,有点像 Web 组件。...现在,我可以使用 Angular 创建世界上最好的组件,并将它交给我的朋友,她将它用在她的 React 应用程序!...我的意思是,我们仍然可以这么做,但 CLI 确实让这种体验变得更好了。 Angular CLI; Create React App 2; Vue CLI。...2019 年,我们将在 CLI 中看到越来越多的改进体验。 状态管理 Vue 将继续使用 Vuex 进行状态管理。 Angular 将继续主要使用 RxJS。...这将是 2019 年最重要的趋势:不是如何单独使用 GraphQL,而是如何在极少数情况下使用 GraphQL 优化一些 RESTful API 路由。

    2.6K30
    领券