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
- Executed before the components are created (it
this
is undefined
), can only access attribute parameters provided (props, attrs, slots, emit ), can not access other component options (data, computed, methods)
- The returned content will be exposed to the rest of the component (calculated properties, methods, life cycle hooks…) and the component template
- 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)
- 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)
- Add responsiveness to the data: use
ref
/ reactive
package as responsive data; so when the data changes, the injector will automatically update the data
- 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
- 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:
- Mobile S/M/L - 320px/375px/425px
- Tablet - 768px
- Laptop /L - 1024px/1440px
- 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
- Update personal profile information and save it to github, through
File | Manage IDE Settings
to export and import
- Configuration
Code Style
, quick format code
- Sidebar tools can be integrated
Ctrl + Shift + 方向键
height adjustment is consistent with fixed width
deploy
Bale
- build
- Use
http-server
( npm i http-server -g
) to preview dist ( hs dist -c-1
)
Deploy to github
- Create a github repository or branch for deploy
- 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)
- 更改 git repository Settings >>> Github Pages >>> source >>> save
- Step on the pit: When there is a denial of access to all github.io sites, modify the dns to 8.8.8.8
- Deployment process automation: write command line script file execution script
- 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
- Log in to gitee, import the github repository
- Enable gitee pages service
- 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