更新

source/_posts/angular-cli-之初体验.md

@@ -1,9 +1,12 @@
 ---
 title: Angular CLI 之初体验
-tags: []
 id: '143'
 categories:
-  - - 分享
+ - 分享
+tags:
+ - Angular
+ - CLI
+ - angular/cli
 date: 2017-09-20 17:13:04
 ---
 
@@ -11,41 +14,73 @@ date: 2017-09-20 17:13:04
 
 ## 配置开发环境
 
-1.  安装最新版本的node，angular官方要求**node `6.9.x` 和 npm `3.x.x` 以上的版本。** 具体安装请参考 [node官网](http://nodejs.cn/) ,安装过程不再赘述。
+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/。
+
     
-    ![app-works](https://image.dengtongyu.com/blog/2017/09/app-works.png)
+
+    
+
+![app-works](https://image.dengtongyu.com/blog/2017/09/app-works.png)
+
     
 
 ## 设置代理
 
 1.  我们开发的时候，有时需要对接口做代理，**[Angular CLI](https://cli.angular.io/)**同样给我们提供了设置代理的方式
+
     
+
     首先在项目的根目录下创建一个**proxy.conf.json** 文件
+
     
-    ```
+
+    
+
+``` 
+
     {
         "/data": {
             "target": "http://xxx.xxx.xxx.xxx:8080",
@@ -54,16 +89,28 @@ date: 2017-09-20 17:13:04
         }
     }
     ```
+
     
+
     "/data"是接口所包含的字符，target则是代理的ip和端口号
+
     
+
 2.  然后在项目的根目录打开终端，运行下面的指令：
+
     
-    ```
+
+    
+
+``` 
+
     ng serve --proxy-config proxy.conf.json
     ```
+
     
+
     这样代理的设置就完成了。
+
     
 
 ## 样式编译
@@ -71,35 +118,61 @@ date: 2017-09-20 17:13:04
 **[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文件也改成相应的后缀
+
     
 
 ## 打包编译后资源引入根目录
@@ -107,8 +180,13 @@ date: 2017-09-20 17:13:04
 **[Angular CLI](https://cli.angular.io/)** 打包编译后，引入的资源都是"/"根目录引入，但有时候我们的项目可能并不是存放在域名的根目录，所以这种情况就需要我们设置一下引入资源的根目录了
 
 1.  打开src目录下面的**index.html**文件，在<head>标签里面有个base标签
+
     
-    ```
+
+    
+
+``` 
+
     <!doctype html>
     <html>
     <head>
@@ -122,12 +200,21 @@ date: 2017-09-20 17:13:04
     </body>
     </html>         
     ```
+
     
+
     base标签默认是"/"根目录
+
     
+
 2.  然后我们回到整项目的根目录下面找到**package.json**文件,打开文件，找到"scripts"，修改"build"的值
+
     
-    ```
+
+    
+
+``` 
+
     "scripts": {
         "ng": "ng",
         "start": "ng serve --proxy-config proxy.conf.json",
@@ -137,19 +224,35 @@ date: 2017-09-20 17:13:04
         "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/
-    ```
+    ```