博客前端项目学习day01

这里写自定义目录标题

在VScode上写前端,采用vue3。

登录

创建项目

  1. 检查node版本

node -v

  1. 创建一个新的项目

npm init vite@latest blog-front-admin

中间会弹出询问是否要安装包,选择"y"即可。然后依次选择Vue和JavaScript。

ps:刚刚我的位置建错了,我换了一个位置重新建。

  1. 按照提示,进入项目,安装依赖并运行项目

cd blog-front-admin

npm install

npm run dev


  1. 删减得到一个干净的APP.vue
  1. 在src文件下新建路由文件,并安装路由包

npm install vue-router@4 --save

  1. 在src文件下新建视图文件,然后在视图文件下新建Index.vue,并简单写点东西,写的时候输入"vue",然后选择vue3,它会自动填充vue3模板。
  1. 在router里面新建index.js文件,并补充完整简单的路由信息
bash 复制代码
import {createRouter,createWebHistory} from 'vue-router'
const routes =[
    {
        name:'首页',
        path:'/index',
        component:() => import('../views/Index.vue'),
    }
];

const router = createRouter({
    routes,
    history:createWebHistory(),
})

export default router
  1. 在main.js里面引用router,在App.vue里面加入路由
  1. 运行结果。

配置环境变量,方便使用

  1. 配置代理路径,方便使用后端路径
bash 复制代码
server:{
    hmr:true,
    port:3001,
    proxy:{
      '/api':{
        target:"http://localhost:8081/",//目标代理接口地址
        secure:false,
        changeOrigin:true,//开启代理,在本地创建一个虚拟服务端
        pathRewrite:{
          '^/api':'/api',
        },
      },
    },
  },
  1. 配置本项目路径,方便引用
bash 复制代码
  resolve:{
    //配置路径别名
    alias: {
      '@':path.resolve(__dirname,'./src'),
    },
  },

安装路径依赖,并使用

npm install path --save

  1. 根据配置,前面的代码做出相应修改
  2. 运行,此时的路径端口变成了修改后的3001

登录页面

  1. 安装element-plus依赖,并在main.js里面引入

npm install element-plus --save

ps:要做登录页,那就把之前的Index.vue改为Login.vue,以及修改路由。

  1. 在Login.vue里面试用element-plus
  1. 设置登陆背景,安装相关依赖,

npm install sass --save

npm install sass-loader --save

然后设置背景图片,注意把style.css里面的内容都清空,添加简单的内容,不然会有影响。对于height,不知道为什么使用"height:100%"就不对。

  1. 使用表格

  2. padding作用

    注释的结果

没注释的结果

验证码


登陆表单


html 复制代码
<div class="login-body">
  <div class="login-panel">
    <div class="login-title">用户登录</div>
    <el-form :model="formData" :rules="rules" ref="formDataRef">
      <el-form-item prop="account">
        <el-input placeholder="请输入账号" v-model="formData.account" size="large">
          <template #prefix>
            <span class="iconfont icon-account"></span>
          </template>
        </el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
  </div>
</div>

在这段代码中:

  • <div class="login-body"><div class="login-panel"> 是用来布局和样式化登录表单的外部容器。
  • <div class="login-title">用户登录</div> 显示了登录表单的标题。
  • <el-form> 是 Element UI 提供的表单组件,通过 :model="formData" 绑定了表单数据对象 formData:rules="rules" 绑定了表单验证规则对象 rulesref="formDataRef" 为表单组件添加了引用名称 formDataRef
  • <el-form-item prop="account"> 定义了一个表单项,prop="account" 指定了与 formData 对象中的 account 字段进行绑定。
  • <el-input> 是 Element UI 提供的输入框组件,通过 v-model="formData.account" 实现了与 formDataaccount 字段的双向绑定,placeholder 属性设置了输入框的占位符文本,size="large" 设置了输入框的尺寸为大号。
  • <template #prefix> 中的内容是输入框的前缀,这里使用了一个图标作为账号输入框的前缀图标,具体的图标样式是通过类名 iconfont icon-account 来定义的。

这段代码片段展示了一个基本的使用 Element UI 实现的用户登录表单界面,其中只包含了账号输入框的部分。你可以继续类似的方式添加密码输入框、登录按钮等其他表单元素,以完善整个登录界面的功能。

全部代码以及效果

html 复制代码
<template>
<div class="login-body">
  <div class="login-panel">
      <div class="login-title">用户登录</div>
      <el-form :model="formData"
               :rules="rules"
               ref="formDataRef">
        <el-form-item prop="account">
      <el-input placeholder="请输入账号"
                v-model="formData.account"
                size="large" >
          <template #prefix>
            <span class="iconfont icon-account"></span>
          </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input placeholder="请输入密码"
                v-model="formData.password"
                size="large" >
          <template #prefix>
            <span class="iconfont icon-password"></span>
          </template>
      </el-input>
    </el-form-item>
      
       <el-form-item prop="checkCode">
         <div class="check-code-panel">
<el-input placeholder="请输入验证码"
           v-model="formData.checkCode" 
           class="input-panel"
           size="large"/>
      <img :src="checkCodeUrl"
            class="check-code"
            @click="changeCheckCode">
         </div>
      
    </el-form-item>

    <el-form-item label="">
      <el-checkbox 
                v-model="formData.rememberMe" :label="true" >记住我
    </el-checkbox>
</el-form-item>
       <el-form-item label="">
      <el-button type="primary"
                 :style="{width:'100%'}"
                 @click="login"> 
                登录
    </el-button>
    </el-form-item>
      </el-form>
  </div>
</div>
  
</template>

<script setup>
import { reactive, ref } from "vue";
const api={
  checkCode:"api/checkCode"
}
const checkCodeUrl = ref(api.checkCode);
const changeCheckCode = () =>{
   checkCodeUrl.value = api.checkCode+"?"+new Date().getTime();
}

//表单相关
const formDataRef=ref();
const formData=reactive({});

 const rules={
   account:[{
     required:true,
     message:"请输入用户名",
   }],
   password:[{
     required:true,
     message:"请输入密码",
   }],
   checkCode:[{
     required:true,
     message:"请输入验证码",
   }]
 }

const login = ()=>{
  formDataRef.value.validate((valid)=>{
if(!valid){
return;
}
  });
}
 </script>

<style lang="scss">
.login-body{
  width: "100%";
  height: calc(100vh);
  background-image: url(../assets/login-bg.jpg);
  background-size: cover;
  background-position: center;
  .login-panel{
  float: right;
  margin-right: 100px;
  margin-top: 100px;
  padding: 20px;//内容不顶着边
  width: 350px;
  border-radius: 5px;//圆角
  box-shadow: 2px 2px 10px #ddd;//阴影
  background: rgba(255,255,255,0.7);
.login-title{
  font-size: 20px;
  text-align: center;
  margin-bottom: 10px;
}
.check-code-panel{
  width:100%;
  display:flex;
  align-items: center;
  .input-panel{
    // flex:1;
    // margin-right: 5px;
  }
  .check-code{
    // height: 30px;
    margin-right: auto;
    margin-left:5px;
    cursor:pointer;
  }
}
}
}


</style>
相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试