Skip to content
This repository was archived by the owner on Dec 22, 2024. It is now read-only.

Commit 7c03248

Browse files
saya-ashensaya-ashen
committed
add frontend
1 parent 3e9bd49 commit 7c03248

22 files changed

+6689
-0
lines changed

‎frontend/web/.gitignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
*.log
3+
dist
4+
.output
5+
.nuxt
6+
.vercel

‎frontend/web/.npmrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
shamefully-hoist=true
2+
strict-peer-dependencies=false
3+
shell-emulator=true
4+
# fix code ERESOLVE \n ERESOLVE could not resolve
5+
legacy-peer-deps=true

‎frontend/web/LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2021 Element Plus
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎frontend/web/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Element Plus with Nuxt 3 Minimal Starter
2+
3+
<pre align="center">
4+
🏗 Working in Progress
5+
</pre>
6+
7+
SSR Preview: <https://element-plus-nuxt.vercel.app/>
8+
9+
SSG Preview: <https://nuxt-starter.element-plus.org/>
10+
11+
We recommend to look at the [Nuxt 3 Docs](https://nuxt.com/) and [Element Plus Docs](https://element-plus.org/).
12+
13+
## Setup
14+
15+
Make sure to install the dependencies
16+
17+
```bash
18+
pnpm install
19+
```
20+
21+
## Development
22+
23+
Start the development server on `http://localhost:3000`
24+
25+
```bash
26+
pnpm dev
27+
```
28+
29+
More info about [nuxt deployment](https://nuxt.com/docs/getting-started/deployment#presets).
30+
31+
Run `npm run generate` to generate static html in `.output/public`.
32+
33+
## Production
34+
35+
Build the application for production:
36+
37+
```bash
38+
pnpm build
39+
```
40+
41+
Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment).
42+
43+
## Deploy
44+
45+
You need set `NITRO_PRESET=vercel-edge`, see [Nuxt on Vercel](https://vercel.com/docs/frameworks/nuxt#edge-functions).
46+
47+
## Ref
48+
49+
- [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3)

‎frontend/web/app.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<script setup>
2+
</script>
3+
4+
<template>
5+
<NuxtPage />
6+
</template>

‎frontend/web/assets/scss/element/dark.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
2+
$bg-color: (
3+
'page': #0a0a0a,
4+
'overlay': #1d1e1f,
5+
)
6+
);

‎frontend/web/assets/scss/element/index.scss

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
$-colors: (
2+
'primary': (
3+
'base': rgba(107,33,168, 1),
4+
),
5+
'success': (
6+
'base': #67c23a,
7+
),
8+
'warning': (
9+
'base': #e6a23c,
10+
),
11+
'danger': (
12+
'base': #f56c6c,
13+
),
14+
'error': (
15+
'base': #f56c6c,
16+
),
17+
'info': (
18+
'base': #909399,
19+
),
20+
);
21+
22+
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
23+
$colors: $-colors
24+
);
25+
26+
@use './dark.scss';

‎frontend/web/assets/scss/index.scss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
html,
2+
body,
3+
#app {
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
html.dark {
9+
background: #222;
10+
color: white;
11+
}
12+
13+
a {
14+
font-weight: 400;
15+
color: var(--el-color-primary);
16+
}

‎frontend/web/components/Counter.vue

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script setup lang="ts">
2+
const { count } = useCount();
3+
</script>
4+
5+
<template>
6+
<el-input-number v-model="count" :min="1" :max="10" />
7+
</template>

