preface

This article began to formally enter the actual battle, in front of the omit, vite create vuE3 project process, too basic don’t say, I believe this is not difficult to anyone, most of the following is to use, pictures show the code, said good hand touch hand, their wanha O(∩_∩)O haha ~

Achieve the goal

Integrated naiveui

It is recommended to pull out a naive. Ts in SRC /plugins/ and expose it via SRC /plugins/index.ts

index.ts

main.js

naive.ts

The above is the recommended use, of course, you can also choose global import, such as the following:

Not recommended

Creating a Route Page

The first way to route recommendations is to create a page in the SRC /router/modules directory, with a *.ts for each module

1. Create SRC /router/index.ts

2, create a SRC/router/modules/login ts

3, main.ts is added, the rest is reserved, only the registered route is added

Basic LOGIN Template

Finally happily to create/SRC/views/login/index. The vue, first to write a template framework, a good habit, content, fill in just a matter of slowly

N – form components

It’s time, let’s have today, the n-form leading component

7, the index. The vue script

The above boring code display, estimate a lot of impatient partners can not watch to laugh at me, appropriate to write some source code parsing, hope to give you inspiration, or help,

The source code parsing

Formref.value.validate ()

2, through the userStore.login(params) call state management login method, or token information, and save, and then enter the system, refer to the following code, is to enter the system, obtain permission, routing, authentication and other related operations (after the series in the update)

style

What do not want to write style, want to copy, that all right, meet you!

<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>Copy the code

Final finish