iview小试牛刀-优快云博客

本文分享了一位后台开发者初次接触Vue.js和iView的经历，详细记录了从环境搭建到实现基本布局的过程，包括使用npm、理解ES5与ES6语法、解决引入组件库等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js v2.5.21

iview version 3.5.6

搞了好几天iview，终于有所收获了。

本人是后台开发者，最近心血来潮，想弄弄前端的东西，看到vue这么漂亮，于是想尝试弄下它。毕间不是专业做前端的，一开始有点费劲。比如说 npm了，JS里import，es5，es6之什么的，刚开始着实有点头大。可能是官网的文档不太好吧，直接复制官网的代码，竟然不行，哎。也有可能是毕人想着快速入手，没有一步一步的来学习的缘故吧。经过两个下午的学习，现在算是有点入门了吧。

刚开始近展不太顺利，都是坑，想着弄nodejs那一套东西了，像是webpack了，新鲜玩意，一时半会的弄不好。还好最后直接引入js文件，一点点的踩坑，做出来个简单的样子来。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iview example</title>
<link rel="stylesheet" type="text/css" href="./bower_components/iview/dist/styles/iview.css">
<script type="text/javascript" src="./bower_components/vue/dist/vue.js"></script>
<script type="text/javascript" src="./bower_components/iview/dist/iview.js"></script>

<style>

.ivu-layout-header {
    background: #2b85e4;
    padding: 0 50px;
    height: 64px;
    line-height: 64px;
}
.ivu-layout-sider{
	background: #909399;
}
.ivu-layout-sider-children {
    height: 100%;
    padding-top: .1px;
    margin-top: -.1px;
}

.ivu-layout-footer {
    background: #2b85e4;
    padding: 24px 50px;
    color: #515a6e;
    font-size: 14px;
}

</style>
</head>

<body>
<div id="app">
	<Layout>
        <i-Header>Header</i-Header>
        <Layout>
            <Sider hide-trigger><Tree @on-select-change="test" :data="data1"></Tree></Sider>
            <i-Content>   
            	<Tabs :animated="false" type="card" closable :value="activeTab" @on-tab-remove="handleTabRemove">
			        <tab-pane :name="tab['name']"  v-if="tab['show']" v-for="tab in tabs" :label="'标签' + tab['name']">内容{{ tab["name"] }}</tab-pane>
			        <!-- <tab-pane v-for="tab in tabs" :key="tab" :label="'标签' + tab">标签{{ tab }}</tab-pane> -->
			    </Tabs>
			</i-Content>
        </Layout>
        <i-Footer>i-Footer </i-Footer>
    </Layout>
 </div>
<script>
    new Vue({
        el: '#app',
        data: {
        	activeTab:"",
        	tabs:[],
        	name1: true,
        	data1: [
                    {
                        title: 'parent 1',
                        expand: true,
                        children: [
                            {
                                title: 'parent 1-1',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-1-1'
                                    },
                                    {
                                        title: 'leaf 1-1-2'
                                    }
                                ]
                            },
                            {
                                title: 'parent 1-2',
                                expand: true,
                                children: [
                                    {
                                        title: 'leaf 1-2-1'
                                    },
                                    {
                                        title: 'leaf 1-2-2'
                                    }
                                ]
                            }
                        ]
                    }
                ]
        },
        methods: {
        	test:function(array, object){
        		this.tabs.push({"name":object["title"], "show":true});
        		this.activeTab = object["title"];
        		console.log(array);
        		console.log(object);
        	},
        	 handleTabRemove (name) {
        		for(var i = 0;i< this.tabs.length;i++){
        			if(this.tabs[i]["name"] == name){
        				this.tabs[i]["show"] = false;
        			}
        		}
            }        	
        }
    })
  </script>
</body>
 </html>

都是官网上的，一边复制，一边踩坑。

转载于:https://my.oschina.net/hnzmdpan/blog/2995651