前言
大学考研一年没碰前端代码,考完赶紧找实战回顾一下.以下是利用在VUE3项目中利用HTML写的一个酷炫星球页面
实战复习
第一步跟着Vue官网https://cn.vuejs.org/guide/quick-start.html
着手搭建Vue3项目
然后再APP.vue中编写代码,注意main.js是全局配置文件,项目的主js,全局使用的各种变量、js、插件都在此定义和引入;整个项目先加载src里的main.js,通过里面的app元素生成vue对象,再将router里面的路由加载进去,结果在app的vue中呈现。
项目介绍
目录简介:
目录
.git: 是一个为git客户端增加git工具,用于存储自己的版本库)
biuld: 项目打包时候的配置文件(可使用vue.config.js进行打包配置)
node_modules: 项目的一些基础依赖包,还有拓展的安装的别的插件等也放在这儿(主要是根据package.json获取对应的依赖包)
public: 存放静态资源和公共资源
src: 项目的主文件夹
assets: 资源文件,用于存放一些静态文件,如字体、图片、css样式等
components: vue的公共组件存放文件夹,存放开发需要的各种公共组件
router: 路由文件存放的文件夹,指定路由对应的组件,其中的index.js文件是项目路由配置文件
main.js: 项目的主js,全局使用的各种变量、js、插件都在此定义和引入;整个项目先加载src里的main.js,通过里面的app元素生成vue对象,再将router里面的路由加载进去,结果在app的vue中呈现
App.vue: 项目的入口文件
view: 项目中各模块主要功能的存放文件夹,一般在这里添加新功能
.gitignore: 可以避免在提交代码时把我们不想上传的文件提交到git中; LICENSE:开源协议的说明
package.json: 记录作者、项目入口、项目描述、项目依赖等相关信息
postcss.config.js:插件,利用js插件对CSS进行转换
.prettier.config.js: 配置文件,保持代码风格统一
README.md: 项目用的到的所有插件的json格式
tsconfig.json: 配置文件
本项目仅涉及html、css,只作为Vue项目创建的初始学习,尚未涉及Vue核心技。
<template>
<div class="box">
<div class="main">
<!-- 太阳 -->
<img src="./assets/sun.png" alt="" class="sun" />
<!-- 银河系 -->
<div class="one">
<img src="./assets/bar1.png" alt="" class="bar" />
</div>
<div
class="one"
style="
width: 360px;
height: 360px;
margin-left: -180px;
margin-top: -180px;
box-shadow:
0 0 10px red,
inset 0px 0px 10px red;
animation-duration: 10s;
"
>
<img src="./assets/bar2.png" alt="" class="bar" />
</div>
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: #ccc; */
background: url('./assets/bg.jpg') no-repeat;
background-size: 100% 100%;
overflow: hidden;
}
.main {
width: 80px;
height: 80px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 30%;
margin-left: -40px;
margin-top: -40px;
}
.sun {
width: 100%;
height: 100%;
}
.one {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
border-radius: 100%;
/* 设置内外圈阴影 */
box-shadow:
0 0 10px,
inset 0px 0px 10px #fff;
/* 设置动画循环 5秒 线性变化 无限循环 */
animation: move 5s linear infinite;
}
.bar {
width: 60px;
height: 60px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -30px;
margin-top: -30px;
}
/* 动画 */
@keyframes move {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
图片1太阳:https://pic.imgdb.cn/item/659a1397871b83018a0925cf.png
图片2星球:https://pic.imgdb.cn/item/659a13c0871b83018a099fd0.png