Learning process record

Wbs99.github. IO /good-ui-web…
Source link: github.com/wbs99/Good-…

Use Vite to build official website

Create a project

Use the following command to install globallycreate-vite-app

Yarn Global add [email protected] cva good9-gulu-ui // Create a project directory CD good9-gulu-ui yarn yarn devCopy the code

This is equivalent to the command given in the Vite documentation

Yarn Create viet-app Project nameCopy the code

Initialize the project

The currently known differences between Vue3 and Vue2

Vue3 is createApp(), which accepts components
Vue2 is new Vue(), which accepts objects
Vue3’s template supports multiple root tags
Vue2 does not support

Install the vue – the router

Vue Router 4 is introduced to switch pages
View all version numbers of vue-router

npm info vue-router versions
Copy the code

Use the latest vue-router version

Yarn add [email protected]Copy the code

Initialize the vue – the router

Creating a History ObjectcreateWebHashHistory()
Creating a Router ObjectcreateRouter({})
app.use(router)
Add the router – the view
Add the router – the link

//main.ts
import {createWebHashHistory,createRouter} from 'vue-router'
import Good from './components/Wbs.vue'

const history = createWebHashHistory()
const router = createRouter({
  history:history,
  routes:[
    {path:'/',component:Good}
  ]
})

const app = createApp(App);
app.use(router)          
app.mount('#app');
Copy the code

Add router-view and router-link to the template of app. vue

/ / App. Vue < template > < div > navigation bar | < the router - link to = "/" > good < / router - the link > | < the router - link to = "/ XXX" > good9 < / router - the link > </div> <hr> <router-view/> </template>Copy the code

Change main.js to main.ts to do type checking
The three CREATE routes correspond to the memory route, Hash route, and History route respectively

Provide and Inject the switchover function

Add router-link to aside

Easy to switch between component documents

Click on LOGO to switch aside

Click show once, click hide again

Using asideVisible istrueorfalseTo show and hide
App. The asideVisible vueprovideGive Topnav. Vue and doc. Vue
Topnav. Vue and doc. Vueinject asideVisible
Doc. Vue asidev-if='asideVisible'

//App.vue <script> import {provide, ref} from 'vue' export default { name: 'App', setup(){const asideVisible= ref(false) provide(' XXX ',asideVisible)}Copy the code

//Doc.vue
<aside v-if="asideVisible">
.......
</aside>
-------------------------------------------------------------
  setup() {
    const asideVisible = inject('asideVisible')
    return { asideVisible }
  }
Copy the code

//Topnav.vue <script lang="ts"> import { inject, Ref } from "vue" export default { setup() { const asideVisible = inject<Ref<boolean>>('asideVisible') const toggleMenu =  () => { asideVisible.value = ! asideVisible.value } return { toggleMenu } } } </script>Copy the code

Transform the Top nav

Add a toggle icon and click show to hide aside
PC side always display aside, mobile phone can show or hide aside
Check in app.vue and let ref default to true when screen width >500px

//App.vue setup() { const width = document.documentElement.clientWidth; Const asideVisible = ref(width <= 500? false : true); provide('asideVisible', asideVisible); }Copy the code

Switching between routes

Click the component to display the corresponding document.
Aside (for mobile phones, not PCS)
router.afterEach(()=>{})Can be implemented when the route switch to execute the function

router.afterEach(()=>{
  if(width<=500){
    asideVisible.value=false
  }
})
Copy the code

Making Switch components

How to use the Switch component

<Switch value="true"/> Value is the string "true" <Switch value="false"/> Value is the string "false" <Switch :value=" true"/> value Boolean true <Switch :value=" false "/> value Is Boolean falseCopy the code

If value is the string “true” or a Boolean value true, the value is on. Otherwise, it is off

Dynamically bind class, default is false, class=’active’,

<template>
  <button @click="toggle" :class="{active}"><span></span></button>
</template>

<script lang='ts'>
import {ref} from 'vue';

export default {
  setup() {
    const active = ref(false);
    const toggle = () => {
      active.value = !active.value;
    };
    return {active, toggle};
  }
};
</script>
Copy the code

Move the white circle to the right via calc

button.active > span {
  left: calc(100% - 20px);
}
Copy the code

Optimize slide animation with Transtion