‎frontend/web/components/Examples.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<el-switch v-model="colorMode" inline-prompt active-text="dark" inactive-text="light" size="large"></el-switch>
3+
4+
<br />
5+
6+
<el-dropdown class="m-4" type="primary">
7+
<el-button type="primary">
8+
Dropdown List
9+
<el-icon class="el-icon--right">
10+
<el-icon-arrow-down />
11+
</el-icon>
12+
</el-button>
13+
<template #dropdown>
14+
<el-dropdown-menu>
15+
<el-dropdown-item>Action 1</el-dropdown-item>
16+
<el-dropdown-item>Action 2</el-dropdown-item>
17+
<el-dropdown-item>Action 3</el-dropdown-item>
18+
<el-dropdown-item>Action 4</el-dropdown-item>
19+
<el-dropdown-item>Action 5</el-dropdown-item>
20+
</el-dropdown-menu>
21+
</template>
22+
</el-dropdown>
23+
24+
<br />
25+
26+
<el-button :icon="ElIconView" class="m-4" @click="hello">Hello</el-button>
27+
<el-button class="m-4" type="primary" @click="hello">Hello</el-button>
28+
<el-button class="m-4" type="success" @click="helloSuccess">Hello</el-button>
29+
30+
<br />
31+
32+
<Counter class="m-4" />
33+
34+
<br />
35+
36+
<el-icon class="cursor-pointer">
37+
<el-icon-grape />
38+
</el-icon>
39+
<el-icon class="cursor-pointer">
40+
<ElIconIceCream />
41+
</el-icon>
42+
<el-icon class="cursor-pointer mb-4">
43+
<ElIconIceDrink />
44+
</el-icon>
45+
46+
<br />
47+
48+
<el-config-provider :locale="zhCn">
49+
<el-date-picker
50+
v-model="timeValue"
51+
type="date"
52+
placeholder="请选择日期"
53+
/>
54+
</el-config-provider>
55+
</template>
56+
57+
<script setup lang="ts">
58+
import zhCn from "element-plus/es/locale/lang/zh-cn";
59+
60+
const timeValue = ref("");
61+
const hello = () => ElMessage.info("hello world");
62+
const helloSuccess = () => ElMessage.success("hello world");
63+
64+
const color = useColorMode();
65+
const colorMode = computed({
66+
get: () => color.value === 'dark',
67+
set: () => (color.preference = color.value === 'dark' ? 'light' : 'dark'),
68+
});
69+
</script>

‎frontend/web/components/Logos.vue

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script setup lang="ts">
2+
</script>
3+
4+
<template>
5+
<div class="display-logo" flex="~" gap-2 items-center>
6+
<img
7+
class="logo"
8+
src="https://element-plus.org/images/element-plus-logo.svg"
9+
/>
10+
<el-icon><ElIconPlus /></el-icon>
11+
<NuxtLogo class="logo" />
12+
</div>
13+
<h2>
14+
<a target="_blank" href="https://element-plus.org/">Element Plus</a>
15+
With
16+
<a target="_blank" href="https://v3.nuxtjs.org/">NuxtJS</a>
17+
</h2>
18+
</template>
19+
20+
<style>
21+
.display-logo {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
27+
.logo {
28+
max-height: 3rem;
29+
}
30+
</style>

‎frontend/web/components/NuxtLogo.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<svg
3+
viewBox="0 0 221 65"
4+
fill="none"
5+
xmlns="http://www.w3.org/2000/svg"
6+
class="h-8"
7+
>
8+
<g clip-path="url(#a)">
9+
<path
10+
fill="currentColor"
11+
d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"
12+
></path>
13+
<path
14+
fill-rule="evenodd"
15+
clip-rule="evenodd"
16+
d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
17+
fill="#80EEC0"
18+
></path>
19+
<path
20+
d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
21+
fill="#00DC82"
22+
></path>
23+
</g>
24+
<defs>
25+
<clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"></path></clipPath>
26+
</defs>
27+
</svg>
28+
</template>

‎frontend/web/composables/count.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export function useCount() {
2+
const count = useState('count', () => Math.round(Math.random() * 20))
3+
4+
function inc() {
5+
count.value += 1
6+
}
7+
function dec() {
8+
count.value -= 1
9+
}
10+
11+
return {
12+
count,
13+
inc,
14+
dec,
15+
}
16+
}

‎frontend/web/nuxt.config.ts

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
2+
export default defineNuxtConfig({
3+
app: {
4+
// head
5+
head: {
6+
title: 'Element Plus + Nuxt 3',
7+
meta: [
8+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
9+
{
10+
hid: 'description',
11+
name: 'description',
12+
content: 'ElementPlus + Nuxt3',
13+
},
14+
],
15+
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
16+
}
17+
},
18+
19+
// css
20+
css: ['~/assets/scss/index.scss'],
21+
22+
typescript: {
23+
strict: true,
24+
shim: false,
25+
},
26+
27+
// build modules
28+
modules: [
29+
'@vueuse/nuxt',
30+
'@unocss/nuxt',
31+
'@pinia/nuxt',
32+
'@element-plus/nuxt',
33+
'@nuxtjs/color-mode'
34+
],
35+
36+
// vueuse
37+
vueuse: {
38+
ssrHandlers: true,
39+
},
40+
41+
// colorMode
42+
colorMode: {
43+
classSuffix: '',
44+
},
45+
46+
unocss: {
47+
uno: true,
48+
attributify: true,
49+
icons: {
50+
scale: 1.2,
51+
},
52+
},
53+
vite: {
54+
css: {
55+
preprocessorOptions: {
56+
scss: {
57+
additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
58+
},
59+
},
60+
},
61+
},
62+
elementPlus: {
63+
icon: 'ElIcon',
64+
importStyle: 'scss',
65+
themes: ['dark'],
66+
},
67+
})

0 commit comments

Comments
 (0)