Morioh
Login
Liya Gebre

Liya Gebre

3 years ago

A Vue.js 3.0 UI Toolkit for Web

t-ui-vuejs

View 3.0

Reference documents

Reusability & Composition

Teleport incoming

Mount the template to another location in the DOM.

Use multiple Teleports to mount to the same target element, the order is simple append.

【Advanced】Composition API

setup component options

  1. Executed before the components are created (it thisis undefined), can only access attribute parameters provided (props, attrs, slots, emit ), can not access other component options (data, computed, methods)
  2. The returned content will be exposed to the rest of the component (calculated properties, methods, life cycle hooks…) and the component template
  3. Register the lifecycle hook in setup: add the on prefix ( onMounted(callback)) and import from Vue ( import { onMounted } from 'vue'); the callback function will be executed when the component calls the hook
Parameters: props

Props support responsive (sub-component values ​​are automatically updated).

Parameters: context

const { attrs, slots, emit } = context

provide & inject (provide and inject)

  1. The parent component uses the provide option to provide data, and the child component uses the inject option to use data (no matter how deep the nesting is, it solves the pain point of the too long prop transmission component chain)
  2. Add responsiveness to the data: use ref/ reactivepackage as responsive data; so when the data changes, the injector will automatically update the data
  3. As the provider updates the responsive data; For the injection by the update data, in the proposed provider provides a corresponding method is responsible for changing the responsive data, and finally injected by using the method that is introduced into the inject can
  4. Ensure that data is not tampered injected by: Using readonly(data)data provided by the package

Note: Provider—a component that uses provide to provide data; Injector—a component that uses inject to obtain data

Quick

doc

Router view

Reference Document 4.0 Reference Document 3.x

Responsive page

Gradually expand based on mobile

According to the chrome device toolbar is divided into:

  1. Mobile S/M/L - 320px/375px/425px
  2. Tablet - 768px
  3. Laptop /L - 1024px/1440px
  4. 4K - 2560px

NPM

CLI commands

The version of each publication cannot be the same as before.

Sass

@mixin  response ( $device ) {
   @if ( $device == $MobileS ) {
     @media ( min-width : $MobileS ) { // Only apply the style at least $MobileS 
      @content
    }
  } @else if($device == $MobileM) {
    @media ( min-width : $MobileM ) and ( max-width : $MobileL ){ / / Apply the style at least $MobileM , and the maximum cannot exceed $MobileL 
      @ content
    }
  }
}

Icon

Alibaba vector icon library

When using the link generated by the svg scheme, if you have concerns, you can copy the link to the local to open, copy the code inside, and generate the js file yourself to re-introd it.

WebStorm

Documentation

  1. Update personal profile information and save it to github, through File | Manage IDE Settingsto export and import
  2. Configuration Code Style, quick format code
  3. Sidebar tools can be integrated Ctrl + Shift + 方向键height adjustment is consistent with fixed width

deploy

Bale

  1. build
  2. Use http-server( npm i http-server -g) to preview dist ( hs dist -c-1)

Deploy to github

  1. Create a github repository or branch for deploy
  2. Initialize dist as a local git repository and upload
cd dist
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:tangzhenming/t-ui-vuejs-deploy.git
git push -u origin main (-f)
  1. 更改 git repository Settings >>> Github Pages >>> source >>> save
  2. Step on the pit: When there is a denial of access to all github.io sites, modify the dns to 8.8.8.8
  3. Deployment process automation: write command line script file execution script
  4. Step on the pit: In the dist packaged by vite, the assets folder is prefixed with an underscore, and the path cannot be recognized after deploying to GitHub; writing the vite.config.ts file to customize the packaging path

Deploy to gitee

  1. Log in to gitee, import the github repository
  2. Enable gitee pages service
  3. The update of the gitee project needs to update github first, and then click forced synchronization in the imported gitee project

Download Details:

Author: tangzhenming

Source Code: https://github.com/tangzhenming/t-ui-vuejs

#vuejs #vue #javascript

A Vue.js 3.0 UI Toolkit for Web
4.55 GEEK