hexo-blog/source/_posts/angular-cli-之初体验.md at 522abb824bc7a499f20231cb3c0ecc96f6d95f8f

dengtongyu/hexo-blog

0 Fork 0

Files

T

dengtongyu 5efd5b9c40 初始化

2020-11-23 18:59:26 +08:00

4.5 KiB

Raw Blame History

title, tags, id, categories, date

title

配置开发环境

安装最新版本的node，angular官方要求node 6.9.x 和 npm 3.x.x 以上的版本。 具体安装请参考 node官网 ,安装过程不再赘述。
全局安装 Angular CLI
```
npm install -g @angular/cli
```

创建新项目

打开终端窗口运行下列命令来生成一个新项目以及应用的骨架代码：
```
ng new myapp
```
进入项目目录，并启动服务器。
```
cd myapp
ng serve --open
```
ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。

设置代理

我们开发的时候，有时需要对接口做代理，**Angular CLI**同样给我们提供了设置代理的方式

首先在项目的根目录下创建一个proxy.conf.json 文件
```
{
    "/data": {
        "target": "http://xxx.xxx.xxx.xxx:8080",
        "secure": false,
        "changeOrigin": true
    }
}
```
"/data"是接口所包含的字符，target则是代理的ip和端口号
然后在项目的根目录打开终端，运行下面的指令：
```
ng serve --proxy-config proxy.conf.json
```
这样代理的设置就完成了。

样式编译

Angular CLI 支持sass、less、stylus等方式编译样式

在创建项目时可以设置编译方式：
```
ng new myapp --style=sass
ng new myapp --style=less
ng new myapp --style=stylus
```
上面分别是创建项目时设定的样式编译方式：sass、less、stylus
当然，你也可以在手动修改，在项目根目录下找到 .angular-cli.json
```
"defaults": {
    "styleExt": "styl",
    "component": {}
  }
```
defaults下面的styleExt就是你要设定的编译方式，这里采用了stylus，stylus的后缀为styl，其他的方式设置对应的后缀名。

然后继续在该文件中找到
```
"styles": [
        "styles.styl"
      ]
```
全改完了之后，不要忘了把项目根目录里的css文件和src/app里的css文件也改成相应的后缀

打包编译后资源引入根目录

Angular CLI 打包编译后，引入的资源都是"/"根目录引入，但有时候我们的项目可能并不是存放在域名的根目录，所以这种情况就需要我们设置一下引入资源的根目录了

打开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标签默认是"/"根目录

然后我们回到整项目的根目录下面找到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/
```

4.5 KiB Raw Blame History