Skip to content

Commit 43ed316

Browse files
coderjamcoderjam
committed
基本完成官网首页骨架
1 parent 704d790 commit 43ed316

17 files changed

+409
-60
lines changed

‎zhiwei-ui-vue3/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"devDependencies": {
1313
"@vue/compiler-sfc": "^3.0.0-rc.1",
14+
"sass": "1.26.10",
1415
"vite": "^1.0.0-rc.1"
1516
}
1617
}

‎zhiwei-ui-vue3/src/App.vue

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
11
<template>
2-
<div>导航栏</div>
3-
<router-link to="/">首页</router-link>
4-
<router-link to="/jam">jam</router-link>
5-
<hr/>
62
<router-view />
73
</template>
84

9-
<script>
5+
<script lang="ts">
6+
import { ref, provide } from "vue";
7+
import { router } from "./router";
8+
109
export default {
11-
name: 'App'
12-
}
13-
</script>
10+
name: "App",
11+
setup() {
12+
const width = document.documentElement.clientWidth;
13+
const menuVisible = ref(width <= 500 ? false : true);
14+
provide("menuVisible", menuVisible); // set
15+
router.afterEach(() => {
16+
if (width <= 500) {
17+
menuVisible.value = false;
18+
}
19+
});
20+
},
21+
};
22+
</script>

‎zhiwei-ui-vue3/src/components/ButtonDemo.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
Button 示例
4+
</div>
5+
</template>

‎zhiwei-ui-vue3/src/components/DialogDemo.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div>Dialog 示例</div>
3+
</template>

‎zhiwei-ui-vue3/src/components/DocDemo.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
Doc 默认页面
4+
</div>
5+
</template>

‎zhiwei-ui-vue3/src/components/HelloWorld.vue

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎zhiwei-ui-vue3/src/components/Jam.vue

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎zhiwei-ui-vue3/src/components/Jam2.vue

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎zhiwei-ui-vue3/src/components/SwitchDemo.vue

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<template>
2+
<div>
3+
<p>Switch 的文档</p>
4+
<p>Switch 的文档</p>
5+
<p>Switch 的文档</p>
6+
<p>Switch 的文档</p>
7+
<p>Switch 的文档</p>
8+
<p>Switch 的文档</p>
9+
<p>Switch 的文档</p>
10+
<p>Switch 的文档</p>
11+
<p>Switch 的文档</p>
12+
<p>Switch 的文档</p>
13+
<p>Switch 的文档</p>
14+
<p>Switch 的文档</p>
15+
<p>Switch 的文档</p>
16+
<p>Switch 的文档</p>
17+
<p>Switch 的文档</p>
18+
<p>Switch 的文档</p>
19+
<p>Switch 的文档</p>
20+
<p>Switch 的文档</p>
21+
<p>Switch 的文档</p>
22+
<p>Switch 的文档</p>
23+
<p>Switch 的文档</p>
24+
<p>Switch 的文档</p>
25+
<p>Switch 的文档</p>
26+
<p>Switch 的文档</p>
27+
<p>Switch 的文档</p>
28+
<p>Switch 的文档</p>
29+
<p>Switch 的文档</p>
30+
<p>Switch 的文档</p>
31+
<p>Switch 的文档</p>
32+
<p>Switch 的文档</p>
33+
<p>Switch 的文档</p>
34+
<p>Switch 的文档</p>
35+
<p>Switch 的文档</p>
36+
<p>Switch 的文档</p>
37+
<p>Switch 的文档</p>
38+
<p>Switch 的文档</p>
39+
<p>Switch 的文档</p>
40+
<p>Switch 的文档</p>
41+
<p>Switch 的文档</p>
42+
<p>Switch 的文档</p>
43+
<p>Switch 的文档</p>
44+
<p>Switch 的文档</p>
45+
<p>Switch 的文档</p>
46+
<p>Switch 的文档</p>
47+
<p>Switch 的文档</p>
48+
<p>Switch 的文档</p>
49+
<p>Switch 的文档</p>
50+
<p>Switch 的文档</p>
51+
<p>Switch 的文档</p>
52+
<p>Switch 的文档</p>
53+
<p>Switch 的文档</p>
54+
<p>Switch 的文档</p>
55+
<p>Switch 的文档</p>
56+
<p>Switch 的文档</p>
57+
<p>Switch 的文档</p>
58+
<p>Switch 的文档</p>
59+
<p>Switch 的文档</p>
60+
<p>Switch 的文档</p>
61+
<p>Switch 的文档</p>
62+
<p>Switch 的文档</p>
63+
<p>Switch 的文档</p>
64+
<p>Switch 的文档</p>
65+
<p>Switch 的文档</p>
66+
<p>Switch 的文档</p>
67+
<p>Switch 的文档</p>
68+
<p>Switch 的文档</p>
69+
<p>Switch 的文档</p>
70+
<p>Switch 的文档</p>
71+
<p>Switch 的文档</p>
72+
<p>Switch 的文档</p>
73+
<p>Switch 的文档</p>
74+
<p>Switch 的文档</p>
75+
<p>Switch 的文档</p>
76+
<p>Switch 的文档</p>
77+
<p>Switch 的文档</p>
78+
<p>Switch 的文档</p>
79+
<p>Switch 的文档</p>
80+
<p>Switch 的文档</p>
81+
<p>Switch 的文档</p>
82+
<p>Switch 的文档</p>
83+
<p>Switch 的文档</p>
84+
<p>Switch 的文档</p>
85+
<p>Switch 的文档</p>
86+
<p>Switch 的文档</p>
87+
<p>Switch 的文档</p>
88+
<p>Switch 的文档</p>
89+
<p>Switch 的文档</p>
90+
<p>Switch 的文档</p>
91+
<p>Switch 的文档</p>
92+
<p>Switch 的文档</p>
93+
<p>Switch 的文档</p>
94+
<p>Switch 的文档</p>
95+
<p>Switch 的文档</p>
96+
<p>Switch 的文档</p>
97+
<p>Switch 的文档</p>
98+
<p>Switch 的文档</p>
99+
<p>Switch 的文档</p>
100+
<p>Switch 的文档</p>
101+
<p>Switch 的文档</p>
102+
<p>Switch 的文档</p>
103+
</div>
104+
</template>

