To better learn to use Vue3 start > rain-ui

Github

Use Vite to build official website

Install create-viet-app globally

yarn global add create-vite-app@1.18. 0
Copy the code

Create a project directory

cva rain-ui
Copy the code

The little knowledge

The command given by the Vite documentation is

npm init vite-app <project-name>

yarn create vite-app <project-name>

Is equivalent to

Globally install create-viet-app and then

cva <project-name>

Is equivalent to

npx createa-vite-app <project-name>

NPX will help you install packages globally

The difference between VUE2 and VUe3 after creating the project

90% of them are written exactly the same, except for the following

Vue 3’s Template supports multiple root tags, Vue 2 does not

Vue 3 has createApp() and Vue 2 has New Vue().

CreateApp, new Vue({template, render})

Import Vue Router 4 and initialize vue-Router

Use (router) add <router-view> Add <router-link>Copy the code

Start creating the official website

Home.vue

Topnav: Logo on the left and Menu Banner on the right: Text introduction + Start buttonCopy the code

Doc.vue

Topnav: Aside, Content: mainCopy the code

The new route

The path is #/

Rendering Home. Vue

When the path is #/doc

Rendering Doc. Vue

Encapsulate the navigation section of Home and Doc, complete CSS and Router

The official website is created.

The Switch component

API design

<Switch value="true" />  //value is the string "true"
<Switch value="false" /> //value is the string "false"
<Switch :value=" true " /> //value is a Boolean value true
<Switch :value=" false " />  //value is a Boolean value false
Copy the code

Is on when value is the string “true” or a Boolean value true

All other cases are displayed as off

How do I get the circle to roll to the right

With CSS transition

Click to switch, and animation

How do I get the Switch to emit input events

Use context.emit(‘input’, XXX)

Vue 3 的 v-model

requirements

The property name is arbitrary, let’s say x

The event name must be “Update :x”

The effect

<Switch :value="y" @update:value="y = $event"/>

I can write it as theta

<Switch v-model:value="y" />

The document

This is a breaking change from Vue 2 to Vue 3.

This is explained in detail in the documentation

A small summary

Value =”true” and :value=”true

Add transition animations using CSS Transition

Use ref to create internal data

Use :value and @input to let parent and child components communicate (component communication)

Using the $event

Use v – model

A frame is a frame for you: Don’t change props

Differences between Vue 2 and Vue 3

The new V-Model replaces the previous V-Model and.sync

Add context.emit, same as this.$emit

The effect

The Button component

demand

See Bulma, Element

There can be different levels.

It could be a link, it could be text

Can click, focus, mouse hover

You can change the size: large, medium and small

It can be disabled.

Can be loaded

API design

<Button
 @click=? 
 @focus=? 
 @mouseover=?
 theme="button or link or text"
 level="main or normal or minor"
 size="big normal small"
 disabled
 loading
\></Button>
Copy the code

Vue 3 property binding

By default, all attributes are bound to the root element

Use inheritAttrs: false to unbind the default

Get all attributes using $attrs or context.attrs

Batch bind attributes using v-bind=”$attrs”

Const {size, level… XXX} = context.attrs separates attributes

UI library CSS considerations

Scoped cannot be used

Because XXX in data-v-xxx may run differently each time

You must output a stable class selector that is easy to override

Must prefix

.button does not work, it is easily overridden by the user

Rain-button can be, not easily covered

.theme-link No, easily overridden by users

.rain-theme-link Yes, not easily overridden

Minimum impact principle of CSS

CSS must not influence library users

Let button support size property

The value of size is big, normal, and small

Make button support the level attribute

The value of level is main, Normal, minor, and danger

Make Button support Disabled

The value of disabled is true or false

< button disabled > ☑

< button: disabled = “true” > ☑

< button disabled = “true” > ❎

< button disabled = “false” > ❎

Let button support loading

The loading value is true/false

A small summary

Vue attribute inheritance

Default attributes are passed to the root element

InheritAttrs: false disallows it

V – bind = “$attrs” or context. Attrs

Library CSS requirements

Can’t use scoped

Each CSS class is prefixed

Minimum impact principle of CSS

The effect

Dialog component

dialog

demand

Click and pop up

There are overlay layers

There are the close button

Have a title

There are content

There are yes/no buttons

Check out the code by looking at AntDesign

<Dialog 
  visible
  title="Title"
  @yes="fn1" @no="fn2"
></Dialog>
Copy the code

Let Dialog support visible property

Make Dialog clickable to close

Caution Do not modify props

Let Dialog support custom content

Use slot slot

Move the Dialog under the body

Prevents Dialog from being occluded

Built-in component: Teleport

Effect: