Vue 门户网站案例实战🐚

项目创建与启动

项目创建

1. 在需要的位置创文件夹，文件夹右键，进入vscode。
2. 在终端中运行vue create 项目名称
3. 选取配置，自定义，选择babel、router和使用配置文件，回车即可

配置element-ui

安装npm i element-ui -S
我按需引入的时候忘记配置，所以报下面的错
element-ui按需引入报错 Error: Cannot find module ‘babel-preset-es2015’

解决方法一

npm install babel-plugin-component -D

然后，将\node_modules*babel-plugin-dynamic-import-node*.babelrc中的内容替换成官方文档中的内容

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

解决方法二

直接在 babel.config.js 中添加即可：

module.exports = {
  presets: [
    '@vue/app'
  ],
  //以下是添加的内容
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
  //以上是添加内容
}

终于启动了，然后路由又报错了
Cannot read property ‘matched’ of undefined”
原因在于引入element的时候，粘贴了如下代码，而这个里面的需要加router

new Vue({
  el: '#app',
  render: h => h(App)
});

因为默认的项目模板中有传值的案例，所以分析一下组件之间的传值，以下是示例页面。

父子组件之间传参

父组件中放了子组件的传参

app.vue是根组件，由这个组件定义哪个路径可以到哪个组件页面

这个方法适用于在父组件中放了一个子组件的例子，比如在home.vue中放了一个<HelloWorld/> <HelloWorld> 子组件

app.vue根组件
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> //nav中的链接home到home组件
      <router-link to="/about">About</router-link> //about到about组件   
    </div>
    <router-view/>
  </div>
</template>

home.vue父组件
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> 
    //home组件中插入了一个子组件helloword，传递了一个msg
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue' //先导入子组件
export default {
  name: 'Home',
  components: {
    HelloWorld //这里定义了子组件
  }
}
</script>

helloworld.vue子组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
         //然后就可以使用
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String   //子组件里面先在这里接收
  }
}
</script>

如何进行父子组件传参

父组件中

//v-for循环的时候，定义了index
<el-menu
v-for="(item,index) in positionlist"
:key='index'
default-active="0"
@select='choose'
  class="width">
//所以只需要在点击的时候，把index传给函数，并在函数中将index保存到data中即可，这里定义为了selectedindex
<el-menu-item>
<span slot="title">
  <router-link to="/position" @click.native="logindex(index)">{{item.position}}</router-link>
</span>
</el-menu-item>
 </el-menu>
//需要显示的地方，放上路由组件的router-link，然后通过index把需要显示的那个传过去即可。
<el-col :span='18'>
<router-view :positionlist='positionlist[selectedindex]'></router-view>
</el-col>
<script>
export default {
    data(){
        return{
        selectedindex:0,
        }
    }
}
  </script>

子组件中

<div>
  <div class="joinuscontent">
    <h6>{{positionlist.dutytitle}}</h6>
    <p>{{positionlist.duty}}</p>
    <h6>{{positionlist.treatitle}}</h6>
    <p>{{positionlist.treatment}}</p>
</div>
<script>
export default {
    props: {
    positionlist: {
                type: Object,
                required: true
            },
        },
}
  </script>

this.$router.push()和路由跳转同时传递参数

//传参的格式都是一样的
{path: '/next',query: {title: this.tag,src: this.src}}
//要跳转的下一个界面
//用query传递参数，参数不会丢失，如果用params传参，参数会丢失
//可以把对象写在data中，如何把名字绑定给路由即可
//用this.$router.push()传参
<script>
go() {
        this.$router.push({
          path: '/next',//要跳转的下一个界面
          name: 'next',
          query: {//用query传递参数，参数不会丢失，如果用params传参，参数会丢失
            title: this.tag,
            src: this.src
          }
        })
      },
</script>
//用<router-link>传参
<router-link :to="{path: '/next',query: {title: this.tag,src: this.src}}"></router-link>

动态路由

首先在router中的index.js中配置

 {
    path:'/solution/:index',
    name:'solution',
    component: () => import(/* webpackChunkName: "about" */ '../views/solution.vue')
  },
//:冒号代表动态路由

然后可以在你需要添加动态路由的地方进行配置

<div v-for='(item,index) in solutioncontent' :key='index' :id='item.id' class="nav-row">
  <img :src="item.iconPath" alt="" class="iconsize">
  <router-link :to="{path:'/solution/'+item.id,query:{slocont:solutioncontent[index]}}">{{item.title}}</router-link> //重要的是这一行
</div>

获取路由的动态路径参数

this.$route.params.id  //id换成动态路径的名称

如何使用less

安装less，安装后需要重启项目

//下载less和less-loader即可，lessloader版本过高可能报错
//安装less
npm i less --save-dev
//安装less-loader 版本太高则可以指定版本
npm install less-loader@4.1.0 --save

卸载less

npm uninstall less
npm uninstall less-loader

使用bootstrap框架

引入一下他的样式

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

