First, technical details

  • Four Components are made using the Vue3 Components API and Typescript.
  • The official website code supports highlighting.
  • Demonstrates folding component packaging.
  • Use the Vite dev command and build command for development and deployment
  • Try using rollup to package the project library and publish the NPM package.
  • Try using shell scripts for automated deployment

Ii. Achievements Display

Here is the GitHub source address

Click here to preview the effect

1. The first page

2. Introduction

3.switch

4.button

5.modal

6.tab

Three: after learning summary

1. Setup (Compoents ApI) completes a value transfer

// subcomponent <script lang="ts"> export default {props: {value: Boolean, // Receive parent component value}, setup(props, context) {const toggle = () => {context.emit("update:value",! props.value); // The value is returned to the parent component}; return { toggle }; // Must return otherwise the component cannot get toggle}}; </script>Copy the code
<script lang="ts"> import Switch from '.. Import {ref} from 'vue' export default {components: /lib/ switch. vue' import {ref} from 'vue' export default {components: {Switch},// Receive component setup() {const bool = ref(false)// Parent component to pass to child component value, default is false return {bool // return default value}}} </script>Copy the code

2. Ref (make variable have response formula separately)

import {ref} from 'vue'
const value = ref<boolean>(false)
return {
    value
}

Copy the code

3.v-model

<switch :value='x' @update:value="x=$event"/>
  
<switch v-model:value="y"/>
Copy the code

4.vue-router

CreateRouter import {createRouter, createWebHashHistory} from 'vue-router' in router.ts; CreateWebHashHistory () export const router = createRouter({// createRouter history: history, routes: [ {path: '/', component: Home}, {path: '/doc', component: Doc, children: [/ / embedded routines by {path: "', redirect: '/ Doc/Intro'}, {path: 'type, component: Intro},]}]})Copy the code
Add <router-view>// To tell the app component where to display the component content of the route add <router-link>// jump to the pageCopy the code

5. Provide and inject the switchover function

Import {ref,provide} from 'vue' export default {name: 'App', setup(){ const width = document.documentElement.clientWidth; Const menuVisible = ref(width > 500); Provide ('menuVisible',menuVisible)// Parent component mark}} </script>Copy the code
Import {inject,Ref} from 'vue' setup(){const menuVisible = inject<Ref< Boolean >>('menuVisible')// Inject receive value}Copy the code

6.inheritAttrs:false

Attribute inheritance (inheriting from the root element) : The attributes of the parent component button are inherited directly from the outermost div of the child component’s button, meaning that events you write on the parent component are inherited directly from the outermost div of the child component

[inheritAttrs:false] <script lang="ts"> export default {inheritAttrs:false? [inheritAttrs:false] [inheritAttrs:false <div> <button v-bind = "$attrs"></button> </div>Copy the code
// How to divide inheritance into two parts? Some attributes are inherited from div, </div :size="size"> </div v-bind="rest"></ div>  <script lang="ts"> export default { inheritAttrs:false, setup(props,context){ const {size,... Rest} = context.attrs// get two parts from context.attrs return {size,rest}//return out}} </script>Copy the code

7. Named slot

// Parent component <template v-slot:context> <div> </template> <template v-slot:title> </template>Copy the code
// Subcomponent <slot name="title"/> <main> <slot name="context"/> </main>Copy the code

8.Teleport

(Arbitrary Portal Teleport is a technology that allows us to move our templates to a location in the DOM other than the Vue app)

</div> </Teleport> </div>Copy the code

9.createApp

CreateApp returns an instance of the application using the createApp API, and can continue to call other methods through the chain.

10. How do I verify subcomponent types (defensive programming) by checking the context.slots.default() array

11. UI libraries cannot be scoped, each class must be prefixed, CSS minimum impact principle

12. Some hooks used

OnMounted // Updated watchEffect // watchEffect //Copy the code

13. TypeScript generics

Const indicator = ref<HTMLDivElement>(null) // NullCopy the code

14. API to get width, height and position (el.getBoundingClientRect())

Const {width,height,top,left} = el.getboundingClientRect (Copy the code

15. Renaming syntax for ES6 destructor assignment

const {left:left1} = x.getBoundingClientRect()
const {left:left2} = y.getBoundingClientRect()
Copy the code

16. Introduce Github Markdown

Markdown making address

Yarn add github markdown-css // install import 'github markdown-css' // import in mian. <template> <article class="markdown-body" >// Add class="markdown-body" to <h1> install </h1> <p>  </template>Copy the code

Effect:

17. How to display the source code using vue-loader Custom Blocks

<1>. Add some configuration in the vite. Config. ts file

<2>. Extract the code that the user needs to copy (subcomponent) and write a

tag in the subcomponent, for example (

supports hiding
)

<3>. It is then referenced in the parent component, referred once as a component in components: {}, and returned once as a variable in setup(){}, and used in the parent component’s 

 tag.

Such as: < pre > {{Switch1Demo. __demo}} < / pre >

All the source code in the child component except

is displayed

// @ts-nocheck import {md} from "./plugins/md"; import fs from 'fs' import {baseParse} from '@vue/compiler-core' export default { base:'./', assetsDir:'assets', plugins: [md()], vueCustomBlockTransforms: { demo: // Components with demo tags do the following const {code, path } = options const file = fs.readFileSync(path).toString() const parsed = baseParse(file).children.find(n => n.tag === 'demo') const title = parsed.children[0].content const main = file.split(parsed.loc.source).join('').trim() return 'export default function (Component) {component.__sourcecode = ${// Put all source code of the Component except the <dem> tag inside the Component's __sourceCode (underlined to hide). Json.stringify (main) // source} Component.__sourcecodeTitle = ${json.stringify (title)}} '.trim()}};Copy the code

18. How do I highlight source code using prismJS library and VUE V-HTML

1. Prismjs website

2. I’m using Node.js, so USE the node methods in the documentation

3. Preparation

Yarn add prismjs import 'prismjs' import 'prismjs/themes/prism.css' import 'PRISmjs' import 'prismjs/themes/prism.css' import CSS. CSS = prisms-okaidia.css = prisms-okaidia.css = console.log(window.prism) Const Prism = (window as any).Prism // Setup () {return Prism}Copy the code
  1. See how the document is used

<pre class="language-html" V-html =" prism.highlight (props.component.__sourcecode, prism.languages.html, 'HTML '" /> //class="language-html" is the background of the codeCopy the code

An aside:

import prismjs from ‘prismjs’; This import method will report an error (there is no default export) because the library is older and does not support this import method. Node_modules < prismjs < package.json < “main” < prism.js < prism.js < prism.js < Search for export and find that there is no export, only node.js module declaration method. Further down you see “global.prism = Prism”, the global variable. Got it! Global means window. Import import ‘prismjs’

19. Some web links used

A url that borrows from the Web layout

Adjust gradients to generate CSS code

Fonts.css — Cross-platform Chinese font solution