Vue

一.脚手架(vue.cli)搭建：

1.`vue-cli`是一个脚手架工具，他们大部分都要依赖两个东西：

- node环境：很多工具的运行环境
- npm：包管理器，用于下载各种第三方库

2.安装node   下载node：https://nodejs.org/zh-cn/

3.验证安装    打开终端，查看node和npm版本，验证是否安装成功:　　node -v　　npm -v

4. 配置源地址

默认情况下，`npm`安装包时会从国外的地址下载，速度很慢，容易导致安装失败，因此需要先配置`npm`的源地址

使用下面的命令更改`npm`的源地址为淘宝源　　npm config set registry http://registry.npm.taobao.org/

更改好了之后，查看源地址是否正确的被更改　　npm config get registry

5. 安装vue-cli

使用下面的命令安装`vue-cli`工具　　npm install -g @vue/cli

安装好之后，检查`vue-cli`是否安装成功　　vue --version

6. vue-cli的使用

在终端中进入某个目录,选择一个目录，该目录将放置你的工程文件夹，在终端中进入该目录

搭建工程，使用`vue-cli`提供的命令搭建工程　　vue create 工程名　　注意：工程名只能出现英文、数字和短横线

7. 创建好项目之后，弹出选择框

 

 *可选择 Router路由  Vuex

 

 

 8. 运行项目

 浏览器打开  http://localhost:8080/  开始项目本地开发

9.打包项目

生成dist文件夹，可上传服务器，打开域名使用

node_modules文件(第三方库文件)不需要上传或者复制给别人，只需要打开终端，运行命令 npm install   会自动加载生成第三方库文件夹node_modules

 二.开发

1.插槽，属性约束

App.vue传入内容,item.vue插槽接收并显示传入的任何东西

App.vue

<template>
  <div id="app">
    <Item :isActive="true">
        asdasdas
    </Item>
  </div>
</template>

<script>
import Item from './components/Item.vue'

export default {
    components:{
        Item
    }
}
</script>

<style scoped>
    #app{
        width: 260px;
        height: 45px;
    }
</style>

Item.vue

<template>
    <div class="item" :class="{active:isActive}">
        <!-- 插槽 -->
        <slot></slot>
    </div>
</template>

<script>
export default{
    // 属性约束
    // props:["isActive"],
    props:{
        isActive:{
            type:Boolean,// 约束该属性的类型boolean,传入其他类型报错,减少开发排错时间
            required:false,// 是否必填
            default:false,// 如果不填默认false
        }
    },
};
</script>

<style scoped>
    .active{
        background: #e7e7e7;
    }
    .item{
        cursor: pointer;
        width: 100%;
        height: 100%;
    }
    .item:hover{
        background: #f4f4f4;
    }
</style>

2.具名插槽

 App.vue

<template>
    <div>
        <div style="width: 250px;">
            <Titlemenu :isActive="select" @active="select = true">
                <!-- 具名插槽 -->
                <template v-slot:title>
                    发现频道
                </template>
                <template v-slot:icon>
                    >
                </template>
            </Titlemenu>
        </div>
    </div>
    
</template>

<script>
import Titlemenu from './components/Titlemenu.vue'

export default {
    components:{
        Titlemenu
    },
    data(){
        return {
            select:false
        }
    }
}
</script>

<style scoped>
    #app{
        width: 260px;
        height: 45px;
    }
</style>

Titlemenu.vue

<template>
    <div class="title-menu">
        <Item :isActive="isActive" @active="$emit('active')">
            <div class="inner">
                <div class="left">
                    <!-- 具名插槽 -->
                    <slot name="title"></slot>
                </div>
                <div class="right">
                    <!-- 具名插槽 -->
                    <slot name="icon"></slot>
                </div>
            </div>
            
        </Item>
    </div>
    
</template>

<script>
    import Item from "./Item"
export default{
    components:{
        Item
    },
    props:{
        isActive:{
            type:Boolean,// 约束该属性的类型boolean,传入其他类型报错,减少开发排错时间
            // required:true,// 是否必填
            default:false,// 如果不填默认false
        }
    }
}
</script>

<style>
    .left{
        float: left;
        color: #212121;
        font-weight: 500;
    }
    .right{
        float: right;
        font-size: 12px;
        color: #999;
    }
    .title-menu{
        width: 100%;
        height: 46px;
        line-height: 46px;
    }
    .inner{
        padding: 0 20px;
    }
</style>

 3.自定义Icon组件

父组件ChannelList.vue

