Vue项目中常见问题(48)登录注册静态组件

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

1.完整静态组件的搭建

 2.登录的完整静态代码:

​编辑

 3.注册的完整静态代码:

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

登录注册是必须要会的技能

1.完整静态组件的搭建

并且在assets文件下新建一个images,里面放精灵图

 

我们知道assets文件下放的是所有组件共用的资源,而且以后打包的时候public下的文件是原封不动的打包的,assets打包后就没了,放到js文件里,也就是模块里面去了

所以我们删除pages/Home/ListContainer/icons.png

然后在pages/Home/ListContainer/index.vue中删除对应的样式

我们知道@是src的别名,一般在js中使用,当然我们也可以用在css当中,但是在css当中使用要~@

 2.登录的完整静态代码:

<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">
        <div class="loginform">
          <ul class="tab clearFix">
            <li>
              <a href="##" style="border-right: 0;">扫描登录</a>
            </li>
            <li>
              <a href="##" class="current">账户登录</a>
            </li>
          </ul>

          <div class="content">
            <form action="##">
              <div class="input-text clearFix">
                <span></span>
                <input type="text" placeholder="邮箱/用户名/手机号">
              </div>
              <div class="input-text clearFix">
                <span class="pwd"></span>
                <input type="text" placeholder="请输入密码">
              </div>
              <div class="setting clearFix">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" value="2" checked="">
                  自动登录
                </label>
                <span class=&#