前提:
搭建好npm或者cnpm环境、node.js环境、vue-cli环境和掌握webpack。
详情见上一篇:https://www.jianshu.com/p/30987078f327
先看看效果图:
image.png
- 第一步 新建一个webpack模板的Vue架构项目并用vs code打开。
image.png
终端输入cnpm run dev检查有没有问题:
image.png - 第二步 安装iView
终端输入cnpm install iview --save
打开main.js导入包并使用:
image.png
新增语句:
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
- 第三步 清除项目原有代码并且新建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目录下新建一个views文件夹，然后新建Test01.vue。
image.png
3.登录iview官网选择布局或者组件，并且复制代码，粘贴到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可以设置web的首页，原来是指向HelloWorld.vue文件的，现在改成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
报错一:Parsing error: x-invalid-end-tag
解决方法:.eslintrc.js 的 rules 加上"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
报错二:Expected indentation of 0 spaces but found 4
解决方法:把build文件夹中的webpack.base.conf.js里面43行的...(config.dev.useEslint ? [createLintingRule()] : []),注释掉即可。
6.保存后cnpm run dev
image.png
