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

博主之前出去耍了几天，回来为了复习巩固前一段时间所学的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

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

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>

 
 

关于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的实用好用性，使整个项目看起来清晰明了，不再像之前那样有点混乱，开发很便捷

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

加油