feat: 搭建UI组件库
1. 完成展示example 2. 按需加载 3. 导入导出 未来: 1. 更多组件 2. 暗黑模式 3. 配置文件
This commit is contained in:
commit
49de4589bd
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
18
.npmignore
Normal file
18
.npmignore
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.vscode
|
||||||
|
.github
|
||||||
|
docs
|
||||||
|
public
|
||||||
|
src
|
||||||
|
.gitignore
|
||||||
|
.npmrc
|
||||||
|
.editorconfig
|
||||||
|
.eslintrc
|
||||||
|
.prettierrc
|
||||||
|
*.log
|
||||||
|
*.test.ts
|
||||||
|
*.spec.ts
|
||||||
|
tsconfig.json
|
||||||
|
tsconfig.build.json
|
||||||
|
tsconfig.node.json
|
||||||
|
vite.config.ts
|
||||||
|
vitest.config.ts
|
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
5
README.md
Normal file
5
README.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# Vue 3 + TypeScript + Vite
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||||
|
|
||||||
|
Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
|
12
example/index.html
Normal file
12
example/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>组件库示例</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
1173
example/package-lock.json
generated
Normal file
1173
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
23
example/package.json
Normal file
23
example/package.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"name": "example",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"description": "",
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.3.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"typescript": "~5.0.4",
|
||||||
|
"vite": "^4.4.9",
|
||||||
|
"vue-tsc": "^1.8.8"
|
||||||
|
}
|
||||||
|
}
|
41
example/src/App.vue
Normal file
41
example/src/App.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { NiButton } from 'ni'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>组件库示例</h1>
|
||||||
|
|
||||||
|
<section class="demo-section">
|
||||||
|
<h2>按钮组件</h2>
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton>默认按钮</NiButton>
|
||||||
|
<NiButton type="primary">主要按钮</NiButton>
|
||||||
|
<NiButton type="success">成功按钮</NiButton>
|
||||||
|
<NiButton type="warning">警告按钮</NiButton>
|
||||||
|
<NiButton type="danger">危险按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton size="small">小型按钮</NiButton>
|
||||||
|
<NiButton>默认大小</NiButton>
|
||||||
|
<NiButton size="large">大型按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton disabled>禁用按钮</NiButton>
|
||||||
|
<NiButton type="primary" disabled>禁用主要按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#app {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-align: center;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
8
example/src/main.ts
Normal file
8
example/src/main.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
// import Ni from 'ni'
|
||||||
|
import '../../dist/ni.css'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
// app.use(Ni)
|
||||||
|
app.mount('#app')
|
12
example/vite.config.ts
Normal file
12
example/vite.config.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'ni': resolve(__dirname, '../dist/ni.es.js')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + Vue + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
6699
package-lock.json
generated
Normal file
6699
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
69
package.json
Normal file
69
package.json
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
{
|
||||||
|
"name": "ni",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"files": [
|
||||||
|
"dist",
|
||||||
|
"types"
|
||||||
|
],
|
||||||
|
"main": "./dist/ni.umd.js",
|
||||||
|
"module": "./dist/ni.es.js",
|
||||||
|
"types": "./types/index.d.ts",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"types": "./types/index.d.ts",
|
||||||
|
"import": "./dist/ni.es.js",
|
||||||
|
"require": "./dist/ni.umd.js"
|
||||||
|
},
|
||||||
|
"./button": {
|
||||||
|
"types": "./types/components/button/index.d.ts",
|
||||||
|
"import": "./dist/ni-button.es.js",
|
||||||
|
"require": "./dist/ni-button.umd.js"
|
||||||
|
},
|
||||||
|
"./dist/style.css": "./dist/ni.css"
|
||||||
|
},
|
||||||
|
"sideEffects": [
|
||||||
|
"**/*.css",
|
||||||
|
"**/*.scss"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc && vite build",
|
||||||
|
"build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.build.json",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"docs:dev": "vitepress dev docs",
|
||||||
|
"docs:build": "vitepress build docs",
|
||||||
|
"docs:preview": "vitepress preview docs",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:coverage": "vitest run --coverage",
|
||||||
|
"test:ui": "vitest --ui",
|
||||||
|
"prepublishOnly": "npm run build:lib"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.3.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"@vue/tsconfig": "^0.4.0",
|
||||||
|
"typescript": "~5.0.4",
|
||||||
|
"vite": "^4.4.9",
|
||||||
|
"vue-tsc": "^1.8.8",
|
||||||
|
"sass": "^1.66.1",
|
||||||
|
"vitepress": "^1.0.0-rc.44",
|
||||||
|
"@types/node": "^20.5.9",
|
||||||
|
"unplugin-vue-components": "^0.25.2",
|
||||||
|
"unplugin-auto-import": "^0.16.7",
|
||||||
|
"@vue/test-utils": "^2.4.3",
|
||||||
|
"vitest": "^0.34.6",
|
||||||
|
"@vitest/coverage-v8": "^0.34.6",
|
||||||
|
"@vitest/ui": "^0.34.6",
|
||||||
|
"jsdom": "^22.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.0.0"
|
||||||
|
},
|
||||||
|
"publishConfig": {
|
||||||
|
"access": "public"
|
||||||
|
}
|
||||||
|
}
|
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
After Width: | Height: | Size: 1.5 KiB |
60
src/App.vue
Normal file
60
src/App.vue
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { NiButton } from './components/button/index'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Ni UI 组件库示例</h1>
|
||||||
|
|
||||||
|
<section class="demo-section">
|
||||||
|
<h2>按钮组件</h2>
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton>默认按钮</NiButton>
|
||||||
|
<NiButton type="primary">主要按钮</NiButton>
|
||||||
|
<NiButton type="success">成功按钮</NiButton>
|
||||||
|
<NiButton type="warning">警告按钮</NiButton>
|
||||||
|
<NiButton type="danger">危险按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton size="small">小型按钮</NiButton>
|
||||||
|
<NiButton>默认大小</NiButton>
|
||||||
|
<NiButton size="large">大型按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="demo-row">
|
||||||
|
<NiButton disabled>禁用按钮</NiButton>
|
||||||
|
<NiButton type="primary" disabled>禁用主要按钮</NiButton>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-section {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-row {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
After Width: | Height: | Size: 496 B |
234
src/components/button/Button.vue
Normal file
234
src/components/button/Button.vue
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
:class="[
|
||||||
|
'ni-button',
|
||||||
|
`ni-button--${type}`,
|
||||||
|
`ni-button--${size}`,
|
||||||
|
{
|
||||||
|
'is-plain': plain,
|
||||||
|
'is-round': round,
|
||||||
|
'is-circle': circle,
|
||||||
|
'is-disabled': disabled,
|
||||||
|
'is-loading': loading
|
||||||
|
}
|
||||||
|
]"
|
||||||
|
:disabled="disabled || loading"
|
||||||
|
@click="handleClick"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
plain: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
round: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
circle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'click', evt: MouseEvent): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const handleClick = (evt: MouseEvent) => {
|
||||||
|
emit('click', evt)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ni-button {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 1;
|
||||||
|
height: 32px;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #606266;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
outline: none;
|
||||||
|
transition: .1s;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 8px 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
background-color: #ffffff;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #409eff;
|
||||||
|
border-color: #c6e2ff;
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--primary {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #66b1ff;
|
||||||
|
border-color: #66b1ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--success {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #67c23a;
|
||||||
|
border-color: #67c23a;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #85ce61;
|
||||||
|
border-color: #85ce61;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--warning {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #e6a23c;
|
||||||
|
border-color: #e6a23c;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #ebb563;
|
||||||
|
border-color: #ebb563;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--danger {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f56c6c;
|
||||||
|
border-color: #f56c6c;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #f78989;
|
||||||
|
border-color: #f78989;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--small {
|
||||||
|
height: 24px;
|
||||||
|
padding: 5px 11px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
height: 40px;
|
||||||
|
padding: 12px 19px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-plain {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #dcdfe6;
|
||||||
|
color: #606266;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #fff;
|
||||||
|
border-color: #409eff;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ni-button--primary {
|
||||||
|
color: #409eff;
|
||||||
|
background: #ecf5ff;
|
||||||
|
border-color: #b3d8ff;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #fff;
|
||||||
|
background: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ni-button--success {
|
||||||
|
color: #67c23a;
|
||||||
|
background: #f0f9eb;
|
||||||
|
border-color: #c2e7b0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #fff;
|
||||||
|
background: #67c23a;
|
||||||
|
border-color: #67c23a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ni-button--warning {
|
||||||
|
color: #e6a23c;
|
||||||
|
background: #fdf6ec;
|
||||||
|
border-color: #f5dab1;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #fff;
|
||||||
|
background: #e6a23c;
|
||||||
|
border-color: #e6a23c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ni-button--danger {
|
||||||
|
color: #f56c6c;
|
||||||
|
background: #fef0f0;
|
||||||
|
border-color: #fbc4c4;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: #fff;
|
||||||
|
background: #f56c6c;
|
||||||
|
border-color: #f56c6c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-round {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
58
src/components/button/__tests__/Button.test.ts
Normal file
58
src/components/button/__tests__/Button.test.ts
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
import { describe, it, expect } from 'vitest'
|
||||||
|
import { mount } from '@vue/test-utils'
|
||||||
|
import Button from '../Button.vue'
|
||||||
|
|
||||||
|
describe('Button.vue', () => {
|
||||||
|
it('renders slot content', () => {
|
||||||
|
const wrapper = mount(Button, {
|
||||||
|
slots: {
|
||||||
|
default: '按钮文本'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.text()).toBe('按钮文本')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies type class', () => {
|
||||||
|
const wrapper = mount(Button, {
|
||||||
|
props: {
|
||||||
|
type: 'primary'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.classes()).toContain('ni-button--primary')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies size class', () => {
|
||||||
|
const wrapper = mount(Button, {
|
||||||
|
props: {
|
||||||
|
size: 'small'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.classes()).toContain('ni-button--small')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies disabled class and attribute', () => {
|
||||||
|
const wrapper = mount(Button, {
|
||||||
|
props: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect(wrapper.classes()).toContain('is-disabled')
|
||||||
|
expect(wrapper.attributes('disabled')).toBeDefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('emits click event when clicked', async () => {
|
||||||
|
const wrapper = mount(Button)
|
||||||
|
await wrapper.trigger('click')
|
||||||
|
expect(wrapper.emitted('click')).toBeTruthy()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not emit click event when disabled', async () => {
|
||||||
|
const wrapper = mount(Button, {
|
||||||
|
props: {
|
||||||
|
disabled: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
await wrapper.trigger('click')
|
||||||
|
expect(wrapper.emitted('click')).toBeFalsy()
|
||||||
|
})
|
||||||
|
})
|
3
src/components/button/index.ts
Normal file
3
src/components/button/index.ts
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import NiButton from './Button.vue'
|
||||||
|
export { NiButton }
|
||||||
|
export default NiButton
|
24
src/components/button/types.ts
Normal file
24
src/components/button/types.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { ExtractPropTypes, PropType } from 'vue'
|
||||||
|
|
||||||
|
export const buttonProps = {
|
||||||
|
type: {
|
||||||
|
type: String as PropType<'default' | 'primary' | 'success' | 'warning' | 'danger'>,
|
||||||
|
default: 'default',
|
||||||
|
validator: (value: string) => {
|
||||||
|
return ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String as PropType<'small' | 'medium' | 'large'>,
|
||||||
|
default: 'medium',
|
||||||
|
validator: (value: string) => {
|
||||||
|
return ['small', 'medium', 'large'].includes(value)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export type ButtonProps = ExtractPropTypes<typeof buttonProps>
|
9
src/components/index.ts
Normal file
9
src/components/index.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import NiButton from './button'
|
||||||
|
|
||||||
|
export {
|
||||||
|
NiButton,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
NiButton,
|
||||||
|
}
|
7
src/env.d.ts
vendored
Normal file
7
src/env.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
21
src/index.ts
Normal file
21
src/index.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { App } from 'vue'
|
||||||
|
import * as components from './components'
|
||||||
|
|
||||||
|
// 导出所有组件
|
||||||
|
export * from './components'
|
||||||
|
|
||||||
|
// 导出组件库版本
|
||||||
|
export const version = '0.0.1'
|
||||||
|
|
||||||
|
// 导出安装方法
|
||||||
|
export const install = (app: App) => {
|
||||||
|
Object.entries(components).forEach(([path, module]: [string, any]) => {
|
||||||
|
app.component(path, module)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认导出
|
||||||
|
export default {
|
||||||
|
version,
|
||||||
|
install
|
||||||
|
}
|
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
79
src/style.css
Normal file
79
src/style.css
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
36
src/types/index.d.ts
vendored
Normal file
36
src/types/index.d.ts
vendored
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { App, Component } from 'vue'
|
||||||
|
|
||||||
|
// 按钮组件属性
|
||||||
|
export interface ButtonProps {
|
||||||
|
type?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
|
||||||
|
size?: 'small' | 'medium' | 'large'
|
||||||
|
disabled?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮组件实例
|
||||||
|
export interface ButtonInstance {
|
||||||
|
$el: HTMLButtonElement
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件库配置选项
|
||||||
|
export interface NiUIOptions {
|
||||||
|
size?: 'small' | 'medium' | 'large'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件库实例
|
||||||
|
export interface NiUI {
|
||||||
|
install: (app: App, options?: NiUIOptions) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件类型声明
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
NiButton: typeof import('../components/button')['Button']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件导出
|
||||||
|
export type { Button } from '../components/button'
|
||||||
|
|
||||||
|
// 组件库导出
|
||||||
|
export * from './components'
|
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
15
tsconfig.app.json
Normal file
15
tsconfig.app.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
12
tsconfig.build.json
Normal file
12
tsconfig.build.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"declaration": true,
|
||||||
|
"emitDeclarationOnly": true,
|
||||||
|
"outDir": "types",
|
||||||
|
"noEmit": false,
|
||||||
|
"types": ["node", "vite/client"]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "src/env.d.ts"],
|
||||||
|
"exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"]
|
||||||
|
}
|
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"types": ["node", "vite/client", "vue"],
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
12
tsconfig.node.json
Normal file
12
tsconfig.node.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"types": ["node"]
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts", "vitest.config.ts"]
|
||||||
|
}
|
1
tsconfig.node.tsbuildinfo
Normal file
1
tsconfig.node.tsbuildinfo
Normal file
File diff suppressed because one or more lines are too long
1
tsconfig.tsbuildinfo
Normal file
1
tsconfig.tsbuildinfo
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"root":["./src/index.ts","./src/main.ts","./src/vite-env.d.ts","./src/components/index.ts","./src/components/button/index.ts","./src/components/button/__tests__/button.test.ts","./src/types/index.d.ts","./src/app.vue","./src/components/button/button.vue"],"version":"5.8.3"}
|
3
types/components/button/index.d.ts
vendored
Normal file
3
types/components/button/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import NiButton from './Button.vue';
|
||||||
|
export { NiButton };
|
||||||
|
export default NiButton;
|
18
types/components/button/types.d.ts
vendored
Normal file
18
types/components/button/types.d.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { ExtractPropTypes, PropType } from 'vue';
|
||||||
|
export declare const buttonProps: {
|
||||||
|
readonly type: {
|
||||||
|
readonly type: PropType<"default" | "primary" | "success" | "warning" | "danger">;
|
||||||
|
readonly default: "default";
|
||||||
|
readonly validator: (value: string) => boolean;
|
||||||
|
};
|
||||||
|
readonly size: {
|
||||||
|
readonly type: PropType<"small" | "medium" | "large">;
|
||||||
|
readonly default: "medium";
|
||||||
|
readonly validator: (value: string) => boolean;
|
||||||
|
};
|
||||||
|
readonly disabled: {
|
||||||
|
readonly type: BooleanConstructor;
|
||||||
|
readonly default: false;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
|
8
types/components/index.d.ts
vendored
Normal file
8
types/components/index.d.ts
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import NiButton from './button';
|
||||||
|
import NiText from './text';
|
||||||
|
export { NiButton, NiText };
|
||||||
|
declare const _default: {
|
||||||
|
NiButton: import("vue").DefineComponent<{}, {}, any>;
|
||||||
|
NiText: import("vue").DefineComponent<{}, {}, any>;
|
||||||
|
};
|
||||||
|
export default _default;
|
3
types/components/text/index.d.ts
vendored
Normal file
3
types/components/text/index.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import NiText from './Text.vue';
|
||||||
|
export { NiText };
|
||||||
|
export default NiText;
|
9
types/index.d.ts
vendored
Normal file
9
types/index.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { App } from 'vue';
|
||||||
|
export * from './components';
|
||||||
|
export declare const version = "0.0.1";
|
||||||
|
export declare const install: (app: App) => void;
|
||||||
|
declare const _default: {
|
||||||
|
version: string;
|
||||||
|
install: (app: App<any>) => void;
|
||||||
|
};
|
||||||
|
export default _default;
|
1
types/main.d.ts
vendored
Normal file
1
types/main.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
import './style.css';
|
2
vite.config.d.ts
vendored
Normal file
2
vite.config.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: import("vite").UserConfig;
|
||||||
|
export default _default;
|
6
vite.config.js
Normal file
6
vite.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
});
|
30
vite.config.ts
Normal file
30
vite.config.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
Components({
|
||||||
|
dirs: ['src/components'],
|
||||||
|
dts: 'src/components.d.ts',
|
||||||
|
resolvers: [
|
||||||
|
(name) => {
|
||||||
|
if (name.startsWith('Ni')) {
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
from: 'ni',
|
||||||
|
sideEffects: 'ni/dist/style.css'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
AutoImport({
|
||||||
|
imports: ['vue'],
|
||||||
|
dts: 'src/auto-imports.d.ts'
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
25
vite.lib.config.ts
Normal file
25
vite.lib.config.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
build: {
|
||||||
|
lib: {
|
||||||
|
entry: resolve(__dirname, 'src/index.ts'),
|
||||||
|
formats: ['es'],
|
||||||
|
fileName: (format) => `ni.${format}.js`
|
||||||
|
},
|
||||||
|
rollupOptions: {
|
||||||
|
external: ['vue'],
|
||||||
|
output: {
|
||||||
|
globals: {
|
||||||
|
vue: 'Vue'
|
||||||
|
},
|
||||||
|
assetFileNames: (assetInfo) => {
|
||||||
|
return assetInfo.name === 'style.css' ? 'ni.css' : assetInfo.name || ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
2
vitest.config.d.ts
vendored
Normal file
2
vitest.config.d.ts
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
declare const _default: import("vite").UserConfig & Promise<import("vite").UserConfig> & (import("vitest/config").UserConfigFnObject & import("vitest/config").UserConfigExport);
|
||||||
|
export default _default;
|
26
vitest.config.js
Normal file
26
vitest.config.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { defineConfig } from 'vitest/config';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
import { resolve } from 'path';
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
globals: true,
|
||||||
|
coverage: {
|
||||||
|
provider: 'v8',
|
||||||
|
reporter: ['text', 'json', 'html'],
|
||||||
|
exclude: [
|
||||||
|
'node_modules/**',
|
||||||
|
'dist/**',
|
||||||
|
'**/*.d.ts',
|
||||||
|
'test/**',
|
||||||
|
'vitest.config.ts',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, './src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
27
vitest.config.ts
Normal file
27
vitest.config.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { defineConfig } from 'vitest/config'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { resolve } from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
test: {
|
||||||
|
environment: 'jsdom',
|
||||||
|
globals: true,
|
||||||
|
coverage: {
|
||||||
|
provider: 'v8',
|
||||||
|
reporter: ['text', 'json', 'html'],
|
||||||
|
exclude: [
|
||||||
|
'node_modules/**',
|
||||||
|
'dist/**',
|
||||||
|
'**/*.d.ts',
|
||||||
|
'test/**',
|
||||||
|
'vitest.config.ts',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': resolve(__dirname, './src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user