内容简介:基于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。
使用
-
在node_modules的文件夹下找到/node_modules/@angular/cli/bin/
-
然后在终端中pwd输出路径
-
在root目录下找到~/bash_profile文件,用vim打开,把下面路径两个字换成刚刚得到的路径,然后写入文件中
alias ng="路径/ng"
-
在终端执行’. ~/.bash_profile’(如果遇到command not found: ng,重新运行一下这个命令)
-
项目中使用了sass做css预编译,因此需要安装sass,安装方法见下文
-
在项目根目录执行
npm install
-
ng serve --open
注:
npm i @angular/cli@latest -g ng serve --host ip地址
安装Sass
sass基于 Ruby 语言开发而成,因此安装sass前需要安装Ruby,下面以 linux 系统安装为例子(mac自带ruby,windows下安装参考 Sass官网 )
-
去 Ruby 官网下载Ruby 2.4.1版本到本地
-
分别运行以下命令安装:
cd ruby-2.4.1 ./configure make sudo make install
- 安装完后输入
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 -v
和 compass -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。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 基于Anglar-cli的种子工程
- qBittorrent - 优秀的种子下载工具
- SpringBoot2.1脚手架(种子)项目
- 基于python的种子搜索网站--开发过程
- 视频 | BT 种子和磁力链接是如何工作的?
- Oracle 12c 基于PDB种子数据库创建PDB
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Google成功的七堂课
罗耀宗 / 电子工业出版社 / 2005-7 / 28.00元
Google是全球使用人数最多的搜索引擎,在短短几年内,Google从斯坦福大学的实验室,茁壮成长为举世瞩目的IT业超级巨人,他们的成功绝非偶然,尤其是在网络泡沫破灭,行业一片萧条之际,它的崛起更为IT业带来一缕曙光。作者从趋势观察家的角度,以讲座的形式,向读者讲述Google成功的关键因素:破除因循守旧、不断打破常规,核心技术领先、做出了“更好的捕鼠器”,使得Google在搜索技术方面远远超越对......一起来看看 《Google成功的七堂课》 这本书的介绍吧!