<template>
    <div>
        <div class="channel-list" :style="{height:`${height}px`}">
            <div class="item" v-for="item in channels" :key="item.id" :style="{width:`${100/col}%`}">
                <Channel @active="$emit('active',item.id)" :isActive="item.id === activeId" :data="item"></Channel>
            </div>
        </div>
        
        <div class="coll" @click="isShow = !isShow">
            <span>{{isShow?"收起":"展开"}}</span>
            <!-- 引用自定义Icon组件 -->
            <Icon :type="isShow?'arrowUp':'arrowDown'" eclass="icon"></Icon>
        </div>
    </div>
    
    
</template>

<script>
    import Channel from "/src/components/Channel.vue"
    import ChannelServer from "../api/channel.js"
    import Icon from "./Icon.vue"
export default{
    components:{
        Channel,
        Icon
    },
    props:{
        activeId:{
            type:Number,
            required:true,
        },
        col:{
            type:Number,
            default:2
        }
    },
    computed:{
        height(){
            var rows = 3;
            if(this.isShow){
                rows = Math.ceil(this.channels.length / this.col);
            }
            return rows * 40;
        },
    },
    data(){
        return {
            channels:[],
            isShow:true,
        }
    },
    async created() {
        var datas = await ChannelServer.getCannel();
        // es5数组筛选
        this.channels = datas.filter(function(item){
            return item.name !== '热门';
        })
    }
}
</script>

<style scoped>
    .channel-list{
        overflow: hidden;
        transition: 0.5s;
    }
    .item{
        float: left;
    }
    .coll{
        clear: both;
        height: 40px;
        line-height: 40px;
        text-align: center;
        color:#999;
        font-size: 14px;
        cursor: pointer;
        border-bottom: 1px solid #e7e7e7;
    }
    .icon{
        font-size: 12px;
    }
</style>

子组件Icon.vue

<template>
    <!-- 父组件如果需要直接设置icon样式,传递eclass,不要在父组件直接控制子组件的样式 -->
    <i class="iconfont" :class="[iconClass,eclass]"></i>
</template>

<script>
    var map = {
        arrowUp:"icon-upward",
        arrowDown:"icon-arrow-down",
        arrowSearch:"icon-search",
    };
export default{
    props:{
        type:{
            type:String,
            required:true,
        },
        eclass:{
            type:String,
            default:"",
        }
    },
    computed:{
        iconClass(){
            return map[this.type];
        }
    }
}
</script>

<style scoped>
    /* 引入阿里巴巴矢量图个人图标样式链接 */
    @import "//at.alicdn.com/t/c/font_3685248_a7dgq812656.css"
    
</style>

 4.表单提交

<!-- prevent  阻止表单提交的默认行为 -->
    <form class="search" @submit.prevent="handleSearch()">
        <input />
        <div class="icon" @click="handleSearch">
            <Icon type="arrowSearch"></Icon>
        </div>
    </form>

App.vue

<template>
    <div class="aside">
        <div style="height: 35px;margin-bottom: 15px;">
            <Search @search="handelSearch" placeholder="搜索频道"></Search>
        </div>
        
        <Titlemenu :isActive="activeId === 100" @active="activeId = 100">
            <!-- 具名插槽 -->
            <template v-slot:title>
                发现频道
            </template>
            <template v-slot:icon>
                >
            </template>
        </Titlemenu>
        <ChannelList :col="2" :activeId="activeId" @active="activeId = $event"></ChannelList>
    </div>
</template>

<script>
import Titlemenu from './Titlemenu.vue'
import ChannelList from './ChannelList.vue'
import Search from './Search.vue'

export default {
    components:{
        Titlemenu,
        ChannelList,
        Search
    },
    data(){
        return {
            // select:false,
            activeId:100,
        }
    },
    methods:{
        handelSearch(e){
            console.log(e)
        }
    }
}
</script>

<style scoped>
    .aside{
        width: 100%;
        height: 100%;
        overflow: auto;
    }
</style>

Search.vue

<template>
    <!-- prevent  阻止表单提交的默认行为 -->
    <form class="search" @submit.prevent="handleSearch()">
        <input v-model="searchValue" :placeholder="placeholder" />
        <div class="icon" @click="handleSearch">
            <Icon type="arrowSearch"></Icon>
        </div>
    </form>
</template>

<script>
    import Icon from "./Icon.vue"
export default{
    components:{
        Icon
    },
    props:{
        placeholder:{
            type:String,
            default:"搜索关键字",
        }
    },
    data(){
        return {
            searchValue:""
        }
    },
    methods:{
        handleSearch(){
            if(this.searchValue){
                this.$emit("search",this.searchValue);
            }
        }
    }
}
</script>

<style scoped>
    .search{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 3px;
        border: 1px solid #e7e7e7;
        position: relative;
    }
    .search input{
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        box-sizing: border-box;
        padding: 0 15px;
    }
    .icon{
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

 三.相关知识

1.配置全局变量　　Vue.prototype

Vue.prototype.$httpurl = "http://127.0.0.1";

 

 

 

 ------------------------------------------