基于Anglar-cli的种子工程

栏目: Ruby · 发布时间: 7年前

内容简介:基于Anglar-cli的种子工程

基于Anglar-cli的种子工程

为公司项目做了一个种子工程,方便以后做Demo或者其他工程。

项目地址: Angular-cli-starter

说明

node版本 7.9.0

npm版本 4.2.0

Angular版本 4.0.2

AngularCLI版本 1.0.0

已经引入了Angular Material、ngx-bootstrap、bootstrap、karma-firefox-launcher、fontawesome、echarts、jQuery、moment.js。

使用

  1. 在node_modules的文件夹下找到/node_modules/@angular/cli/bin/

  2. 然后在终端中pwd输出路径

  3. 在root目录下找到~/bash_profile文件,用vim打开,把下面路径两个字换成刚刚得到的路径,然后写入文件中

    alias ng="路径/ng"

  4. 在终端执行’. ~/.bash_profile’(如果遇到command not found: ng,重新运行一下这个命令)

  5. 项目中使用了sass做css预编译,因此需要安装sass,安装方法见下文

  6. 在项目根目录执行 npm install

  7. ng serve --open

注:

npm i @angular/cli@latest -g
ng serve --host ip地址

安装Sass

sass基于 Ruby 语言开发而成,因此安装sass前需要安装Ruby,下面以 linux 系统安装为例子(mac自带ruby,windows下安装参考 Sass官网

  1. Ruby 官网下载Ruby 2.4.1版本到本地

  2. 分别运行以下命令安装:

cd ruby-2.4.1
./configure
make
sudo make install
  1. 安装完后输入 ruby -v ,若出现ruby版本号表示安装成功

ruby安装完成后就可以安装sass和Compass了,在ruby目录下打开终端,输入:

gem install sass
gem install compass

每个安装过程都会看到如下输出:

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安装完成后,在终端输入 sass -vcompass -v ,若出现版本号表示安装成功。

若遇到gem下载不稳定,可以参考 官网 更换gem源

关于AOT和摇树优化

打开命令行,进入App根目录,执行以下命令:

ng build --prod --aot

加上–prod参数之后,angular-cli会自动启用TreeShaking(摇树)特性,简而言之,就是把用不到的包全部剔除掉,就像从树上把枯叶子摇下来一样,加上–aot参数是让angular-cli启动预编译特性。

【请注意】最新版本的angular-cli已经内置了对AOT和TreeShaking的支持,只要像上面这样在build的时候加上–prod和–aot参数就可以了,不需要再做任何其它任何配置工作,官方网站上的那一篇指南有点过时了。

引入外部组件

  • 引入ngx-bootstrap

在所要引入的模块的module文件中import就行:

import { AlertModule } from 'ngx-bootstrap';
@NgModule({
  imports: [
    AlertModule.forRoot(),
  ]
})
export class XXXModule { }

组件列表及使用参考官网: ngx-bootstrap组件

  • 引入Angular Material
import { MdAutocompleteModule } from '@angular/material';
@NgModule({
  imports: [
    MdAutocompleteModule,
  ]
})
export class XXXModule { }

组件列表及使用参考官网: Angular Material

  • 引入echarts、jQuery、moment.js

在所需 组件 中import就行:

import echarts from 'echarts';
import $ from 'jquery/dist/jquery';
import * as moment from 'moment';

注意事项

目录结构可以参考如dir-desc.txt文件。

项目中新建css文件时,后缀名统一为.scss。scss完全兼容css(可以在scss文件中直接写css)。scss的使用可以看参考文章7。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Kotlin实战

Kotlin实战

【美】Dmitry Jemerov(德米特里·詹莫瑞福)、【美】 Svetlana Isakova(斯维特拉娜·伊凡诺沃) / 覃宇、罗丽、李思阳、蒋扬海 / 电子工业出版社 / 2017-8 / 89.00

《Kotlin 实战》将从语言的基本特性开始,逐渐覆盖其更多的高级特性,尤其注重讲解如何将 Koltin 集成到已有 Java 工程实践及其背后的原理。本书分为两个部分。第一部分讲解如何开始使用 Kotlin 现有的库和API,包括基本语法、扩展函数和扩展属性、数据类和伴生对象、lambda 表达式,以及数据类型系统(着重讲解了可空性和集合的概念)。第二部分教你如何使用 Kotlin 构建自己的 ......一起来看看 《Kotlin实战》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码