angular初始化项目与常用方式

angular4.0之初始化项目及常用命令：

1. 安装@angular/cli工具: npm install -g @angular/cli
   
   

2. 初始化项目:

1. 初始化项目并安装项目依赖: ng new 项目名

2. 初始化项目不自动安装项目依赖: ng new 项目名 --skip-insatll,这种只安装项目源文件不安装packageon的模块依赖，所有在此之后我们需进入项目目录手动执行"cnpm insatll"即可

3. 启动服务:

    ng serve 或 ng serve --open(会自动打开默认浏览器并访问项目

   
   

4. 引入第三方模块

   注意:通常引入第三方模块我们只需要安装对应模块包即可，但在angular中应为其本身使用type,故此处安装第三方依赖有所不同，我们看下具体方式:

   cnpm insatll  --save 加 cnpm insatll --save-dev @types/

   cnpm insatll  bootstrap --save 加 cnpm insatll bootstrap --save-dev @types/bootstrap
   
   

5. 修改css编译方式为scss
           如果初始化的项目中不含有".angular-clion"文件则手动创建一个与src目录同级的".angular-clion"文件其内容为如下:

1. {
   "schema": "./node_modules/@angular/cli/lib/config/schemaon",
   "project": {
   "name": "ng-article"
   },
   "apps": [
   {
   "root": "src",
   "outDir": "dist",
   "assets": [
   "assets",
   "favicon.ico"
   ],
   "index": "index.html",
   "main": "main.ts",
   "polyfills": "polyfills.ts",
   "test": "test.ts",
   "tsconfig": "tsconfig.appon",
   "testTsconfig": "tsconfig.specon",
   "prefix": "app",
   "styles": [
   "styles.scss",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   "s": [
   "../node_modules//dist/.min",
   "../node_modules/bootstrap/dist/js/bootstrap.min"
   
   ],
   "environmentSource": "environments/environment.ts",
   "environments": {
   "dev": "environments/environment.ts",
   "prod": "environments/environment.prod.ts"
   }
   }
   ],
   "e2e": {
   "protractor": {
   "config": "./protractor.conf"
   }
   },
   "lint": [
   {
   "project": "src/tsconfig.appon"
   },
   {
   "project": "src/tsconfig.specon"
   },
   {
   "project": "e2e/tsconfig.e2eon"
   }
   ],
   "test": {
   "karma": {
   "config": "./karma.conf"
   }
   },
   "defaults": {
   "styleExt": "scss",
   "component": {}
   }
   }

                    然后将项目中所有用到的.css文件或者样式后缀的全部更改为.scss即可