实战复习Vue day1.0

谭梦寻

已于 2024-01-12 14:41:28 修改

阅读量343

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-01-07 10:39:17 首次发布

本文链接：https://blog.csdn.net/GLimerence/article/details/135436828

版权

前言

大学考研一年没碰前端代码，考完赶紧找实战回顾一下.以下是利用在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

图片3：https://pic.imgdb.cn/item/659a1401871b83018a0a69d7.png

后续内容：实战复习Vue day1.1（酷炫星系）-CSDN博客