本地vue架构中，下载CSS模板优化界面_vue覆盖框架的css-优快云博客

本文链接：https://blog.youkuaiyun.com/Chenge218/article/details/144724770

Vue结构介绍（可以跳过直接看基本思路）

（0）App.vue (根组件):

App.vue 是你的 Vue.js 应用的根组件，它负责管理整个应用的入口，管理全局性的逻辑、效果。

在我的项目中，App.vue 负责：

引入全局样式。
配置路由 (<router-view>)。
引入全局背景【本次的工作内容之一】。

（1）/Views/HomeView.vue (页面组件):

/Views/HomeView.vue 是一个页面组件，它负责渲染应用中的某个特定页面。

在我的项目中，HomeView.vue 负责：

显示主页内容。
引入AtomAnimation动画组件【本次的工作内容之一】
引入CryptoEncryption 加密/解密组件【我做的应用是一个密码系统】

（2）/components(内容组件)

应用所用到的内容都会在这里存放。如本应用中的

AtomAnimation动画组件
CryptoEncryption 加密/解密组件
BackgroundComponent背景组件

（3）/assets

如果用到的外部文件过大，不方便全部写入components文件里，或者想让结构更加有清晰，就会创建/assets文件夹，把外部文件放在这里。在components中只需要引用文件路径即可，让代码有更好的组织性，方便了代码的维护。

基本思路

网站下载想要的模板：站长素材-分享综合设计素材免费下载的平台
在自己src/conponent 中，增加对应conponent组块
修改src/Views/HomeView文件或/src/App.vue,增加引入组件

实操一：背景优化

1、下载文件：

从站长素材下载了一个大图背景文件包。

如图1.eps文件是我们得到的背景文件，但是它需要转化成.svg才能用，

访问EPS to SVG | CloudConvert免费转化。

得到背景文件.svg

2、增加conponent组块

（1）将背景文件放进合适位置

在/src/assets中创建背景文件夹/backgrounds，将.svg文件放进去。

（2）创建component文件并调用目标

文件naijnew在/src/conponents文件夹创建background.vue文件

<template>
    <img class="background-svg"  src="../assets/backgrounds/background.svg" alt="background"/>
</template>

<script>
export default {

}
</script>
 <style scoped>
    .background-svg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
   
 }
</style>

-->component文件的结构：

文件的引用：<img class="background-svg" src="../assets/backgrounds/background.svg" alt="background"/>这一行是对背景文件的引用操作。
后面的内容是基本的参数调节。你可以根据需要调整调整 width、height等

3、引入组件

这个背景将全局使用，因而要在/src/App.vue中修改

在App.vue 中的<template>和<script>中分别引入背景组件。

<template>
  <Background/>
  <router-view/>
</template>

<script setup>
import Background from './components/Background.vue'
</script>

4、调试

附注意事项：

很多电脑必须用管理员权限的powershell才能npm run
run的时候如果卡壳不动了，需要按一按回车

这个报错是老问题。component文件的名字必须是多单词，防止混淆。将文件改为BackgroundComponent.vue，同时对应修改刚才在App.vue中涉及到引用的部分。修改后记得ctrl S保存生效。

成功生效，回去调整一下component中的<script>参数，即可达到自己想要的效果。

实操二：加入动画模板

1、下载文件

下载了一个动画特效，其中index.html就是我们需要的代码文件。

2、创建component文件

（1）不能转化为.svg文件加入/assets中待使用。

这里遇到一个问题：我们的动画svg中涉及到动态元素。它不能像静态svg内容一样在component组件中被调用。在运行过程中，CSS中的动态设计找不到在svg中的动态元素，于是这些动态内容无法生效，动画无法显示。我们只好将动画特效的整个<svg>也都写入component中。

（2）写入component文件

①将原材料中的，<svg>内容和<style>内容都复制进去即可。

②设置svg开头的物理大小

如上图是原材料中的svg开头，下图在component文件中用<template>包裹了<svg>

如图，关键步骤：加上这个以后，动画才能显示。

③同步调整width和height的值（保持二者相同），即可调节动画的尺寸大小。

3、在HomeView中引用：

这个动画特效仅用于一个页面中，而不是全局。因此在HomeView引用。

代码如下，跑不出来的话，可以拿去参考对比。

<template>
  <main style="display:flex; flex-direction:column; align-items:center;">
    <div>
         <AtomAnimation/>
     </div>
    <div>
        <CryptoEncryption></CryptoEncryption>
    </div>
  </main>
</template>

  <script>
  import CryptoEncryption from '../components/EncryptionComponent.vue'
  import AtomAnimation from '../components/AtomAnimationComponent.vue'
  
  export default {
  components:{
    CryptoEncryption,
      AtomAnimation,
  },
}
  </script>