项目文件夹中使用npm安装一下，就可以使用bootstrap的组件了。

npm install bootstrap@3

button的五种状态

a:link{color:#fff}  //未访问时的状态（鼠标点击前显示的状态）
a:hover{color:#fff}  //鼠标悬停时的状态
a:visited{color:#fff}  //已访问过的状态（鼠标点击后的状态）
a:active{color:#fff}  //鼠标点击时的状态
a:focus{color:#fff}  //点击后鼠标移开保持鼠标点击时的状态[获得焦点]（只有在<a href="#"></a>时标签中有效）

轮播图按照不同尺寸改变高度

1.在data中定义一个值记录屏幕尺寸

data(){
    return{
         screenWidth: null,  //屏幕尺寸
    }
}

2.页面获取屏幕尺寸的值

mounted () {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {   //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  }

3.如果要根据屏幕尺寸大小做操作的时候就用watch监听

watch: {
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 1550) {
          console.log('屏幕宽度小于1550px')
        } else {
          console.log('屏幕宽度大于1550px')
        }
      },
      immediate: true
    },
  }

导航栏滚动到一定高度加上白色背景色

    $(function() {
        $(".nav2").hide();  //首先隐藏变异的导航栏
        $(window).scroll(function() {
            if($(document).scrollTop() >= 200) {
                $(".nav2").addClass("fixnav").slideDown(); 
        //高度大于200 则添加样式， slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。
            } else {
                $(".nav2").hide();
            }
        })
    })

因为我的导航栏布局都一样，只是过一定高度需要加个白色背景色及阴影。稍微修改一下，通过添加和去除class来操控。

    $(function() {
        $(window).scroll(function() {
            if($(document).scrollTop() >= 766) {
          $(".nav").addClass("navafter");
            }
      else {
                $(".nav").removeClass("navafter");
            }
        })
    })

补充知识：如何获取当前高度

获取浏览器显示区域（可视区域）的高度 ：   
$(window).height();   
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();   
获取页面的文档高度   
$(document).height();   
获取页面的文档宽度 ：
$(document).width(); 
浏览器当前窗口文档body的高度：  
$(document.body).height();
浏览器当前窗口文档body的宽度： 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)  
$(document).scrollTop();   
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft(); 
获取或设置元素的宽度：
$(obj).width();
获取或设置元素的高度：
$(obj).height();
某个元素的上边界到body最顶部的距离：obj.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：obj.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：obj.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：obj.offset().left（在元素的包含元素含滚动条的情况下）
//滚动时触发函数
$(window).scroll(function () {})

vue $watch监听属性之 监听函数 handler() 以及 immediate:true立即执行

  watch:{
    // 轮播图高度的自适应
    screenWidth: {
      handler: function (val, oldVal) {
        if (val < 769) {
          this.bannerheight='315px'

        } else if(val < 993){
          this.bannerheight='419px'

        } else if(val < 1201){
          this.bannerheight= '542px'

        }else if(val < 1441){
          this.bannerheight= '766px'

        }else{
          this.bannerheight= '1020px'

        }
        // console.log(this.bannerheight);
      },

      immediate: true
    },
    // 滚动的时候，获取当前的高度
    // 如果高度超过轮播图高度，则把样式切换
  },

在接收到到数据中进行换行

最后用的是css的方法，后台传过来的数据一般有默认的/n换行符，如果是从父组件传过来的，那么需要在每个换行的地方手动加上\n

  <div class="joinuscontent">
    <h6>{{positionlist.dutytitle}}</h6>
    <p>{{positionlist.duty}}</p>
    <h6>{{positionlist.treatitle}}</h6>
    <p>{{positionlist.treatment}}</p>

</div>

<style>
.joinuscontent{
    padding: 40px;
    white-space: pre-wrap;
}
</style>

js的方法，但是没有成功

<script>
export default {
    created(){
        this.addbr()
    },
    methods:{
        // 添加换行符,这里的意思把\n通过全局搜索(/g),全部转换为"<br/>"
        addbr(){
            this.positionlist.duty.replace(/\n/g, "<br/>")
        }
    }
}
</script>

如何修改element默认样式

方法一

//改不了只能在需要改样式的地方用!important覆盖掉

方法二

使用样式穿透，在控制台里面找到元素的默认样式，复制到代码中，在中间加上/deep/即可
<style scoped>
    .my .el-input__inner{
        border-radius: 30px;/* 这个不起作用 */
    }
    .my /deep/ .el-input__inner{
        border-radius: 30px;/* 这个起作用 */
    }
</style>

vue中使用本地json

import导入即可

//示例
<script>
import jsondata from '../../public/data.json'
//注意如果json中使用静态资源，比如本地图片路径，如果vue-cli版本高于3.0，则需要把资源放到public文件夹中，如果低于3.0，则需要把资源放到static文件夹中。

data(){
    return{
    customers:[] //这个就可以用了
}
}

created(){
this.customers=jsondata.customers
console.log(this.customers);
},
 </script>

循环生成的列表中使用多选框