transition: left 250ms
Copy the code

The same effect is achieved through parent-child component communication

You can use props to communicate between parent and child components
The parent component passes in value as true, thenclass='active'And vice versa
throughcontext.emit()Modify the props
$eventThe value isemitThe second argument to
Context.emit (Event name, event parameters)The event name can be changed instead of input

// Parent switchDemo. vue <template> <div> <Switch :value="y" @input="y=$event"/> </div> </template> <script lang='ts'> import Switch from '.. /lib/Switch.vue'; import {ref} from 'vue'; export default { components: {Switch}, setup() { const y = ref(true); return {y}; }};Copy the code

Vue <template> < button@click ="toggle" :class="{active:value}"> <span></span> </button> <div>{{value }}</div> </template> <script lang='ts'> export default { props: { value: Boolean }, setup(props, context) { const toggle = () => { context.emit('input', ! props.value); // Toggle inverts the current value and passes the input event to the parent component}; return {toggle}; }};Copy the code

The code above can be changed to V-Model

Vue3 的 v-model

requirements

The property name is arbitrary, let’s say x
The event name must be"update:x"

context.emit('input', ! props.value); Context. Emit ('update:value',! props.value);Copy the code

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

Making a Switch summary

Declare a function, return the function, which is equivalent to methods
Add transition animations using CSS Transition
Use ref to create internal data
use:value 和 @update:valueLet parent and child components communicate (component communication)
use$event
usev-model

The difference between Vue2 and Vue3

newv-modelSubstitute forv-model 和 .sync
newcontext.emit, andthis.$emitThe same effect
Setup (){} must be usedcontext.emit
It is basically used in Vue3context.emit()

Making button components

demand

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

Vue3 attribute binding rules

All attributes passed from the default parent component to the child component are bound to the root element
If the child component button.vue has a div outside the Button
Clicking on the div area (the red area above) will also printhello
So you just want to click the button to print it outhelloSo how do we do that?

So div doesn’t inherit attributes,inheritAttrs: false

useinheritAttrs: falseYou can unbind the default, and the event is not bound to any element

Bind the event to the child component’s button,v-bind:$attrs

use$attrsorcontext.attrsContains all properties written in the component

Batch binding properties

The parent component passes multiple properties to the child component
The child component can optionally bind some to A
The rest,. restThe remaining operator) is bound to B
const {size, level, ... rest} = context.attrsSeparating properties
v-bind = 'rest'Bind all remaining properties

//Button.vue <template> <div :size='size'> <button v-bind="rest"> <slot/> </button> </div> </template> <script Lang ="ts"> export default {inheritAttrs: false, // cancel the default setup(props, context) {const {size,onMouseOver... rest } = context.attrs return { size, rest } } } </script>Copy the code

Button Base Style

</Button> <Button theme=" Button "> </Button> <Button theme="text"> </Button> <Button theme="link"> Hello </Button> </template>Copy the code

The first Button in the code above does not pass theme, undefined
When declaring the theme type, you can declare default to be button

//Button.vue <template> <button class="gulu-button" :class="`theme-${theme}`"> <slot/> </button> </template> <script Lang ='ts'> export default {props: {theme: {type: String, default: 'button' // Default is button, undefined}}};Copy the code

The modification is as follows

UI library CSS considerations

Scoped cannot be used

Using scoped there is data-v-xxx, XXX may be different each time it is run
You must output a stable class selector that is easy to override

Must prefix

Button is easily overridden by the user
You can use. Good-button which is not easy to overwrite
Theme-link can easily be overridden by users
You can use. Good-theme-link which is not easily overridden

Minimum impact principle of CSS

CSS must not influence library users
Index.scss uses a number of global selectors
Main.js references the index.scss and does not affect the user
But our style in index. SCSS is our default style
If someone references a component like a Switch Button
We can’t know if the person referenced has set it upmargin:0 padding:0 box-sizing:border-box 呢
So you need to add these properties to components like the Switch Button

Create a new good.scss in the lib directory

^Said the class togood-At the beginning of
*Indicates that class contains Spacesgood-

For example, this does not satisfy good-

<div calss='xxx good-button'
Copy the code

/ / good. SCSS [class ^ = 'good -'], [class * = 'good -'] {/ / pay attention to the space margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; }Copy the code

Let button support size property

The value of size is big, normal, and small
The default is normal

Do this by calculating the properties

//Button.vue <template> <button class="good-button" :class="classes"> <slot/> </button> </template> <script lang='ts'> import {computed} from 'vue'; export default { props: { theme: { type: String, default: 'button' }, size: { type: String, default: 'normal' }, }, setup(props) { const {theme, size} = props; const classes = computed(() => { return { [`good-theme-${theme}`]: theme, [`good-size-${size}`]: size, }; }); return {classes}; }};Copy the code

Support level

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

Disabled Disabled

The value of disabled is true or false

< button disabled > ☑ < button: disabled = "true" > ☑ -- -- -- -- -- -- -- -- the following two is wrong -- -- -- -- -- -- -- -- -- -- - < button disabled = "true" > ❎ < button Disabled = "false" > ❎Copy the code

Support for loading

<template> <button class="good-button" :class="classes" :disabled="disabled"> <span v-if="loading" Class =" good-loadingindicator "></span> </button> </template>Copy the code

Make the Dialog Dialog box component

demand

Click and pop up
A mask layeroverlay
There’s a close button
Have a title
There are content
There are confirm/cancel buttons

How to use the Dialog component

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

Click show dialog box to display the dialog box

By default, the dialog box is not displayed. Click the “Show dialog” button to appear the dialog box

Original and previous click show hide aside same
The parent component defines a variable x
Parent component passes one to child componentvisible='x'
The child component receives Visible with props, declaring the type and default values
Wrap a div around the content (the red div in the image below) withv-if='isible'To hide and show

</Button> <Dialog :visible="x"></Dialog> </template> export </Button> </Dialog> </template> export default { components: { Button, Dialog }, setup() { const x = ref(false); const toggle =() =>{ x.value=! x.value } return {x,toggle}; }};Copy the code

Vue export default {props: {visible: {type: Boolean, default: false}}, components: {Button}}; // Subcomponent dialog. vue export default {props: {visible: {type: Boolean, default: false}}, components: {Button}};Copy the code

Realize the dialog box to close the function

Click on theGrey area (mask layer).X ，cancel.determineCan be closed

doxandcancelThe closing of the

Props props props props props props props props props props props
Dialog closing is controlled by Visible, which is passed in by the parent component
Child components cannot modify this props
Still throughcontext.emit('update:visible')To implement the

<template>
  <span @click="close" class="good-dialog-close"></span>
</template>
Copy the code

<script lang="ts"> import Button from './Button.vue'; export default { props: { visible: { type: Boolean, default: false } }, components: {Button}, setup(props, context) { const close = () => { context.emit('update:visible', false); / /}; return {close}; }}; </script>Copy the code

The parent component listens for this event and succeeds

<template> <Dialog :visible="x" @update:visible="x=$event"></Dialog v-model:visible="x"></Dialog> </template>Copy the code

Click on the mask layer to close it

Add to the div where the mask layer is located@click='close'Can be realized

<div @click="close" class="good-dialog-overlay">Dialog</div>
Copy the code

Clicking on the mask layer always closes the dialog box
CloseOnClickOverlay is passed in by the parent component to enable click on whether the mask layer is closed
The principle is the same as the visible implementation of show hide

<div @click="closeOnClickOverlay" class="good-dialog-overlay"> dialog </div> ----------------------------------------------------------------------------- export default { props: { visible: { type: Boolean, default: false }, closeOnClickOverlay: { type: Boolean, default: true } }, components: {Button}, setup(props, context) { const close = () => { context.emit('update:visible', false); }; const closeOnClickOverlay = () => { if (props.closeOnClickOverlay) { close(); }}; return {close, closeOnClickOverlay}; }};Copy the code

The parent component controls whether the default click overlay is closed by closeOnClickOverlay True or false

</ / Parent <template> <Dialog V-model :visible="x" :closeOnClickOverlay="false"></Dialog> </template>Copy the code

Click on theconfirmA requirement for closing a dialog box is that the user cannot close the dialog box without input

This will not work because emit does not return a value

const ok =()=>{
  const result = context.emit('ok')
  if(result){
    close()
  }
}
Copy the code

So you have to use the function

The parent component: ok = ‘f1’

<template>
  <Dialog v-model:visible="x" :closeOnClickOverlay="false"
          :ok="f1"></Dialog>
</template>
-------------------------------------------------------
setup() {
  const f1 = () => {
    return false;
  };
  return {f1};
}

Copy the code

The props of the child component accepts OK to close the ok dialog

const ok =()=>{ if(props.ok&&props.ok()! ==false){ close() } }Copy the code

Implement dialog box to customize the title and content

Use named slots<slot name='xxx'/>, can be realizedboldThe function such as
The content of the<template v-slot:xxx>

//Dialog.vue
<header>
  <slot name='title'/>
</header>
<main>
  <slot name='content'/>
</main>
Copy the code

Be sure to wrap the content in template when passing it

Vue <template> <Button @click="toggle"> </Button> <Dialog V-model :visible="x" :closeOnClickOverlay="false" : OK ="f1" > <template V-slot :title> <strong> title </strong> </template> <template V-slot :content> <strong> bold </strong> <div> Normal </div> </template> </Dialog> </template>Copy the code

The effect is shown below.

Use Teleport

Because there is a cascading context
So the dialog box might be covered,
use<Teleport to='body'>The contents wrapped by Teleport will go to the body

One sentence opens the dialog box

Function opens the dialog box

< Button @ click = "showDialog" > word open dialog < / Button > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- const ShowDialog () = = > {openDialog ({title: 'title, content:' hello wow '})}Copy the code

Implementation method:

Create opendialog.ts in lib
If this dialog is inserted into the body, the previous content in the body disappears
So you need to create a temporary div
Mount the Dialog into a temporary div
Since visible is set to false by default, changing it to true is just a band-aid
You need to use an H function to render the Dialog with H
The closing in this case simply causes the Dialog to destroy

//openDialog.ts import Dialog from './Dialog.vue'; import {createApp, h} from 'vue'; export const openDialog = (options) => { const {title, content, ok, close} = options; const div = document.createElement('div'); document.body.appendChild(div); const app = createApp({ render() { return h( Dialog, { visible: true, 'onUpdate:visible': (newVisible) => { if (newVisible === false) { //@ts-ignore app.unmount(div); div.remove(); } }, ok, close }, {title, content}); }}); app.mount(div); };Copy the code

This method opens and closes the dialog box with an extra div, so you need to remove that div as well

Make Tabs

There are two ways to write the Tabs component

Navigation < Tabs > < Tab title = "1" > 1 < Tab > content < Tab title = "navigation 2" > < Component1 / > < Tab > < Tab title = "navigation 3" > < Component1 x = "hi" / > < Tab > </Tabs>Copy the code

<Tabs :data="[{title:' Tabs ',content: 'Tabs '}, {title:' Tabs ',content:' Component1 '}, {title:' Tabs ',content: Component1}, {title:' Tabs ',content: h(Component1,{x:'hi'})}, ]"/>Copy the code

How do I confirm the types of child components at run time

You must make sure that Tabs are Tabs, not divs

<template> <Tabs> <div title=" Navigation 1"> Content 1</div> <Tab title=" navigation 2"> Content 2</Tab> </Tabs> </template>Copy the code

I wrote navigation 1, content 1, navigation 2, content 2
Only the Tabs component is displayed, not the Tab component

In the Tabs componentconsole.log({... context})You get the following

console.log({... context.slots})

console.log({... context.slots.default()})
You get something that looks like an array, default is actually an array here

0 and 1 are really just two tabs

console.log({ … Context.slot.default ()[0]}), resulting in a virtual node, also known as a VNode

Console. log(defaults[0]. Type === Tab) returns true, indicating that type is Tab

setup(props, context) { const defaults = context.slots.default(); console.log(defaults[0].type === Tab); }};Copy the code

Each tab.vue is eventually exported as an object
With that in mind, you’re ready to type check
If the label inside Tabs is not a Tab, the console will report an error

Tabs.vue export default { setup(props, context) { const defaults = context.slots.default(); defaults.forEach((tag) => { if (tag.type ! == Tab) {throw new Error('Tabs must be Tab'); }}); return { defaults }; }};Copy the code

Render nested slots

The tabs. vue component needs to be checked for type
Implement slots with Component

//Tabs.vue
<template>
  <div>
    <component v-for="c in defaults" :is="c"/>
  </div>
</template>
Copy the code

Use slot slots for tab. vue components
Because you don’t need to do type checking

//Tab.vue
<template>
  <div>
    <slot/>
  </div>
</template>
Copy the code

The title needs to be rendered above the content
Each title is obtained by map and V-for

<template> <div> <div v-for="title in titles" :key="title">{{title}}</div> <component v-for="(c,index) in defaults" :is="c" :key="index"/> </div> </template> <script lang='ts'> import Tab from './Tab.vue'; export default { setup(props, context) { const defaults = context.slots.default(); defaults.forEach((tag) => { if (tag.type ! == Tab) {throw new Error('Tabs must be Tab'); }}); const titles = defaults.map((tag) => { return tag.props.title; }); return { defaults, titles }; }};Copy the code

Displays the selected navigation

//Tabs.vue
<div class="good-tabs-nav-item"
     :class="{selected:title===selected}"
  {{ title }}
</div>
Copy the code

Implement navigation switch

Make sure you put a key here

<div class="good-tabs-content"> <component class="good-tabs-content-item" :is="current" :key='current.props.title'/> </div> ---------------------------------------------- setup(){ const current = defaults.filter((tag) => { return tag.props.title === props.selected; }) [0]; return{ current } }Copy the code

After the navigation switch is implemented, it is found that the content 1 is still displayed when you switch to navigation 2

why

When I click on the navigation, the selected changes,
But setup is executed only once when the page is mounted
So current will not be updated
So current should not be a normal property
It should be a calculationCalculate attribute
So the current part changes as follows

const current = computed(() => { return defaults.filter((tag) => { return tag.props.title === props.selected; }) [0]; });Copy the code

Make lines that move

Dynamically set the width of the div

To obtainNavigation 1The width of the
Navigation 1 is v-for, so it needs to be referenced in an array
OnMounted and log show that navKitems. value is all title divs
onMounted({console.log({... navItems.value})})
Find the div whose class is selected among all divs
Get the width of the div and assign that width to indicator

Const navItems = ref<HTMLDivElement[]>([]); const navItems = ref<HTMLDivElement[]>([]); const navItems = ref<HTMLDivElement[]>([]); const indicator = ref<HTMLDivElement>(null); onMounted(() => { const divs = navItems.value; const result = divs.filter(div => div.classList.contains('selected'))[0]; const {width} = result.getBoundingClientRect(); indicator.value.style.width = width + 'px'; });Copy the code

Dynamically set indicator position

Click on heading 1 and a line appears below heading 1
Click on heading 2 and a line appears below heading 2
Get the left of the container
Gets the left of the current heading div
divLeft-containerLeft
Add the left above to the Indicator
Updated (){} onMounted(){

const containerLeft = container.value.getBoundingClientRect().left;
const divLeft = result.getBoundingClientRect().left;
const left = divLeft - containerLeft;
indicator.value.style.left = left + 'px';
Copy the code

Add the animation of the line below when clicking title 1 and 2 to switch
Just add indicator in CSStransition:left 1sCan be

Code optimization

Optimization 1: Kill navItems and use selectedItem to indicate the selected navigation. 1 navigation 2 If title is selected, selectedItem is the current element

:ref="el => { if (title===selected) selectedItem= el }"
Copy the code

Official website decoration – home page

Add an icon or logo

Search for your favorite icon, add it to your shopping cart, and add it to the project

Copy the JS code and add it to the head of index.html

<script src="//at.alicdn.com/t/font_2745469_w3dsew5ek4k.js"></script>
Copy the code

Click use Help to find the Symbol reference

The following attributes can be removed without affecting the use of SVG. You can directly adjust the width and height of SVG in CSS

Use clip-path to draw an arc

For example,

clip-path: ellipse(80% 60% at 50% 40%);
Copy the code

Decoration document page

Router-lick-active or router-lick-exact-active can be used to highlight the current route in the CSS

Router-link In li, router-link is filled with Li
Router-link is also the equivalent of an A tag
Adjust the position as required

> ol { > li { > a { display: block; } .router-link-active { background: white; }}}Copy the code

Introducing Github’s Markdown style

The installation

yarn add github-markdown-css

For details, see Commit

import 'github-markdown-css'
Copy the code

Add class=’markdown-body’ to the container to be used

Import markdown files directly

You need your own Vite plugin

Create the plugins directory and create mD. ts in the directory. For details, see Commit

Yarn add --dev marked or NPM i-d markedCopy the code

Create vite.config.ts in the root directory. For details, see Commit
Be sure to reyarn dev
Create a new markdown directory, create a.md file under it, and you can start using it

Optimizing duplicate code

Intro. Vue | Start. Vue | the vue component only import path is different, other are the same, to find a way to dynamic reference path, see the specific code optimization markdown commit

Show the source code

Use Custom Blocks of vue-loader

Highlight source code

Use PrismJS and V-HTML

yarn add prismjs
Introduced in components where the source code needs to be displayed

import 'prismjs';
import 'prismjs/themes/prism.css';
Copy the code

Change the corresponding part of the template to the following form

<div class="demo-code">
  <pre class="language-html" v-html="Prism.highlight(Switch2Demo.__sourceCode, Prism.languages.html, 'html')" />
</div>
Copy the code

Post website

Yarn Build Set the build path

If you have dist, delete it, not just ignore it
Add dist to.ignore if you already have the ignore step
yarn build
npm i -g http-server
Hs Dist – C-1 preview the web page and confirm that the web page can be opened normally

Now is the normal deployment

CD dist Go to the dist directory
git init
git add .
git commit -m ‘first commit’
Execute the code provided by the Github repository in turn

Github Pages in the repository

Page 404 found, error reported as follows

If you add the repository address, you can open it. You can’t open it because of _assets

Solution Set the build path

Add the following code to viet.config. ts

base:'./',
assetsDir:'assets',
Copy the code

cd .. (Because you cannot do YARN Build in the dist directory) you must go back to the project directory YARN Build
yarn build
cd dist
git init
git add .
git commit -m ‘first commit’
git branch -M master
Git remote add origin Git remote add origin
git push -f -u origin master

Show or hide code

Rollup -c compiles the library file

Create lib/index.ts and export everything you need to export
The rootCreate rollup.config.js in rollup directory (tell rollup how to package)
yarn global add rollup
runrollup -cRollup is installed globally
yarn add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser

Publish the dist/lib directory

In fact, it is uploaded to the NPM server

Add files and main to package.json
First determine the current is the official source or Taobao source, must ensure that the official source, rather than Taobao source
NPM config get registry gets the official source as shown below
If it is taobao source, run this line firstnpm config set registry https://registry.npmjs.org/
npm publishAn error,
npmjs.com
In the endnpm login

Some caveats

name
The name of the package must be lowercase and can be concatenated with – or _. The name of the package must not be the same as an existing name on NPM
version
The version of each publish cannot be the same as that of the last one, so from the second time, you must change version before publishing

Simulate others using their own components

A key deployment

Write the deployment command in deploy.sh
And then the terminal runssh deploy.shYou can execute all the commands written by the file
&&Ensure that the previous sentence is successfully executed before the next sentence can be executed
Add the url of the first deployment to the end, so that the url link will appear on the terminal every time you update it, and you don’t need to open it in Github
There will be a delay in page changes, so be patient and see the changes

rm -rf dist &&
yarn build &&
cd dist &&
git init &&
git add . &&
git commit -m 'update' &&
git branch -M master
git remote add origin [email protected]:wbs99/good-ui-website.git
git push -f -u origin master &&
cd ..
echo https://wbs99.github.io/good-ui-website/index.html#/
Copy the code

Some error

Module not found`XXX.vue`

A reason for
TypeScript only understands.ts files, not.vue files
Solution 1
Vue 3 can not find module
Create xxx.d. TS and tell TS what to make of the.vue file
Solution 2
projectThe root directoryUnder the new tsconfig. Ts

 {
     "compilerOptions": {
         "target": "esnext",
         "module": "esnext",
         "strict": false,
         "jsx": "preserve",
         "moduleResolution": "node"
     }
 }
Copy the code

cannot find module ‘sass’ from …

Install SASS on the terminal

Yarn add sass // Or yarn add -d sassCopy the code

The following error occurs after sASS installation

Add “Sass” to “devDependencies”yarn stall

Vue3 Building wheels — Learning records