前言

本文开始正式进入实战篇，前面省略了，vite创建vue3项目过程，太过于基础的就不说了，我相信这个难不倒啥人，下面多数是采用，图片展示代码，说好的手摸手呢，自己撸哈O(∩_∩)O哈哈~

实现目标

集成 naiveui

建议抽离一个 naive.ts 在 src/plugins/ 中，然后通过 src/plugins/index.ts 暴露

index.ts

main.js

naive.ts

以上是推荐使用方式，当然也可以选择全局引入，比如下面这样：

不推荐方式

创建路由页面

首先路由推荐的方式是，在 src/router/modules 目录创建页面，一个模块对应一个 *.ts

1、创建 src/router/index.ts

2、创建 src/router/modules/login.ts

3、main.ts增加，其余的还是保留，只是增加注册路由

login基础模板

最后愉快地去创建 /src/views/login/index.vue 就好了，先写个模板框架，养成好习惯，内容嘛，慢慢填就完事了

n-form组件

是时候，让我们今天，n-form 主角组件上场了

7，index.vue script

上面枯燥乏味的代码展示，估计很多没耐心的小伙伴看不下去要吐槽我了，适当写点源码解析吧，希望能给到您启发，或者帮助、

---

源码解析

1、通过 formRef.value.validate(） 进行表单验证

2、通过 userStore.login(params) 调用状态管理里面login方法，或者token信息，并且保存，然后再进入系统，参考如下代码，之后就是进入系统，获取权限，路由，鉴权等相关操作了（之后的系列在更新）

样式

什么不想写样式，想复制，那好吧，满足你！

<style lang="less" scoped>
  .view-account {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    &-container {
      flex: 1;
      padding: 32px 0;
      width: 384px;
      margin: 0 auto;
    }
    &-top {
      padding: 32px 0;
      text-align: center;
      &-desc {
        font-size: 14px;
        color: #808695;
      }
    }
    &-other {
      width: 100%;
    }
    .default-color {
      color: #515a6e;
      .ant-checkbox-wrapper {
        color: #515a6e;
      }
    }
  }
  @media (min-width: 768px) {
    .view-account {
      background-image: url('../../assets/images/login.svg');
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
    }
    .page-account-container {
      padding: 32px 0 24px 0;
    }
  }
</style>

最后上成品