一个仿公司官网静态PC端vue小项目

鱼啊雨啊鱼
460 阅读3分钟

vuecli新建项目

安装less 和less-loader@6版本

使用normalize.css清除浏览器样式

存放路径：assets/css/normolize.css main.js中引用

eslint组件命名爆红： 新建.eslintrc.js 关闭组件命名规则

"vue/multi-word-component-names":"off",

home首页路由

1、新建home路由，component新建header跟footer公共组件，完成样式布局

image.png

2、完成首页静态内容

3、使用swiper完成首页轮播图功能

遇到的坑：安装版本不对所对应的配置问题

解决方法：安装对应版本

//安装这两个版本
yarn add swiper@4.5.1
yarn add vue-awesome-swiper@3.1.3
//main中全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
//组件中使用，给swiper设置个高度
<swiper class="swiper" :options="options">
      <swiper-slide><img src="@/assets/images/b1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/b3.png" alt="" /></swiper-slide>
      <swiper-slide><img src="@/assets/images/b4.png" alt="" /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
 </swiper>
 
  data() {
    return {
      //配置项例子
      options: {
        loop: true,
        autoplay: {
          //swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
          disableOnInteraction: false,
          // 自动播放时间：毫秒
          delay: 2000,
        },
        //指示器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },

4、为Hearder组件添加切换点击效果，添加Hearder路由跳转页面

1.gif

2.gif

3.gif

ToLian页面

1、完成静态页面，提取新建公共组件IntruduceSchool(点击nav时切换不同内容)

2、实现点击nav切换样式功能

3、准备静态数据，点击nav时将数据传递给IntruduceSchool组件动态显示数据

遇到的问题：

1、接收数据时动态渲染img的src发现路径问题的报错

原因是动态渲染时路径被当作普通字符串，使用require拼接解决

 <img :src="require(`@/assets/images/${item}`)"

4.gif

5.gif

NewsCenter页面

1、完成静态页面

2、准备静态数据，新建NewMsg组件用作文章列表，父子传参渲染数据到NewMsg中

3、查看详情待做

6.gif

ContactUs页面

1、完成了静态页面（地图是一张图片）

8.gif

videocenter页面

1、准备下载好的视频，使用了video.js插件完成视频视频播放功能

9.gif

优化功能

1、解决刷新时，页面停留新闻中中心，nav栏切换样式状态回到首页问题

组件创建时nav值重置为0，所以切换到了首页，在组件created中，通过this.$route.path判断页面地址，给不同地址赋予对应nav值解决

2、最缺陷的问题，因为使用了flex布局和百分比布局，在浏览器窗口发生变化时，布局会全部搞混，而且字体因为统一使用了px，所以盒子宽度高度会自适应，而字体本身却不发生变化，还有图片的宽高度没有设置，所以其它布局自适应的时候，它也不会起到自适应的效果

2.1- 首先我要把所有的图片宽高设置为百分比

先看看现在的自适应状态

12.gif

2.2- 然后把字体进行适配

//安装两个插件
npm i lib-flexible -S   //根据屏幕宽度适应html的fonsize
npm i postcss-px2rem -S //将px转为rem

//main.js中导入依赖
import 'lib-flexible'

//依赖包lib-flexible->flexible.js中修改代码
//在大于540像素情况下，width等于该像素/10达到自适应效果
if (width / dpr > 540) {
     width = width * dpr;
}

//vue.config.js中配置postcss-px
   css: {
    loaderOptions: {
        css: {},
        postcss: {
            plugins: [
                autoprefixer(),
                pxtorem({
                   rootValue: 37.5,  //手机设计稿宽度为375px的
                   propList: ['*'], //属性的选择器，*表示通用
                   exclude: /web/i, //忽略web下的所有文件
                   selectorBlackList: ['.a-'] // 过滤掉.a- 开头的class，不进行rem转换
                }),
            ]
        }
    }
},

看一下配置后的效果，效果明显了很多

13.gif

不过此时的字体大小是都是12px的，我希望750像素以上的屏幕显示的字体大小都是16px的，所以我使用媒体查询解决这个问题

//在App.vue中添加
<style lang="less">
body{
  @media screen and (min-width: 750px){
    font-size: 16px !important;
  }
}

14.gif

记录一下很坑的项目过程，我在github中提交了代码，结果代码丢失了，版本回退解决不了，还是我打包了项目，通过反编译dist文件夹成功把项目代码还原了过来（不过反编译的缺陷太大了，好多代码片段都丢失了）

//新建.bat文件将这个代码放到文件中运行
for %%i in (DIR *.js.map* /B,DIR *.css.map* /B) do reverse-sourcemap -o ./aaa -v %%i
这段代码是循环当前目录，找出`.js.map .css.map` 文件，然后通过 `reverse-sourcemap` 命令进行反编译，反编译出来的文件存放在 *aaa* 文件夹

好了结束了，主要可以练习一些基础的vue操作跟css布局，适合刚接触vue的新手练习

avatar
文章
阅读
粉丝