当前位置:   article > 正文

初学vue-cli3.0+webpack+vue-router+elementUI后简单响应式静态页面的编写_用vue.js框架搭建一个电商静态网页

用vue.js框架搭建一个电商静态网页

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

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

效果预览 https://saberla.github.io/vuePracticeDemo/dist/#/
项目目录结构

在这里插入图片描述
 
 

遇到的问题

elemenUI的引入与使用
  • 起手安装element-ui
npm i element-ui -S
  • 1

运行命令后会发现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
  • 1
  • 2

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

 
 

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

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

  • object-fit https://blog.csdn.net/qq_39830654/article/details/80858117
  • backbackground-size https://www.cnblogs.com/jihua/p/backimagesize.html
  • js https://blog.csdn.net/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>
  • 1
  • 2
  • 3
  • 4
  • 5

CSS

.img>img{
    width: 85%;
    height: auto;
}
  • 1
  • 2
  • 3
  • 4

效果
在这里插入图片描述
在这里插入图片描述
原理也很简单,通过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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39

 
 

elment-ui 默认下划线设置

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

//取消下划线
.el-menu.el-menu--horizontal{
  border:none !important;
}
  • 1
  • 2
  • 3
  • 4

 
 

关于引入组件的命名

组件的命名不要和关键字以及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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 
 

关于display和position、float的混用问题

这个问题博主之前的文章有过详细的讲解,得熟练掌握,不要弄混,要不达不到预期的效果
问题详解

 
 

关于elemen-ui的问题

elemen-ui是基于 Vue 2.0 的桌面端组件库,确实能使我们的开发方便快捷很多,但是它仍存在一些问题:

  • 没有像Bootstrap那样强大的响应式导航标题,得自己去实现这个效果
  • input组件的宽度高度设置问题

element-ui的input组件设置大小可通过size参数来进行设置,但是它改变的是整体的大小,如果需要单独设置宽高就需要借助类啦,这其中博主遇到一些问题并进行了解决

1. 通过默认类.el-input__inner设置样式失效的问题

关于这个问题着实有点难受,因为F12查看样式所在的类,确实一定是在这个类中啊,但是遇到的情况就是,无论你在这里面设置什么样式,去网页一看,没有任何变化,参数也未变,通过万能的搜索引擎,终于找到了原因:

文件的style加scoped会导致这个情况,因为el的元素是没有data-v-xxx的,所以设置的样式不会生效。

解决办法:

  1. 去掉scoped,但是根据scoped的功能可以知道,这样会污染全局的样式
  2. 自己在el-input中设置一个新类,通过它来改变样式,但是经过博主亲测,这样不能设置输入框的高度字体等,只能设置宽度和边距
  3. 去掉scoped,给每个需要操作的元素外层套一个div,设置类名,通过子代选择器来设置样式,但是会多很多无用的代码。

以上就是博主所想到的关于这个问题的解决方法,都没有完美的解决这个问题,感觉element-ui在这个上面还有待完善,如果有更好的解决办法,麻烦在评论下方或联系博主告知,谢谢。

2.element-ui文本域高度设置问题

目前博主并没有找到能直接设置文本域高度的方法,唯一能用的设置文本域高度的办法就是文本域自带的:autosize="{minRows:7}",通过最小行数来设置初始高度。

 
 
本次关于项目的总结就到此啦,通过本次小实践,博主还是深深的感觉到了vue组件化和脚手架以及webpack的实用好用性,使整个项目看起来清晰明了,不再像之前那样有点混乱,开发很便捷

关于上面提到的内容,若有问题,欢迎联系博主解决

加油

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/190932
推荐阅读
相关标签
  

闽ICP备14008679号