Angular BootStrap 登录页面
<div class="cnblogs_code"><pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">安装angular</span>
npm install -g @angular/<span style="color: rgba(0, 0, 0, 1)">cli
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">新建项目</span>
<span style="color: rgba(0, 0, 0, 1)">ng new familyxiaologinui
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)"> 打开设置</span>
<span style="color: rgba(0, 0, 0, 1)">cd familyxiaologinui
ng serve </span>--open --port 4100
<span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">引入Bootstrap</span>
npm install bootstrap@4.0.0-beta.2 popper.js jquery --<span style="color: rgba(0, 0, 0, 1)">save
</span><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">安装https://www.npmjs.com/package/angular-font-awesome</span>
npm install --save font-awesome angular-font-awesome<br><br><br><br></pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件 angular.json</span>
<span style="color: rgba(0, 0, 0, 1)">{</span>"projects"<span style="color: rgba(0, 0, 0, 1)">: {</span>"architect"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"build"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"builder": "@angular-devkit/build-angular:browser"<span style="color: rgba(0, 0, 0, 1)">,
</span>"options"<span style="color: rgba(0, 0, 0, 1)">: {</span>"styles"<span style="color: rgba(0, 0, 0, 1)">: [
</span>"src/styles.less"<span style="color: rgba(0, 0, 0, 1)">,
</span>"./node_modules/font-awesome/css/font-awesome.css"<span style="color: rgba(0, 0, 0, 1)">,
</span>"./node_modules/bootstrap/dist/css/bootstrap.min.css"<span style="color: rgba(0, 0, 0, 1)">
],
</span>"scripts"<span style="color: rgba(0, 0, 0, 1)">: [
</span>"./node_modules/jquery/dist/jquery.slim.min.js"<span style="color: rgba(0, 0, 0, 1)">,
</span>"./node_modules/popper.js/dist/umd/popper.min.js"<span style="color: rgba(0, 0, 0, 1)">,
</span>"./node_modules/bootstrap/dist/js/bootstrap.min.js"<span style="color: rgba(0, 0, 0, 1)">
]
}</span><span style="color: rgba(0, 0, 0, 1)">
}</span><span style="color: rgba(0, 0, 0, 1)">
}
}
}</span><span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">#</span><span style="color: rgba(0, 128, 0, 1)">生成登录Form</span>
ng g c components/common/loginform<br>#进入https://www.bootcss.com/,选择BootStrap4中文网->"实例(https://v4.bootcss.com/docs/examples/)"->Sign-In(https://v4.bootcss.com/docs/examples/sign-in/)->右键“查看网页源代码”<br>#将form中的内容得到到->loginform.component.less(对应组件的样式中)<br><br></pre>
</div>
<p><span style="color: rgba(255, 0, 0, 1)">注意：引用了第三方样式，要重启一下（我使用的是vscode）</span></p>
<p>到此简单登录页常写好了,手机效果还不错</p>
<p><img src="https://img2020.cnblogs.com/blog/822458/202005/822458-20200524232501000-783918353.png"></p>
<p> </p>
<div class="cnblogs_code">
<pre>PS E:\...> ng serve --open --port 4110<span style="color: rgba(0, 0, 0, 1)">
An unhandled exception occurred: Script file .</span>/node_modules/popper.js/dist/umd/<span style="color: rgba(0, 0, 0, 1)">popper.min.js does not exist.
See </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">C:\Users\ADMINI~1\AppData\Local\Temp\2\ng-MVucsE\angular-errors.log</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> further details.
npm install popper.js</span></pre>
</div>
<div class="cnblogs_code">
<pre>An unhandled exception occurred: Script file ./node_modules/jquery/dist/<span style="color: rgba(0, 0, 0, 1)">jquery.slim.min.js does not exist.
See </span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">C:\Users\ADMINI~1\AppData\Local\Temp\2\ng-FGZkaF\angular-errors.log</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">for</span><span style="color: rgba(0, 0, 0, 1)"> further details.
PS E:\...</span>> npm install jquery</pre>
</div>
<p> </p>
<p> </p>
<p> </p>
<p>、</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/xiaoruilin/p/12952353.html
頁:
[1]