#安装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:UsersADMINI~1AppDataLocalTemp2 g-MVucsEangular-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:UsersADMINI~1AppDataLocalTemp2 g-FGZkaFangular-errors.log" for further details. PS E:...> npm install jquery
、