Vue+iView结合代码——小白入门

当前环境

已存在 npm
已安装 node （检查版本： node -v）
未全局安装vue-cli（检查是否成功安装 vue --version）

步骤

打开小黑板（ Ctril+R 输入cmd 回车）
小黑板输入内容 “#”号后面都是解释不是输入内容
进入文件夹内（盘的切换直接 “c:”，进盘里的文件 cd+空格+ 文件名 ）

npm install --global vue-cli		#全局安装vue-cli （如果已经安装，就不要在安装了，不然会出错4058，不要问我怎么知道的，都是坑，所以在第一次安装后，以后再用init创建项目的时候就不用安装vue-cli了）

vue init webpack name		#name是自己自定义的文件夹名字。（这里会有漫长的等待）

name #除了第一个Project name 后面输入你的文件名外，其余的直接enter即可，进入等待…

cd name  #进入文件夹内

cnpm install
npm run dev	#运行后自己从浏览器打开网址，有时候会自己默认打开，算了，这不重要

这时候，vue项目就加载完毕了，往下开始引入iview

在src/main.js中
添加三行代码

import iView from 'iview'
import 'iview/dist/styles/iview.css'    // 使用 CSS
Vue.use(iView)

就是这样子

小黑板又来辽~

cnpm install --save iview		#iview的安装

然后就完成辽~

啥？

不会用？

算了，不气不气~

举个栗子

在src/components 里创建一个名字叫 HelloMyProject.vue 的文件

<style scoped>
.layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
}
.menu-icon{
    transition: all .3s;
}
.rotate-icon{
    transform: rotate(-90deg);
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
.ivu-layout{height: 100%}
.ivu-layout-header,.ivu-layout-header>.ivu-menu-dark{background: #66c8d9}
.layout-logo{line-height: 30px;text-align: center;font-weight: bold;background: #fff}
</style>
<template>
  <div class="layout" style="height: 100%">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">LOGO</div>

                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            Item 1
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-keypad"></Icon>
                            Item 2
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-analytics"></Icon>
                            Item 3
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            Item 4
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider brealpoint="md" ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
                    <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses">
                        <MenuItem name="1-1">
                            <Icon type="ios-navigate"></Icon>
                            <span>Option 1</span>
                        </MenuItem>
                        <MenuItem name="1-2">
                            <Icon type="ios-search"></Icon>
                            <span>Option 2</span>
                        </MenuItem>
                        <MenuItem name="1-3">
                            <Icon type="ios-settings"></Icon>
                            <span>Option 3</span>
                        </MenuItem>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 10px',color:'#000',display:'inline-block',cursor: 'pointer'}" type="md-menu" size="24"></Icon>
                        <BreadcrumbItem>Home</BreadcrumbItem>
                        <BreadcrumbItem>Components</BreadcrumbItem>
                        <BreadcrumbItem>Layout</BreadcrumbItem>
                    </Breadcrumb>
                    <Content class="main-content-con" >
                        Content
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
export default {
    data () {
        return {
            isCollapsed: false
        }
    },
    computed: {
        rotateIcon () {
            return [
                'menu-icon',
                this.isCollapsed ? 'rotate-icon' : ''
            ];
        },
        menuitemClasses () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    methods: {
        collapsedSider () {
            this.$refs.side1.toggleCollapse();
        }
    }
}
</script>

在src/App.vue中

<template>
  <div id="app">
    <HelloMyProject></HelloMyProject>
  </div>
</template>
<script>
import HelloMyProject from './components/HelloMyProject'
export default {
  name: 'App',
  components: {
    'HelloMyProject': HelloMyProject
  }
}
</script>
<style>
html,body{width: 100%;height: 100%}
#app{width: 100%;height: 100%}
</style>

反正最后出来是这样滴

只是将官方的栗子改了改；剩下的功能自己探索喽，加油~