This commit is contained in:
commit
1c5168f8a1
|
|
@ -0,0 +1,13 @@
|
|||
.vite-ssg-temp
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# lock
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
||||
*.log
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
// Disable the default formatter, use eslint instead
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
|
||||
// Auto fix
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
|
||||
// Enable eslint for all supported languages
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"json5",
|
||||
"jsonc",
|
||||
"yaml",
|
||||
"toml",
|
||||
"xml",
|
||||
"gql",
|
||||
"graphql",
|
||||
"astro",
|
||||
"css",
|
||||
"less",
|
||||
"scss",
|
||||
"pcss",
|
||||
"postcss"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
# element-plus-vite-starter
|
||||
|
||||
> A starter kit for Element Plus with Vite
|
||||
|
||||
- Preview: <https://vite-starter.element-plus.org>
|
||||
|
||||
This is an example of on-demand element-plus with [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).
|
||||
|
||||
> If you want to import all, it may be so simple that no examples are needed. Just follow [quickstart | Docs](https://element-plus.org/zh-CN/guide/quickstart.html) and import them.
|
||||
|
||||
If you just want an on-demand import example `manually`, you can check [unplugin-element-plus/examples/vite](https://github.com/element-plus/unplugin-element-plus/tree/main/examples/vite).
|
||||
|
||||
If you want to a nuxt starter, see [element-plus-nuxt-starter](https://github.com/element-plus/element-plus-nuxt-starter/).
|
||||
|
||||
## Project setup
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
|
||||
# npm install
|
||||
# yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
git clone https://github.com/element-plus/element-plus-vite-starter
|
||||
cd element-plus-vite-starter
|
||||
npm i
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Custom theme
|
||||
|
||||
See `src/styles/element/index.scss`.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import antfu from '@antfu/eslint-config'
|
||||
|
||||
export default antfu({
|
||||
formatters: true,
|
||||
unocss: true,
|
||||
vue: true,
|
||||
})
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Element Plus Vite Starter</title>
|
||||
<!-- element css cdn, if you use custom theme, remove it. -->
|
||||
<!-- <link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
|
||||
/> -->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "element-plus-vite-starter",
|
||||
"type": "module",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@10.14.0",
|
||||
"license": "MIT",
|
||||
"homepage": "https://vite-starter.element-plus.org",
|
||||
"repository": {
|
||||
"url": "https://github.com/element-plus/element-plus-vite-starter"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"generate": "vite-ssg build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "vue-tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"@vueuse/core": "^13.6.0",
|
||||
"element-plus": "^2.10.5",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^5.1.0",
|
||||
"@iconify-json/ep": "^1.2.2",
|
||||
"@iconify-json/ri": "^1.2.5",
|
||||
"@types/node": "^24.1.0",
|
||||
"@unocss/eslint-plugin": "^66.4.0",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"eslint": "^9.32.0",
|
||||
"eslint-plugin-format": "^1.0.1",
|
||||
"sass": "^1.89.2",
|
||||
"typescript": "^5.9.2",
|
||||
"unocss": "^66.4.0",
|
||||
"unplugin-vue-components": "^28.8.0",
|
||||
"unplugin-vue-router": "^0.14.0",
|
||||
"vite": "^7.0.6",
|
||||
"vite-ssg": "^28.0.0",
|
||||
"vue-tsc": "^3.0.5"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1 @@
|
|||
vite-starter.element-plus.org
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -0,0 +1 @@
|
|||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>
|
||||
|
After Width: | Height: | Size: 995 B |
|
|
@ -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 |
|
|
@ -0,0 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-config-provider namespace="ep">
|
||||
<BaseHeader />
|
||||
<div class="main-container flex">
|
||||
<BaseSide />
|
||||
<div w="full" py="4">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
text-align: center;
|
||||
color: var(--ep-text-color-primary);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(100vh - var(--ep-menu-item-height) - 4px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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: 497 B |
|
|
@ -0,0 +1,30 @@
|
|||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
|
||||
BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
HelloWorld: typeof import('./components/HelloWorld.vue')['default']
|
||||
Logos: typeof import('./components/Logos.vue')['default']
|
||||
MessageBoxDemo: typeof import('./components/MessageBoxDemo.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
const input = ref('element-plus')
|
||||
|
||||
const curDate = ref('')
|
||||
|
||||
function toast() {
|
||||
ElMessage.success('Hello')
|
||||
}
|
||||
|
||||
const value1 = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1 color="$ep-color-primary">
|
||||
{{ msg }}
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
See
|
||||
<a href="https://element-plus.org" target="_blank">element-plus</a> for more
|
||||
information.
|
||||
</p>
|
||||
|
||||
<!-- example components -->
|
||||
<div class="mb-4">
|
||||
<el-button size="large" @click="toast">
|
||||
El Message
|
||||
</el-button>
|
||||
|
||||
<MessageBoxDemo />
|
||||
</div>
|
||||
|
||||
<div class="my-2 flex flex-wrap items-center justify-center text-center">
|
||||
<el-button @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
<el-button type="success" @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
<el-button type="warning" @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
<el-button type="danger" @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
<el-button type="info" @click="count++">
|
||||
count is: {{ count }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-tag type="success" class="m-1">
|
||||
Tag 1
|
||||
</el-tag>
|
||||
<el-tag type="warning" class="m-1">
|
||||
Tag 1
|
||||
</el-tag>
|
||||
<el-tag type="danger" class="m-1">
|
||||
Tag 1
|
||||
</el-tag>
|
||||
<el-tag type="info" class="m-1">
|
||||
Tag 1
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-switch v-model="value1" />
|
||||
<el-switch
|
||||
v-model="value1"
|
||||
class="m-2"
|
||||
style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-2">
|
||||
<el-input v-model="input" class="m-2" style="width: 200px" />
|
||||
<el-date-picker
|
||||
v-model="curDate"
|
||||
class="m-2"
|
||||
type="date"
|
||||
placeholder="Pick a day"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p>For example, we can custom primary color to 'green'.</p>
|
||||
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test components.
|
||||
</p>
|
||||
<p>
|
||||
Edit
|
||||
<code>styles/element/var.scss</code> to test scss variables.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Full Example:
|
||||
<a
|
||||
href="https://github.com/element-plus/element-plus-vite-starter"
|
||||
target="_blank"
|
||||
>element-plus-vite-starter</a>
|
||||
| On demand Example:
|
||||
<a
|
||||
href="https://github.com/element-plus/unplugin-element-plus"
|
||||
target="_blank"
|
||||
>unplugin-element-plus/examples/vite</a>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.ep-button {
|
||||
margin: 4px;
|
||||
}
|
||||
.ep-button + .ep-button {
|
||||
margin-left: 0;
|
||||
margin: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank">
|
||||
<img src="/vite.svg" class="logo" alt="Vite logo">
|
||||
</a>
|
||||
<a href="https://vuejs.org/" target="_blank">
|
||||
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo">
|
||||
</a>
|
||||
<a href="https://element-plus.org/" target="_blank">
|
||||
<img src="/element-plus-logo-small.svg" class="logo element-plus" alt="Element Plus logo">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.vue:hover {
|
||||
filter: drop-shadow(0 0 2em #42b883aa);
|
||||
}
|
||||
.logo.element-plus:hover {
|
||||
filter: drop-shadow(0 0 2em #409effaa);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<script lang="ts" setup>
|
||||
import type { Action } from 'element-plus'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
function open() {
|
||||
ElMessageBox.alert('This is a message', 'Title', {
|
||||
// if you want to disable its autofocus
|
||||
// autofocus: false,
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action: Action) => {
|
||||
ElMessage({
|
||||
type: 'info',
|
||||
message: `action: ${action}`,
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-button plain @click="open">
|
||||
Click to open the Message Box
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<script lang="ts" setup>
|
||||
import { repository } from '~/../package.json'
|
||||
|
||||
import { toggleDark } from '~/composables'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" router>
|
||||
<el-menu-item index="/">
|
||||
<div class="flex items-center justify-center gap-2">
|
||||
<div class="text-xl" i-ep-element-plus />
|
||||
<span>Element Plus</span>
|
||||
</div>
|
||||
</el-menu-item>
|
||||
<el-sub-menu index="2">
|
||||
<template #title>
|
||||
Workspace
|
||||
</template>
|
||||
<el-menu-item index="2-1">
|
||||
item one
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2-2">
|
||||
item two
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2-3">
|
||||
item three
|
||||
</el-menu-item>
|
||||
<el-sub-menu index="2-4">
|
||||
<template #title>
|
||||
item four
|
||||
</template>
|
||||
<el-menu-item index="2-4-1">
|
||||
item one
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2-4-2">
|
||||
item two
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2-4-3">
|
||||
item three
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
<el-menu-item index="3" disabled>
|
||||
Info
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
Orders
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item h="full" @click="toggleDark()">
|
||||
<button
|
||||
class="w-full cursor-pointer border-none bg-transparent"
|
||||
style="height: var(--ep-menu-item-height)"
|
||||
>
|
||||
<i inline-flex i="dark:ep-moon ep-sunny" />
|
||||
</button>
|
||||
</el-menu-item>
|
||||
|
||||
<el-menu-item h="full">
|
||||
<a class="size-full flex items-center justify-center" :href="repository.url" target="_blank">
|
||||
<div i-ri-github-fill />
|
||||
</a>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.el-menu-demo {
|
||||
&.ep-menu--horizontal > .ep-menu-item:nth-child(1) {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
Document,
|
||||
Menu as IconMenu,
|
||||
Location,
|
||||
Setting,
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
// const isCollapse = ref(true)
|
||||
function handleOpen(key: string, keyPath: string[]) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
function handleClose(key: string, keyPath: string[]) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(key, keyPath)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu
|
||||
router
|
||||
default-active="1"
|
||||
class="el-menu-vertical-demo"
|
||||
@open="handleOpen"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-sub-menu index="1">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<Location />
|
||||
</el-icon>
|
||||
<span>Navigator One</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<template #title>
|
||||
<span>Group One</span>
|
||||
</template>
|
||||
<el-menu-item index="/nav/1/item-1">
|
||||
item one
|
||||
</el-menu-item>
|
||||
<el-menu-item index="1-2">
|
||||
item two
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-menu-item-group title="Group Two">
|
||||
<el-menu-item index="1-3">
|
||||
item three
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
<el-sub-menu index="1-4">
|
||||
<template #title>
|
||||
<span>item four</span>
|
||||
</template>
|
||||
<el-menu-item index="1-4-1">
|
||||
item one
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-sub-menu>
|
||||
<el-menu-item index="/nav/2">
|
||||
<el-icon>
|
||||
<IconMenu />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
Navigator Two
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3" disabled>
|
||||
<el-icon>
|
||||
<Document />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
Navigator Three
|
||||
</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/nav/4">
|
||||
<el-icon>
|
||||
<Setting />
|
||||
</el-icon>
|
||||
<template #title>
|
||||
Navigator Four
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export const isDark = useDark()
|
||||
export const toggleDark = useToggle(isDark)
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './dark'
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
|
||||
const component: DefineComponent<object, object, any>
|
||||
export default component
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import type { UserModule } from './types'
|
||||
import { ViteSSG } from 'vite-ssg'
|
||||
|
||||
// import "~/styles/element/index.scss";
|
||||
|
||||
// import ElementPlus from "element-plus";
|
||||
// import all element css, uncommented next line
|
||||
// import "element-plus/dist/index.css";
|
||||
|
||||
// or use cdn, uncomment cdn link in `index.html`
|
||||
|
||||
import { routes } from 'vue-router/auto-routes'
|
||||
import App from './App.vue'
|
||||
|
||||
import '~/styles/index.scss'
|
||||
|
||||
import 'uno.css'
|
||||
// If you want to use ElMessage, import it.
|
||||
import 'element-plus/theme-chalk/src/message.scss'
|
||||
import 'element-plus/theme-chalk/src/message-box.scss'
|
||||
import 'element-plus/theme-chalk/src/overlay.scss' // the modal class for message box
|
||||
|
||||
// if you do not need ssg:
|
||||
// import { createApp } from "vue";
|
||||
|
||||
// const app = createApp(App);
|
||||
// app.use(createRouter({
|
||||
// history: createWebHistory(),
|
||||
// routes,
|
||||
// }))
|
||||
// // app.use(ElementPlus);
|
||||
// app.mount("#app");
|
||||
|
||||
// https://github.com/antfu/vite-ssg
|
||||
export const createApp = ViteSSG(
|
||||
App,
|
||||
{
|
||||
routes,
|
||||
base: import.meta.env.BASE_URL,
|
||||
},
|
||||
(ctx) => {
|
||||
// install all modules under `modules/`
|
||||
Object.values(import.meta.glob<{ install: UserModule }>('./modules/*.ts', { eager: true }))
|
||||
.forEach(i => i.install?.(ctx))
|
||||
// ctx.app.use(Previewer)
|
||||
},
|
||||
)
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<template>
|
||||
<Logos my="4" />
|
||||
<HelloWorld msg="Hello Vue 3 + Element Plus + Vite" />
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
Item One
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
Navigation 2
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
Navigation 4
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// only scss variables
|
||||
|
||||
$--colors: (
|
||||
'primary': (
|
||||
'base': #589ef8,
|
||||
),
|
||||
);
|
||||
|
||||
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
|
||||
$colors: $--colors
|
||||
);
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
$--colors: (
|
||||
'primary': (
|
||||
'base': green,
|
||||
),
|
||||
'success': (
|
||||
'base': #21ba45,
|
||||
),
|
||||
'warning': (
|
||||
'base': #f2711c,
|
||||
),
|
||||
'danger': (
|
||||
'base': #db2828,
|
||||
),
|
||||
'error': (
|
||||
'base': #db2828,
|
||||
),
|
||||
'info': (
|
||||
'base': #42b8dd,
|
||||
),
|
||||
);
|
||||
|
||||
// we can add this to custom namespace, default is 'el'
|
||||
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
|
||||
$namespace: 'ep'
|
||||
);
|
||||
|
||||
// You should use them in scss, because we calculate it by sass.
|
||||
// comment next lines to use default color
|
||||
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
|
||||
// do not use same name, it will override.
|
||||
$colors: $--colors,
|
||||
$button-padding-horizontal: ('default': 50px)
|
||||
);
|
||||
|
||||
// if you want to import all
|
||||
// @use "element-plus/theme-chalk/src/index.scss" as *;
|
||||
|
||||
// You can comment it to hide debug info.
|
||||
// @debug $--colors;
|
||||
|
||||
// custom dark variables
|
||||
@use './dark.scss';
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
// import dark theme
|
||||
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
||||
|
||||
// :root {
|
||||
// --ep-color-primary: red;
|
||||
// }
|
||||
|
||||
body {
|
||||
font-family:
|
||||
Inter, system-ui, Avenir, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||
'微软雅黑', Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--ep-color-primary);
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
background-color: var(--ep-color-primary-light-9);
|
||||
color: var(--ep-color-primary);
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: rgb(13, 148, 136);
|
||||
opacity: 0.75;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
|
||||
// It's recommended to commit this file.
|
||||
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
|
||||
|
||||
declare module 'vue-router/auto-routes' {
|
||||
import type {
|
||||
RouteRecordInfo,
|
||||
ParamValue,
|
||||
ParamValueOneOrMore,
|
||||
ParamValueZeroOrMore,
|
||||
ParamValueZeroOrOne,
|
||||
} from 'vue-router'
|
||||
|
||||
/**
|
||||
* Route name map generated by unplugin-vue-router
|
||||
*/
|
||||
export interface RouteNamedMap {
|
||||
'/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
|
||||
'/nav/1/item-1': RouteRecordInfo<'/nav/1/item-1', '/nav/1/item-1', Record<never, never>, Record<never, never>>,
|
||||
'/nav/2': RouteRecordInfo<'/nav/2', '/nav/2', Record<never, never>, Record<never, never>>,
|
||||
'/nav/4': RouteRecordInfo<'/nav/4', '/nav/4', Record<never, never>, Record<never, never>>,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import type { ViteSSGContext } from 'vite-ssg'
|
||||
|
||||
export type UserModule = (ctx: ViteSSGContext) => void
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"jsx": "preserve",
|
||||
"lib": ["esnext", "dom"],
|
||||
"useDefineForClassFields": true,
|
||||
"baseUrl": ".",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"paths": {
|
||||
"~/*": ["src/*"]
|
||||
},
|
||||
"resolveJsonModule": true,
|
||||
"types": [
|
||||
"vite/client",
|
||||
"unplugin-vue-router/client"
|
||||
],
|
||||
"strict": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"vueCompilerOptions": {
|
||||
"target": 3
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import {
|
||||
defineConfig,
|
||||
presetAttributify,
|
||||
presetIcons,
|
||||
presetTypography,
|
||||
presetUno,
|
||||
presetWebFonts,
|
||||
transformerDirectives,
|
||||
transformerVariantGroup,
|
||||
} from 'unocss'
|
||||
|
||||
export default defineConfig({
|
||||
shortcuts: [
|
||||
['btn', 'px-4 py-1 rounded inline-block bg-teal-700 text-white cursor-pointer !outline-none hover:bg-teal-800 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
|
||||
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
|
||||
],
|
||||
presets: [
|
||||
presetUno(),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
scale: 1.2,
|
||||
}),
|
||||
presetTypography(),
|
||||
presetWebFonts({
|
||||
fonts: {
|
||||
sans: 'DM Sans',
|
||||
serif: 'DM Serif Display',
|
||||
mono: 'DM Mono',
|
||||
},
|
||||
}),
|
||||
],
|
||||
transformers: [
|
||||
transformerDirectives(),
|
||||
transformerVariantGroup(),
|
||||
],
|
||||
safelist: 'prose prose-sm m-auto text-left'.split(' '),
|
||||
})
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import path from 'node:path'
|
||||
import Vue from '@vitejs/plugin-vue'
|
||||
|
||||
import Unocss from 'unocss/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import VueRouter from 'unplugin-vue-router/vite'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
resolve: {
|
||||
alias: {
|
||||
'~/': `${path.resolve(__dirname, 'src')}/`,
|
||||
},
|
||||
},
|
||||
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
additionalData: `@use "~/styles/element/index.scss" as *;`,
|
||||
api: 'modern-compiler',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
Vue(),
|
||||
|
||||
// https://github.com/posva/unplugin-vue-router
|
||||
VueRouter({
|
||||
extensions: ['.vue', '.md'],
|
||||
dts: 'src/typed-router.d.ts',
|
||||
}),
|
||||
|
||||
Components({
|
||||
// allow auto load markdown components under `./src/components/`
|
||||
extensions: ['vue', 'md'],
|
||||
// allow auto import and register components used in markdown
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||
resolvers: [
|
||||
ElementPlusResolver({
|
||||
importStyle: 'sass',
|
||||
}),
|
||||
],
|
||||
dts: 'src/components.d.ts',
|
||||
}),
|
||||
|
||||
// https://github.com/antfu/unocss
|
||||
// see uno.config.ts for config
|
||||
Unocss(),
|
||||
],
|
||||
|
||||
ssr: {
|
||||
// TODO: workaround until they support native ESM
|
||||
noExternal: ['element-plus'],
|
||||
},
|
||||
})
|
||||
Loading…
Reference in New Issue