現在の環境
NPMは存在
:すでにインストールされたノードは、(ノード-vバージョンを確認してください)
グローバルインストールVUE-CLI(インストールが成功したのVUEの--versionをチェック)ではありません
ステップ
開き、小さな黒板(Ctril + R入力は、cmdと入力します)
「#」の小さな黒板のエントリは、後に数字を入力するよりも解釈される
ディスクスペース+ CD +ファイルにファイルに、:「C」フォルダの切り替え(直接ディスクに名)
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
追加の3行を
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)
それはこのようにある
小さな黒板再び遼〜
cnpm install --save iview #iview的安装
次に、完全遼〜
何?
私は使用しませんか?
まあ、ガスはありません -
栗のために
HelloMyProject.vueと呼ばれるファイルにはsrc /コンポーネントで名前を作成します。
<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>
とにかく、これが出て最後の一滴である
だけで公式栗が変わっ変更するには、自分自身の機能の残りの部分は、給油、自分自身を探求する〜