‎zhiwei-ui-vue3/src/components/TabsDemo.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div>Tabs 示例</div>
3+
</template>

‎zhiwei-ui-vue3/src/components/Topnav.vue

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<div class="topnav">
3+
<div class="logo">LOGO</div>
4+
<ul class="menu">
5+
<li>菜单1</li>
6+
<li>菜单2</li>
7+
</ul>
8+
<span class="toggleAside" @click="toggleMenu"></span>
9+
</div>
10+
</template>
11+
<script lang="ts">
12+
import { inject, Ref } from "vue";
13+
export default {
14+
setup() {
15+
const menuVisible = inject<Ref<boolean>>("menuVisible"); // get
16+
const toggleMenu = () => {
17+
menuVisible.value = !menuVisible.value;
18+
};
19+
return { toggleMenu };
20+
},
21+
};
22+
</script>
23+
<style lang="scss" scoped>
24+
.topnav {
25+
background: pink;
26+
display: flex;
27+
padding: 16px;
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
width: 100%;
32+
z-index: 10;
33+
justify-content: center;
34+
align-items: center;
35+
> .logo {
36+
max-width: 6em;
37+
margin-right: auto;
38+
}
39+
> .menu {
40+
display: flex;
41+
white-space: nowrap;
42+
flex-wrap: nowrap;
43+
> li {
44+
margin: 0 1em;
45+
}
46+
}
47+
> .toggleAside {
48+
width: 24px;
49+
height: 24px;
50+
background: red;
51+
position: absolute;
52+
left: 16px;
53+
top: 50%;
54+
transform: translateY(-50%);
55+
display: none;
56+
}
57+
@media (max-width: 500px) {
58+
> .menu {
59+
display: none;
60+
}
61+
> .logo {
62+
margin: 0 auto;
63+
}
64+
> .toggleAside {
65+
display: inline-block;
66+
}
67+
}
68+
}
69+
</style>

‎zhiwei-ui-vue3/src/index.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
ul,
7+
ol {
8+
list-style: none;
9+
}
10+
a {
11+
text-decoration: none;
12+
color: inherit;
13+
&:hover {
14+
border-bottom: 1px solid;
15+
cursor: pointer;
16+
}
17+
}
18+
h1,h2,h3,h4,h5,h6{
19+
font-weight: normal;
20+
}
21+
22+
body {
23+
font-size: 16px;
24+
// 为什么这样写 font-family
25+
// 答案见 https://github.com/zenozeng/fonts.css/
26+
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;
27+
}

‎zhiwei-ui-vue3/src/main.ts

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
1-
import { createApp } from 'vue'
2-
import App from './App.vue'
3-
import './index.css'
4-
import { createWebHashHistory,createRouter } from 'vue-router'
5-
import Jam from './components/Jam.vue'
6-
import Jam2 from './components/Jam2.vue'
7-
const history = createWebHashHistory()
8-
const router = createRouter({
9-
history:history,
10-
routes:[
11-
{ path:'/',component:Jam },
12-
{ path:'/jam',component:Jam2 },
13-
]
14-
})
1+
import { createApp } from "vue";
2+
import App from "./App.vue";
3+
import "./index.scss";
4+
import { router } from './router';
155

16-
const app = createApp(App)
17-
app.use(router)
18-
app.mount('#app')
6+
const app = createApp(App);
7+
app.use(router);
8+
app.mount("#app");

‎zhiwei-ui-vue3/src/router.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createWebHashHistory, createRouter } from "vue-router";
2+
import Home from "./views/Home.vue";
3+
import Doc from "./views/Doc.vue";
4+
import SwitchDemo from "./components/SwitchDemo.vue";
5+
import ButtonDemo from "./components/ButtonDemo.vue";
6+
import DialogDemo from "./components/DialogDemo.vue";
7+
import TabsDemo from "./components/TabsDemo.vue";
8+
import DocDemo from "./components/DocDemo.vue";
9+
10+
const history = createWebHashHistory();
11+
export const router = createRouter({
12+
history: history,
13+
routes: [
14+
{ path: "/", component: Home },
15+
{
16+
path: "/doc",
17+
component: Doc,
18+
children: [
19+
{ path: "", component: DocDemo },
20+
{ path: "switch", component: SwitchDemo },
21+
{ path: "button", component: ButtonDemo },
22+
{ path: "dialog", component: DialogDemo },
23+
{ path: "tabs", component: TabsDemo },
24+
],
25+
},
26+
],
27+
});
28+
router.afterEach(() => {
29+
console.log("路由切换了");
30+
});

0 commit comments

Comments
 (0)