Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
haley666
我的csdn案例
提交
f287eea1
我
我的csdn案例
项目概览
haley666
/
我的csdn案例
与 Fork 源项目一致
Fork自
inscode / VueJS
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
我
我的csdn案例
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
f287eea1
编写于
3月 28, 2024
作者:
W
weixin_42708208
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Thu Mar 28 17:23:00 CST 2024 inscode
上级
acbba841
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
6 addition
and
255 deletion
+6
-255
package.json
package.json
+1
-0
src/App.vue
src/App.vue
+3
-33
src/assets/main.css
src/assets/main.css
+2
-9
src/components/Dice/index.vue
src/components/Dice/index.vue
+0
-0
src/components/HelloWorld.vue
src/components/HelloWorld.vue
+0
-43
src/components/TheWelcome.vue
src/components/TheWelcome.vue
+0
-84
src/components/WelcomeItem.vue
src/components/WelcomeItem.vue
+0
-86
未找到文件。
package.json
浏览文件 @
f287eea1
...
...
@@ -12,6 +12,7 @@
},
"devDependencies"
:
{
"
@vitejs/plugin-vue
"
:
"
^3.0.1
"
,
"
sass
"
:
"
^1.72.0
"
,
"
vite
"
:
"
^5.0.1
"
}
}
src/App.vue
浏览文件 @
f287eea1
<
script
setup
>
import
HelloWorld
from
'
./components/HelloWorld.vue
'
import
TheWelcome
from
'
./components/TheWelcome.vue
'
import
Dice
from
'
./components/Dice/index.vue
'
</
script
>
<
template
>
<header>
<img
alt=
"Vue logo"
class=
"logo"
src=
"./assets/logo.svg"
width=
"125"
height=
"125"
/>
<div
class=
"wrapper"
>
<HelloWorld
msg=
"You did it!"
/>
</div>
<h2>
flex布局绘制骰子🎲
</h2>
</header>
<main>
<
TheWelcom
e
/>
<
Dic
e
/>
</main>
</
template
>
<
style
scoped
>
header
{
line-height
:
1.5
;
}
.logo
{
display
:
block
;
margin
:
0
auto
2rem
;
}
@media
(
min-width
:
1024px
)
{
header
{
display
:
flex
;
place-items
:
center
;
padding-right
:
calc
(
var
(
--section-gap
)
/
2
);
}
.logo
{
margin
:
0
2rem
0
0
;
}
header
.wrapper
{
display
:
flex
;
place-items
:
flex-start
;
flex-wrap
:
wrap
;
}
}
</
style
>
src/assets/main.css
浏览文件 @
f287eea1
...
...
@@ -8,12 +8,7 @@
font-weight
:
normal
;
}
a
,
.green
{
text-decoration
:
none
;
color
:
hsla
(
160
,
100%
,
37%
,
1
);
transition
:
0.4s
;
}
@media
(
hover
:
hover
)
{
a
:
hover
{
...
...
@@ -28,8 +23,6 @@ a,
}
#app
{
display
:
grid
;
grid-template-columns
:
1
fr
1
fr
;
padding
:
0
2rem
;
}
}
src/
d
ice/index.vue
→
src/
components/D
ice/index.vue
浏览文件 @
f287eea1
文件已移动
src/components/HelloWorld.vue
已删除
100644 → 0
浏览文件 @
acbba841
<
script
setup
>
defineProps
({
msg
:
{
type
:
String
,
required
:
true
}
})
</
script
>
<
template
>
<div
class=
"greetings"
>
<h1
class=
"green"
>
{{
msg
}}
</h1>
<h3>
You’ve successfully created a project with
<a
target=
"_blank"
href=
"https://vitejs.dev/"
>
Vite
</a>
+
<a
target=
"_blank"
href=
"https://vuejs.org/"
>
Vue 3
</a>
.
</h3>
</div>
</
template
>
<
style
scoped
>
h1
{
font-weight
:
500
;
font-size
:
2.6rem
;
top
:
-10px
;
}
h3
{
font-size
:
1.2rem
;
}
.greetings
h1
,
.greetings
h3
{
text-align
:
center
;
}
@media
(
min-width
:
1024px
)
{
.greetings
h1
,
.greetings
h3
{
text-align
:
left
;
}
}
</
style
>
src/components/TheWelcome.vue
已删除
100644 → 0
浏览文件 @
acbba841
<
script
setup
>
import
WelcomeItem
from
'
./WelcomeItem.vue
'
import
DocumentationIcon
from
'
./icons/IconDocumentation.vue
'
import
ToolingIcon
from
'
./icons/IconTooling.vue
'
import
EcosystemIcon
from
'
./icons/IconEcosystem.vue
'
import
CommunityIcon
from
'
./icons/IconCommunity.vue
'
import
SupportIcon
from
'
./icons/IconSupport.vue
'
</
script
>
<
template
>
<WelcomeItem>
<template
#icon
>
<DocumentationIcon
/>
</
template
>
<
template
#heading
>
Documentation
</
template
>
Vue’s
<a
target=
"_blank"
href=
"https://vuejs.org/"
>
official documentation
</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<
template
#icon
>
<ToolingIcon
/>
</
template
>
<
template
#heading
>
Tooling
</
template
>
This project is served and bundled with
<a
href=
"https://vitejs.dev/guide/features.html"
target=
"_blank"
>
Vite
</a>
. The recommended IDE
setup is
<a
href=
"https://code.visualstudio.com/"
target=
"_blank"
>
VSCode
</a>
+
<a
href=
"https://github.com/johnsoncodehk/volar"
target=
"_blank"
>
Volar
</a>
. If you need to test
your components and web pages, check out
<a
href=
"https://www.cypress.io/"
target=
"_blank"
>
Cypress
</a>
and
<a
href=
"https://on.cypress.io/component"
target=
"_blank"
>
Cypress Component Testing
</a
>
.
<br
/>
More instructions are available in
<code>
README.md
</code>
.
</WelcomeItem>
<WelcomeItem>
<
template
#icon
>
<EcosystemIcon
/>
</
template
>
<
template
#heading
>
Ecosystem
</
template
>
Get official tools and libraries for your project:
<a
target=
"_blank"
href=
"https://pinia.vuejs.org/"
>
Pinia
</a>
,
<a
target=
"_blank"
href=
"https://router.vuejs.org/"
>
Vue Router
</a>
,
<a
target=
"_blank"
href=
"https://test-utils.vuejs.org/"
>
Vue Test Utils
</a>
, and
<a
target=
"_blank"
href=
"https://github.com/vuejs/devtools"
>
Vue Dev Tools
</a>
. If you need more
resources, we suggest paying
<a
target=
"_blank"
href=
"https://github.com/vuejs/awesome-vue"
>
Awesome Vue
</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<
template
#icon
>
<CommunityIcon
/>
</
template
>
<
template
#heading
>
Community
</
template
>
Got stuck? Ask your question on
<a
target=
"_blank"
href=
"https://chat.vuejs.org"
>
Vue Land
</a>
, our official Discord server, or
<a
target=
"_blank"
href=
"https://stackoverflow.com/questions/tagged/vue.js"
>
StackOverflow
</a>
.
You should also subscribe to
<a
target=
"_blank"
href=
"https://news.vuejs.org"
>
our mailing list
</a>
and follow the official
<a
target=
"_blank"
href=
"https://twitter.com/vuejs"
>
@vuejs
</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<
template
#icon
>
<SupportIcon
/>
</
template
>
<
template
#heading
>
Support Vue
</
template
>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a
target=
"_blank"
href=
"https://vuejs.org/sponsor/"
>
becoming a sponsor
</a>
.
</WelcomeItem>
</template>
src/components/WelcomeItem.vue
已删除
100644 → 0
浏览文件 @
acbba841
<
template
>
<div
class=
"item"
>
<i>
<slot
name=
"icon"
></slot>
</i>
<div
class=
"details"
>
<h3>
<slot
name=
"heading"
></slot>
</h3>
<slot></slot>
</div>
</div>
</
template
>
<
style
scoped
>
.item
{
margin-top
:
2rem
;
display
:
flex
;
}
.details
{
flex
:
1
;
margin-left
:
1rem
;
}
i
{
display
:
flex
;
place-items
:
center
;
place-content
:
center
;
width
:
32px
;
height
:
32px
;
color
:
var
(
--color-text
);
}
h3
{
font-size
:
1.2rem
;
font-weight
:
500
;
margin-bottom
:
0.4rem
;
color
:
var
(
--color-heading
);
}
@media
(
min-width
:
1024px
)
{
.item
{
margin-top
:
0
;
padding
:
0.4rem
0
1rem
calc
(
var
(
--section-gap
)
/
2
);
}
i
{
top
:
calc
(
50%
-
25px
);
left
:
-26px
;
position
:
absolute
;
border
:
1px
solid
var
(
--color-border
);
background
:
var
(
--color-background
);
border-radius
:
8px
;
width
:
50px
;
height
:
50px
;
}
.item
:before
{
content
:
' '
;
border-left
:
1px
solid
var
(
--color-border
);
position
:
absolute
;
left
:
0
;
bottom
:
calc
(
50%
+
25px
);
height
:
calc
(
50%
-
25px
);
}
.item
:after
{
content
:
' '
;
border-left
:
1px
solid
var
(
--color-border
);
position
:
absolute
;
left
:
0
;
top
:
calc
(
50%
+
25px
);
height
:
calc
(
50%
-
25px
);
}
.item
:first-of-type:before
{
display
:
none
;
}
.item
:last-of-type:after
{
display
:
none
;
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录