前提:
搭建好npm或者cnpm環(huán)境箍鼓、node.js環(huán)境、vue-cli環(huán)境和掌握webpack呵曹。
詳情見(jiàn)上一篇:http://www.reibang.com/p/30987078f327
先看看效果圖:
image.png
- 第一步 新建一個(gè)webpack模板的Vue架構(gòu)項(xiàng)目并用vs code打開(kāi)款咖。
image.png
終端輸入cnpm run dev檢查有沒(méi)有問(wèn)題:
image.png - 第二步 安裝iView
終端輸入cnpm install iview --save
打開(kāi)main.js導(dǎo)入包并使用:
image.png
新增語(yǔ)句:
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
- 第三步 清除項(xiàng)目原有代碼并且新建Test01.vue
1.把App.vue里面的全局樣式刪除掉，刪除以下代碼:
<img src="./assets/logo.png">
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.在src目錄下新建一個(gè)views文件夾奄喂，然后新建Test01.vue铐殃。
image.png
3.登錄iview官網(wǎng)選擇布局或者組件，并且復(fù)制代碼跨新，粘貼到Test01.vue上面富腊。
Test01.vue:
<style scoped>
.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;
}
</style>
<template>
<div class="layout">
<Layout>
<Header>
<Menu mode="horizontal" theme="dark" active-name="1">
<div class="layout-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 hide-trigger :style="{background: '#fff'}">
<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-navigate"></Icon>
Item 1
</template>
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
<MenuItem name="1-3">Option 3</MenuItem>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-keypad"></Icon>
Item 2
</template>
<MenuItem name="2-1">Option 1</MenuItem>
<MenuItem name="2-2">Option 2</MenuItem>
</Submenu>
<Submenu name="3">
<template slot="title">
<Icon type="ios-analytics"></Icon>
Item 3
</template>
<MenuItem name="3-1">Option 1</MenuItem>
<MenuItem name="3-2">Option 2</MenuItem>
</Submenu>
</Menu>
</Sider>
<Layout :style="{padding: '0 24px 24px'}">
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem>Home</BreadcrumbItem>
<BreadcrumbItem>Components</BreadcrumbItem>
<BreadcrumbItem>Layout</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
Content
</Content>
</Layout>
</Layout>
</Layout>
</div>
</template>
<script>
export default {
}
</script>
4.修改router文件夾里面的index.js文件。
index.js可以設(shè)置web的首頁(yè)域帐，原來(lái)是指向HelloWorld.vue文件的赘被，現(xiàn)在改成Test01.vue文件。
index.js:
import Vue from 'vue'
import Router from 'vue-router'
import Test01 from '@/views/Test01'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Test01',
component: Test01
}
]
})
5.CTRL+S保存后肖揣，終端輸入cnpm run dev
報(bào)錯(cuò)一:Parsing error: x-invalid-end-tag
解決方法:.eslintrc.js 的 rules 加上"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
報(bào)錯(cuò)二:Expected indentation of 0 spaces but found 4
解決方法:把build文件夾中的webpack.base.conf.js里面43行的...(config.dev.useEslint ? [createLintingRule()] : []),注釋掉即可民假。
6.保存后cnpm run dev
image.png
