259 lines
4.6 KiB
Markdown
259 lines
4.6 KiB
Markdown
---
|
||
title: Angular CLI 之初体验
|
||
id: '143'
|
||
categories:
|
||
- 分享
|
||
tags:
|
||
- Angular
|
||
- CLI
|
||
- angular/cli
|
||
date: 2017-09-20 17:13:04
|
||
---
|
||
|
||
[**Angular CLI**](https://cli.angular.io/)是一个**命令行界面**工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。 比起需要自己去搭建工作流，**[Angular CLI](https://cli.angular.io/)** 可以为你省去这些繁琐的工作，直接进行项目的开发。
|
||
|
||
## 配置开发环境
|
||
|
||
1. 安装最新版本的node，angular官方要求**node `6.9.x` 和 npm `3.x.x` 以上的版本。** 具体安装请参考 [node官网](http://nodejs.cn/) , 安装过程不再赘述。
|
||
2. 全局安装 [**Angular CLI**](https://cli.angular.io/)
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
npm install -g @angular/cli
|
||
```
|
||
|
||
|
||
|
||
## 创建新项目
|
||
|
||
1. 打开终端窗口 运行下列命令来生成一个新项目以及应用的骨架代码：
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
ng new myapp
|
||
```
|
||
|
||
|
||
|
||
2. 进入项目目录，并启动服务器。
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
cd myapp
|
||
ng serve --open
|
||
```
|
||
|
||
|
||
|
||
ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。 使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
## 设置代理
|
||
|
||
1. 我们开发的时候，有时需要对接口做代理，**[Angular CLI](https://cli.angular.io/)**同样给我们提供了设置代理的方式
|
||
|
||
|
||
|
||
首先在项目的根目录下创建一个**proxy.conf.json** 文件
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
{
|
||
"/data": {
|
||
"target": "http://xxx.xxx.xxx.xxx:8080",
|
||
"secure": false,
|
||
"changeOrigin": true
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
"/data"是接口所包含的字符，target则是代理的ip和端口号
|
||
|
||
|
||
|
||
2. 然后在项目的根目录打开终端，运行下面的指令：
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
ng serve --proxy-config proxy.conf.json
|
||
```
|
||
|
||
|
||
|
||
这样代理的设置就完成了。
|
||
|
||
|
||
|
||
## 样式编译
|
||
|
||
**[Angular CLI](https://cli.angular.io/)** 支持sass、less、stylus等方式编译样式
|
||
|
||
1. 在创建项目时可以设置编译方式：
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
ng new myapp --style=sass
|
||
ng new myapp --style=less
|
||
ng new myapp --style=stylus
|
||
```
|
||
|
||
|
||
|
||
上面分别是创建项目时设定的样式编译方式：sass、less、stylus
|
||
|
||
|
||
|
||
2. 当然，你也可以在手动修改，在项目根目录下找到 **.angular-cli.json**
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
"defaults": {
|
||
"styleExt": "styl",
|
||
"component": {}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
defaults下面的styleExt就是你要设定的编译方式，这里采用了stylus，stylus的后缀为styl，其他的方式设置对应的后缀名。
|
||
|
||
|
||
|
||
然后继续在该文件中找到
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
"styles": [
|
||
"styles.styl"
|
||
]
|
||
```
|
||
|
||
|
||
|
||
全改完了之后，不要忘了把项目**根目录**里的css文件和**src/app**里的css文件也改成相应的后缀
|
||
|
||
|
||
|
||
## 打包编译后资源引入根目录
|
||
|
||
**[Angular CLI](https://cli.angular.io/)** 打包编译后，引入的资源都是"/"根目录引入，但有时候我们的项目可能并不是存放在域名的根目录，所以这种情况就需要我们设置一下引入资源的根目录了
|
||
|
||
1. 打开src目录下面的**index.html**文件，在<head>标签里面有个base标签
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>myapp</title>
|
||
<base href="/">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
</head>
|
||
<body>
|
||
<app-root></app-root>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
|
||
|
||
base标签默认是"/"根目录
|
||
|
||
|
||
|
||
2. 然后我们回到整项目的根目录下面找到**package.json**文件,打开文件，找到"scripts"，修改"build"的值
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
"scripts": {
|
||
"ng": "ng",
|
||
"start": "ng serve --proxy-config proxy.conf.json",
|
||
"build": "ng build --prod --bh /pages/myapp/",
|
||
"test": "ng test",
|
||
"lint": "ng lint",
|
||
"e2e": "ng e2e"
|
||
},
|
||
```
|
||
|
||
|
||
|
||
然后在命令行中输入
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
npm run build
|
||
```
|
||
|
||
|
||
|
||
等待编译完成后，在dist目录下的**index.html**文件中的base标签的值就变成你之前设置的目录了，引入的资源放到正式环境也可以正常访问。
|
||
|
||
|
||
|
||
当然，你也可以不设置**package.json**文件，直接在命令行输入
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
|
||
ng build --prod --bh /pages/myapp/
|
||
或者
|
||
ng build --prod --base-href /pages/myapp/
|
||
```
|