Skip to content

Commit 34654dc

Browse files
author
febobo
committed
update doc
1 parent 78ca8c2 commit 34654dc

File tree

4 files changed

+280
-20
lines changed

4 files changed

+280
-20
lines changed

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### vue3js.cn
2+
3+
如果你有优秀的资源，欢迎通过PR或者issues的形式告知我们! 感谢

‎docs/.vuepress/components/Card.vue

+241-16
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,20 @@
33
<div v-for="item in list">
44
<h3>{{item.title}}</h3>
55
<div class="list">
6-
<div v-for="sub in item.data" class="sub" :style="{background: `url(${sub.img}) no-repeat`, backgroundSize: '100%'}">
7-
<div class="title">{{sub.title}}</div>
8-
</div>
6+
<a v-for="(sub, inx) in item.data" :href="sub.link" _target="blank" class="sub" :class="{nomargin: (inx+1)%3===0}">
7+
<div v-if="sub.img" class="cover" :style="{background: `url(${sub.img}) no-repeat`, backgroundSize: '100%'}">
8+
<div class="labels" v-if="sub.labels">
9+
<span v-for="label in sub.labels">{{label}}</span>
10+
</div>
11+
</div>
12+
<div v-else class="cover" :style="{background: bgColors[Math.floor(Math.random() * bgColors.length)]}">
13+
{{sub.title}}
14+
<div class="labels" v-if="sub.labels">
15+
<span v-for="label in sub.labels">{{label}}</span>
16+
</div>
17+
</div>
18+
<div class="desc">{{sub.desc}}</div>
19+
</a>
920
</div>
1021
</div>
1122
</div>
@@ -14,26 +25,178 @@
1425
<script>
1526
const list = [
1627
{
17-
title: '官方推荐库',
28+
title: '配套项目',
1829
data: [
1930
{
20-
desc: '',
21-
img: 'http://static.vue-js.com/feef6400-bc18-11ea-9a81-55f6f6d89e24.png',
22-
title: 'Vue Router'
31+
desc: 'Vue3设计理念，动机与目的，上手必读',
32+
img: '',
33+
title: 'Vue3设计理念',
34+
link: 'http://vue3js.cn/vue-composition/'
2335
},
2436
{
25-
desc: '',
26-
img: 'http://static.vue-js.com/cbdf2fa0-bc18-11ea-9a81-55f6f6d89e24.png',
27-
title: 'Vuex'
37+
desc: 'Vue3 Api 参考',
38+
img: '',
39+
title: 'Vue3 Api',
40+
link: 'http://vue3js.cn/vue-composition-api/'
2841
},
2942
{
3043
desc: '',
31-
img: 'http://static.vue-js.com/2c3c6020-bc19-11ea-9a81-55f6f6d89e24.png',
32-
title: 'Axios'
44+
img: '',
45+
title: 'Vue3源码加速筹备中',
46+
// link: 'http://vue3js.cn/vue-composition-api/'
47+
},
48+
]
49+
},
50+
{
51+
title: '配套项目',
52+
data: [
53+
{
54+
desc: '看文档看文档看文档，重要的事情说三遍',
55+
img: '',
56+
title: 'Vue文档',
57+
link: 'https://doc.vue-js.com/v2/api/'
58+
},
59+
{
60+
desc: 'Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌',
61+
img: '',
62+
title: 'Vue Router',
63+
link: 'https://router.vuejs.org/zh/'
64+
},
65+
{
66+
desc: 'Vue复杂数据管理的最好方式',
67+
img: '',
68+
title: 'Vuex',
69+
link: 'https://vuex.vuejs.org/zh/guide/'
70+
},
71+
{
72+
desc: '易用、简洁且高效的http库, 在Vue项目大量使用, 使用Promise管理异步，告别传统callback方式',
73+
img: '',
74+
title: 'Axios',
75+
link: 'https://github.com/axios/axios'
76+
},
77+
{
78+
desc: '🛠️ Vue.js 开发的标准工具',
79+
img: '',
80+
title: 'Vue Cli',
81+
link: 'https://cli.vuejs.org/zh/'
82+
},
83+
{
84+
desc: '基于 Vue 前端开发框架的静态站点生成工具, SEO必备良器',
85+
img: '',
86+
title: 'Nuxt',
87+
link: 'https://www.nuxtjs.cn/'
88+
},
89+
{
90+
desc: 'VuePress静态站点搭建首选',
91+
img: '',
92+
title: 'VuePress',
93+
link: 'https://vue-js.com/vuepress/zh/'
94+
},
95+
{
96+
desc: '逐行剖析 Vue.js 源码九大模块，逐个击破',
97+
img: '',
98+
title: 'Vue源码导读',
99+
link: 'https://vue-js.com/learn-vue/'
100+
},
101+
]
102+
},
103+
{
104+
title: '开源UI库',
105+
data: [
106+
{
107+
desc: '饿了么出品的Vue2的web UI工具套件',
108+
img: '',
109+
title: 'Element',
110+
labels: ['PC端', 'TB风格'],
111+
link: 'https://element.eleme.io/#/'
112+
},
113+
{
114+
desc: '基于Vue和WeUI的移动组件库',
115+
img: '',
116+
title: 'Vux',
117+
labels: ['移动端', '微信风格'],
118+
link: 'https://github.com/airyland/vux'
119+
},
120+
{
121+
desc: '基于Vuejs的开源 UI 组件库',
122+
img: '',
123+
title: 'iview',
124+
labels: ['移动端'],
125+
link: 'https://github.com/iview/iview'
126+
},
127+
{
128+
desc: '三端样式一致的响应式 UI 库',
129+
img: '',
130+
title: 'Muse-ui',
131+
labels: ['响应式', '多端'],
132+
link: 'https://muse-ui.org/'
133+
},
134+
{
135+
desc: '通过Vue Material和Vue 2建立精美的app应用',
136+
img: '',
137+
title: 'Vue-material',
138+
labels: ['Material风格'],
139+
link: 'http://vuematerial.materializecss.cn/'
140+
},
141+
{
142+
desc: '应用于Vuejs2的Twitter的Bootstrap 4组件',
143+
img: '',
144+
title: 'Bootstrap-vue',
145+
labels: ['Bootstrap风格', '情怀'],
146+
link: 'https://bootstrap-vue.org/'
147+
},
148+
{
149+
desc: '为移动而生的Vue JS 2组件框架',
150+
img: '',
151+
title: 'Vuetify',
152+
labels: ['移动端'],
153+
link: 'https://vuetifyjs.com/zh-Hans/getting-started/quick-start/'
154+
}
155+
]
156+
},
157+
{
158+
title: '优秀实战项目',
159+
data: [
160+
{
161+
desc: '基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用',
162+
img: '',
163+
title: 'Vue饿了么',
164+
link: 'https://github.com/bailicangdu/vue2-elm'
165+
},
166+
{
167+
desc: 'vue管理后台模板',
168+
img: '',
169+
title: 'vue-element-admin',
170+
link: 'https://github.com/PanJiaChen/vue-element-admin'
171+
},
172+
{
173+
desc: 'Vue饿了么配套的管理后台',
174+
img: '',
175+
title: 'vue2-manage',
176+
link: 'https://github.com/bailicangdu/vue2-manage'
177+
},
178+
{
179+
desc: '基于Vue的个人音频流媒体服务',
180+
img: '',
181+
title: 'koel',
182+
link: 'https://github.com/koel/koel'
183+
},
184+
{
185+
desc: '高仿网易云音乐的webapp',
186+
img: '',
187+
title: 'NeteaseCloudWebApp',
188+
link: 'https://github.com/javaSwing/NeteaseCloudWebApp'
189+
},
190+
{
191+
desc: '全栈式开发bilibili首页',
192+
img: '',
193+
title: 'bilibili-vue',
194+
link: 'https://github.com/lybenson/bilibili-vue'
33195
},
34196
]
35197
}
36198
]
199+
const bgColors = ['#81348e', '#3eaf7c', '#92af3e', '#af7e3e', '#af593e', '#3ea8af', '#af3e3e']
37200
export default {
38201
name: 'Card',
39202
props: {
@@ -44,7 +207,8 @@ export default {
44207
},
45208
data(){
46209
return {
47-
list
210+
list,
211+
bgColors
48212
}
49213
},
50214
methods: {
@@ -54,15 +218,76 @@ export default {
54218
</script>
55219

56220
<style scoped>
221+
*{
222+
box-sizing: border-box;
223+
}
57224
.main{
58225
width: 100%;
59226
}
60227
.list{
61228
display: flex;
229+
/* justify-content: space-around; */
230+
flex-wrap: wrap;
62231
}
63232
.sub{
64-
flex: 0 0 30%;
65-
height: 200px;
66-
background-size: 100%;
233+
flex: 0 0 32%;
234+
/* height: 200px; */
235+
position: relative;
236+
237+
cursor: pointer;
238+
margin-right: 2%;
239+
margin-bottom: 2%;
240+
}
241+
@media (max-width: 750px) {
242+
.sub{
243+
flex: 0 0 100%;
244+
}
245+
}
246+
.sub.nomargin{
247+
margin-right: 0;
248+
}
249+
.sub .cover{
250+
position: relative;
251+
height: 120px;
252+
background: #fbfbfb;
253+
/* border: 1px solid hsla(0,0%,80%,.569); */
254+
border-radius: 5px;
255+
font-size: 24px;
256+
text-align: center;
257+
line-height: 120px;
258+
color: #fff;
259+
transition: all .2s ease-in-out;
260+
}
261+
.sub .cover:hover{
262+
box-shadow: 0 18px 32px -18px #000!important;
263+
transform: translateY(-3px);
264+
}
265+
.sub .desc{
266+
/* position: absolute; */
267+
width: 100%;
268+
color: #333;
269+
/* text-shadow: 0 2px 4px rgba(7,17,27,.5); */
270+
/* font-weight: 700; */
271+
/* background: rgba(28,31,33,.6); */
272+
/* bottom: 0; */
273+
line-height: 28px;
274+
padding: 5px 8px;
275+
}
276+
.sub .labels{
277+
position: absolute;
278+
bottom: 0;
279+
display: flex;
280+
line-height: 16px;
281+
font-size: 12px;
282+
padding: 5px;
283+
}
284+
.sub .labels span{
285+
padding: 3px 5px;
286+
background: rgba(0, 0, 0, .5);
287+
color: #fff;
288+
display: inline-block;
289+
margin-right: 5px;
290+
border-radius: 4px;
291+
zoom: .8;
67292
}
68293
</style>

‎docs/.vuepress/config.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
module.exports = {
2+
title: 'Vue3.0 JS',
3+
description: '下一代web开发方式，更快，更轻，易维护，更多的原生支持',
4+
// base: '/slamdunk-the-vue3/',
5+
head: [
6+
['link', { rel: 'icon', href: '/onepunch.jpeg' }],
7+
['meta', { name: 'keywords', content: 'vue3中文, vue3js文档, vue3资料, vue3 vue-composition-api, vuecli,vue-cli,vue-cli文档,vue-cli学习,vue文档,vue中文,vue学习,前端开发,vue框架,vue社区' }],
8+
['script', { src: 'https://hm.baidu.com/hm.js?db1f163122162bcdb6d04f76b5c1df17'}]
9+
],
10+
themeConfig: {
11+
repo: 'vueClub/vue3doc',
12+
// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
13+
// "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
14+
repoLabel: 'Github',
15+
16+
// 以下为可选的编辑链接选项
17+
18+
// 假如你的文档仓库和项目本身不在一个仓库：
19+
docsRepo: 'vueClub/vue3doc',
20+
// 假如文档不是放在仓库的根目录下：
21+
// docsDir: 'docs',
22+
// 假如文档放在一个特定的分支下：
23+
docsBranch: 'master',
24+
// 默认是 false, 设置为 true 来启用
25+
editLinks: true,
26+
// 默认为 "Edit this page"
27+
editLinkText: '帮助我们改善此页面！',
28+
},
29+
markdown: {
30+
lineNumbers: true,
31+
},
32+
}

‎docs/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
home: true
3-
heroImage: /favicon.png
4-
actionText: Get Started →
5-
actionLink: /guide/
6-
footer: MIT Licensed | Copyright © 2018-present Evan You
3+
heroImage: https://vue-js.com/public/images/vue.png
4+
actionText: Get Started
5+
actionLink: http://vue3js.cn/vue-composition/
6+
footer: MIT Licensed | Copyright @ 2020-present Vue3js.cn 京ICP备15001338号-6
77
---
88

99
<div class="features">

0 commit comments

Comments
 (0)