vue-cli3项目(零基础)

本项目零基础应该都能看得懂，
本项目主要是如何在vue中实现页面的布局，
以及实现简单的vue组件复用

本零基础项目的预期目标是完成如下页面

简单的页面布局
简单的组件复用实现点击左面的菜单项，右下部分可以显示对应文字
简单的很，也朴素的很

因为是零基础，
对于创建vue-cli3项目还不了解的可以参照下一行的链接
https://blog.csdn.net/HelloACM_ICPC/article/details/103130633

本项目演示所用编辑器为WebStorm
用WebStorm打开一个新建项目
可以看到以下文件目录

其中，一般而言
public所放置的是一些不会改变的文件，
assets要放置的是一些要变动的文件，
两者在一定程度上是可以通用的

views内包含的为页面组件，以最终显示为主
components包含的则更像是零部件，这些零部件可在views中进行整合
于是，
和页面相关的文件就放在views里面，
和零部件相关的文件就放在components里面

对于首页，可以直接使用App.vue进行编写
本项目采取自定义一个首页来进行编写项目
首先找到views

右击创建一个名为First的vue文件，名字是随意的
由项目预期可以看出，
布局主要分为两部分，首先分左右，然后右面再分上下
关于布局直接在新建的First.vue中用div实现即可

对于图片，
可以在public下新建一个名为img的文件夹，
用来存放所需图片

然后就可以在名为top的div中，添加图片了

该图片为该项目所引用图片

既然已经添加了图片，就要能够显示出来
所以就需要更改一下设置来显示一下当前页面
需要修改一下router
打开router
首先通过import在代码行开头进行引入First.vue

import First from '../views/First.vue'

然后将routers内的component改为First
编辑后的代码如图所示

然后切换到cmd命令窗口，
进入到新建项目所在文件夹中，
然后输入以下命令

npm run serve

服务器启动之后，
在浏览器粘贴一下出现的Local地址
可看到以下界面

页面中上部的home和about两个单词，可以打开App.vue，将如下代码删除即可

在First.vue的style里进行样式的设定
首先将页面所有的内边距外边距设置为零，将浏览器自带的渲染清除掉

*{
        padding: 0;
        margin: 0;
}

分左右设置各个的样式，然后再总体的设置样式，以便整体能够居中显示

.left{
    width: 200px;
    height: 410px;
    float: left;
}
.right{
    width: 1000px;
    height: 410px;
    float: left;
}
.main{
    width: 1200px;
    margin: 50px auto;
}

接下来需要对图片进行大小设置，以便于界面的美观

.top img{
        height: 300px;
        width: 1000px;
    }

接下来设置下背景色

.left, .right{
        background-color: lightskyblue;
    }

接下来对左部的菜单栏进行设置
在components中新建一个名为Left的vue文件，
作为设置左部分的组件

<template>
    <div>
        <div class = "title">测试</div>
        <ul class = "menu">
            <li>测试一</li>
            <li>测试二</li>
            <li>测试三</li>
        </ul>
    </div>
</template>

然后就需要将Left部件加入到页面组件
需要在First.vue中实现注册
在First.vue的script部分中添加如下代码实现注册

<script>
   import Left from '../components/Left.vue'
    export default{
       components:{
           Left
       }
    }
</script>

然后在left的div部分中直接引用即可

引用完成后即可在页面中看到效果
接下来在Left.vue的style进行样式的设定

*{
    padding: 0;
    margin: 0;
}
.title{
    width: 200px;
    line-height: 100px;
    color: darkviolet;
}
.menu li{
    list-style: none;
    width: 200px;
    line-height: 100px;
    margin-bottom: 3px;
    float: left;
    color: blueviolet;
    background-color: cyan;
    cursor: pointer;
}

接下来实现右边部分的文字切换
因为如果按照左边是菜单一个对应一个vue的话，肯定是费时费力的
这里介绍一下组件复用
即用一个模板通过替换数据来完成多个相似的部分
组件传值就可以
这就需要创建一个事件总线，
作用就好像是全局变量
在components下创建一个msg.js的文件

在里面敲两行模板代码

import Vue from 'vue'
export default new Vue

再回到First.vue中
创建组件进行组件复用
在components中创建Right.vue
继续在First.vue的script部分中完成组件的注册

进行组件引用

接下来要做的就是单击左面的菜单，右面能相应切换
在Left.vue的li标签基础上添加click响应事件

继续写script代码，用来对所传的值进行定义

<script>
    import Msg from "./msg.js"
    export default {
        methods:{
            menu1:function(){
                Msg.$emit("val", "1");
            },
            menu2:function(){
                Msg.$emit("val", "2");
            },
            menu3:function(){
                Msg.$emit("val", "3");
            }
        }
    }
</script>

接下来在Right.vue中，
实现所传值的接收，
定义一个getAns用来接收所传的值

<script>
    import Msg from "./msg.js"
    export default {
        data(){
            return {
                getAns : 0
            }
        },
        mounted : function(){
            var obj = this
            Msg.$on('val', function(m){
                obj.getAns = m;
            })
        }
    }
</script>

通过v-if判断来实现右边文字的切换

<template>
    <div class = "response">
        <div v-if="getAns==1">
            测试一
        </div>
        <div v-if="getAns==2">
            测试二
        </div>
        <div v-if="getAns==3">
            测试三
        </div>
    </div>
</template>

可以对切换所显示的文字在style里进行样式设置

.response{
    color: blue;
    font-size: 30px;
}

至此，就可以显示文章开头所预期的页面

该零基础项目至此完成，

如有不足，

多多指教。