当前环境
已存在 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>
反正最后出来是这样滴
只是将官方的栗子改了改;剩下的功能自己探索喽,加油~