Angular项目初始化步骤

2021-08-17 07:38 | (license)

初始化

ng new xxx

选项说明VALUE TYPEDEFAULT VALUE
--collection用来生成初始应用的一组原理图。别名: -cstring
--commit初始 git 仓库提交信息。booleantrue
--create-application在新工作区的 “src” 文件夹中创建一个新的初始应用程序项目。如果为 false,则会创建一个没有初始应用程序的空工作空间。然后,你可以使用 generate application 命令,以便让所有应用程序都创建在自己的项目文件夹中。booleantrue
--defaults对有默认值的选项禁用交互式输入提示。boolean
--directory要在其中创建工作空间的目录名称。string
--dry-run运行一遍并汇报其活动轨迹,但不真的写入任何结果。别名: -dbooleanfalse
--force强制覆盖现存文件。别名: -fbooleanfalse
--help在控制台显示关于本命令的帮助信息。`truefalse
--inline-style在组件 TS 文件中包含内联样式。默认情况下,将创建一个外部样式文件,并在组件 TypeScript 文件中对其进行引用。别名: -sboolean
--inline-template在组件 TS 文件中包含内联模板。默认情况下,将创建一个外部模板文件,并在组件 TypeScript 文件中对其进行引用。别名: -tboolean
--interactive启用交互式输入提示。boolean
--legacy-browsers使用差异化加载添加对 Internet Explorer 等旧版浏览器的支持。booleanfalse
--minimal创建没有任何测试框架的工作空间。(仅用于学习目的。)booleanfalse
--new-project-root要创建的新项目的路径。是相对于新工作空间根目录的。stringprojects
--package-manager用于安装依赖项的包管理器。`npmyarn
--prefix适用于初始项目的生成选择器的前缀。别名: -pstringapp
--routing为初始项目生成一个路由模块。boolean
--skip-git不要初始化 git 仓库。别名: -gbooleanfalse
--skip-install不要安装依赖包。booleanfalse
--skip-tests不要为新项目生成 “spec.ts” 测试文件。别名: -Sbooleanfalse
--strict创建带有更严格类型检查和更严格捆绑包预算设置的工作空间。此设置有助于提升可维护性,并预先捕获 BUG。欲知详情,参见 https://angular.cn/guide/strict-modebooleanfalse
--style用于样式文件的扩展名/预处理器。`cssscss
--verbose在输出日志中添加更多详情。别名: -vbooleanfalse
--view-encapsulation用在初始项目中的视图封装策略。`EmulatedNative

Angular配置

angular.json

projects.${projectName}.architect.build.styles - 生产环境全局样式

projects.${projectName}.architect.serve.styles - 开发环境全局样式

projects.${projectName}.architect.serve.configurations.development.hmr - 开发环境热更新

projects.${projectName}.architect.serve.configurations.development.host - 设置为'0.0.0.0'开发环境设置局域网访问

projects.${projectName}.architect.serve.configurations.development.proxyConfig - 开发环境设置代理配置外部文件

Typescript配置

tsconfig.json

compilerOptions.paths 路径别名

Eslint

Add schematic

ng add @angular-eslint/schematics

Rules

json
{ "@angular-eslint/directive-selector": [ "error", { "type": "attribute", "prefix": "app", "style": "camelCase" } ], "@angular-eslint/component-selector": [ "error", { "type": "element", "prefix": "app", "style": "kebab-case" } ], "indent": ["error", 2, { "SwitchCase": 0 }], "@typescript-eslint/ban-ts-comment": "warn", "@typescript-eslint/no-extra-semi": "error", "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-non-null-assertion": "off", "@typescript-eslint/no-unused-vars": ["warn", { "vars": "all", "args": "none", "ignoreRestSiblings": false }], "@typescript-eslint/type-annotation-spacing": [2, { "before": false, "after": true, "overrides": { "arrow": { "before": true, "after": true } } }], "prefer-const": "error", "no-underscore-dangle": "off", "no-shadow": "off", "@angular-eslint/no-empty-lifecycle-method": 0, // 强制在关键字前后使用一致的空格 (前后腰需要) "keyword-spacing": 2, "no-unused-vars": "off", "comma-dangle": [2, "never"], // 控制逗号前后的空格 "comma-spacing": [2, { "before": false, "after": true }], "semi": ["warn", "never"], // 要求或禁止在函数标识符和其调用之间有空格 "func-call-spacing": 2, // 强制在对象字面量的属性中键和值之间使用一致的间距 "key-spacing": [2, { "beforeColon": false, "afterColon": true }], // 要求箭头函数的参数使用圆括号 "arrow-parens": [2, "as-needed"], // 指定数组的元素之间要以空格隔开(, 后面), never参数:[ 之前和 ] 之后不能带空格,always参数:[ 之前和 ] 之后必须带空格 "array-bracket-spacing": [2, "never"], // 禁止或强制在单行代码块中使用空格(禁用) "block-spacing": [1, "never"], "object-curly-spacing": [1, "always"], "space-infix-ops": ["error", { "int32Hint": false }], "quotes": ["error", "single"] }