初学vue-cli3.0+webpack+vue-router+elementUI后简单响应式静态页面的编写

saberrrrrrrr

已于 2023-06-19 21:42:22 修改

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue入门基础文章标签： vue 小Demo

于 2019-07-30 21:00:20 首次发布

本文链接：https://blog.youkuaiyun.com/saber04/article/details/97632617

vue入门基础专栏收录该内容

10 篇文章

订阅专栏

本文分享了使用Vue结合Element UI构建静态网页的经验，包括环境搭建、组件引入、响应式图片处理、CSS图片切换技巧及解决Element UI组件样式覆盖难题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

博主之前出去耍了几天，回来为了复习巩固前一段时间所学的ps切图以及vue的知识，所以去网上找了几个psd文件，用vue实现了一个简单的静态单页网页界面(网页的导航部分并没有实现折叠导航的功能)。

关于vue-cli3的环境安装和工程创建可以参考：
https://blog.youkuaiyun.com/qq_36407748/article/details/80739787

效果预览 https://saberla.github.io/vuePracticeDemo/dist/#/

项目目录结构

在这里插入图片描述

遇到的问题

elemenUI的引入与使用

起手安装element-ui

npm i element-ui -S

运行命令后会发现package.json中有了相关依赖，如下
在这里插入图片描述

然后在main.js中引入elemenUI并使用
ps:这里一定要引入element-ui的css文件，之前理所当然的像引入其他工具一样只引入了组件库(js文件)，然后没有任何效果，最后查阅才知道少引入了css

import elementUI from 'element-ui' //js
import 'element-ui/lib/theme-chalk/index.css' //css

在这里插入图片描述
这两歩配置之后就可以在组件中使用elemen-ui啦，其他工具的引入大同小异，引入时可以去官方文档查看，善用搜索引擎。

关于图片在屏幕拉伸时不变形自适应的问题

这个问题是因为引入的图片是固定大小的，所以将屏幕缩小时也不会改变，只会被隐藏，很影响体验，所以博主查阅了网上的一些方法，但都感觉答非所问，比如：

object-fit https://blog.youkuaiyun.com/qq_39830654/article/details/80858117
backbackground-size https://www.cnblogs.com/jihua/p/backimagesize.html
js https://blog.youkuaiyun.com/wmn66/article/details/45972543

找了很久都没有自己想要的，虽然js能解决，但是并不是通过css方法，由于本人比较懒，不想写js方法，于是自己在那儿鼓捣了css，得到了解决方法，简洁明了，两行代码

ex：
HTML

<el-row :gutter="0" class="map">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="img">
            <img src="../assets/contact/map.png" alt="img">
        </el-col>
    </el-row>

CSS

.img>img{
    width: 85%;
    height: auto;
}

效果
在这里插入图片描述

原理也很简单，通过element-ui的<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="img">layout响应式布局规定了容器的宽度，然后让图片的宽度一直为其85%，高度auto，这样在缩放屏幕时图片宽度也会跟着变化，而且高度设置为auto确保了图片不变形
ps:宽度不能设定值

通过css切换图片

这里要记录的唯一一点就是，要想通过css达到切换图片的效果，初始不能在HTML中通过img标签引入图片，否则不能切换图片，只会新生成一张图片。
解决方法：在css中设置背景图片
HTML

<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-menu class="nav_right" mode="horizontal">
            <el-menu-item><router-link to="/"><div class="img1"></div></router-link></el-menu-item>
            <el-menu-item><router-link to="/about"><div class="img2"></div></router-link></el-menu-item>
            <el-menu-item><router-link to="/contact"><div class="img3"></div></router-link></el-menu-item>
          </el-menu>
        </el-col>

CSS

// 默认导航图片
.img1{
  width: 67px;
  height: 9px;
  background: url(./assets/03_About_03.png) no-repeat;
  margin-top: 20px;
}
.img2{
  width: 67px;
  height: 9px;
  background: url(./assets/02_Home_05.png) no-repeat;
  margin-top: 20px;
}
.img3{
  width: 67px;
  height: 9px;
  background: url(./assets/02_Home_07.png) no-repeat;
  margin-top: 20px;
}
//hover时切换
.img1:hover{
  background: url(./assets/02_Home_03.png) no-repeat
}
.img2:hover{
  background: url(./assets/03_About_05.png) no-repeat
}
.img3:hover{
  background: url(./assets/05_Contact_03.png) no-repeat
}
// 选中后激活后的图片
.router-link-exact-active > .img1{
  background: url(./assets/02_Home_03.png) no-repeat
}
.router-link-exact-active > .img2{
  background: url(./assets/03_About_05.png) no-repeat
}
.router-link-exact-active > .img3{
  background: url(./assets/05_Contact_03.png) no-repeat
}

elment-ui 默认下划线设置

找到.el-menu.el-menu--horizontal类进行设置便可

//取消下划线
.el-menu.el-menu--horizontal{
  border:none !important;
}

关于引入组件的命名

组件的命名不要和关键字以及elemen-ui的关键词冲突，比如footer header等，如需设置，可以首字母大写，反正只要不冲突就行

 <script>
import content from '../components/Contact_content.vue'
import Footer from '../components/Home_footer.vue'
export default {
  components: {
    'Content': content,
    'Footer': Footer
  }
}
</script>