Angular BootStrap 登录页面

#安装angular
npm install -g @angular/cli
#新建项目
ng new familyxiaologinui
# 打开设置
cd familyxiaologinui
ng serve --open --port 4100
#引入Bootstrap
npm install bootstrap@4.0.0-beta.2 popper.js jquery --save
#安装  https://www.npmjs.com/package/angular-font-awesome
npm install --save font-awesome angular-font-awesome

 

//文件 angular.json
{"projects": {"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {"styles": [
              "src/styles.less",
              "./node_modules/font-awesome/css/font-awesome.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        }
      }
    }
  }
}

 

#生成登录Form
ng g c components/common/loginform
#进入https://www.bootcss.com/,选择BootStrap4中文网->"实例(https://v4.bootcss.com/docs/examples/)"->Sign-In(https://v4.bootcss.com/docs/examples/sign-in/)->右键“查看网页源代码”
#将form中的内容得到到->loginform.component.less(对应组件的样式中)

注意：引用了第三方样式，要重启一下（我使用的是vscode）

到此简单登录页常写好了,手机效果还不错

 

PS E:\...> ng serve --open --port 4110
An unhandled exception occurred: Script file ./node_modules/popper.js/dist/umd/popper.min.js does not exist.
See "C:\Users\ADMINI~1\AppData\Local\Temp\2\ng-MVucsE\angular-errors.log" for further details.

npm install popper.js

An unhandled exception occurred: Script file ./node_modules/jquery/dist/jquery.slim.min.js does not exist.
See "C:\Users\ADMINI~1\AppData\Local\Temp\2\ng-FGZkaF\angular-errors.log" for further details.
PS E:\...> npm install jquery

 

 

 

、