用iView快速搭建一个网页 day2

前提:

搭建好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