vue项目搭建过程

1.安装对应的框架 - iview

npm install view-design --save

main.js


import ViewUI from 'view-design'
import 'view-design/dist/styles/iview.css'

Vue.use(ViewUI)

2.删除不需要的页面，比如：HelloWorld.vue   About.vue ，需要删除对应的引用

3.在App.vue  删除不需要的组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
  html, body, #app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

4.在components中新建菜单栏组件 navLayout 

<template>
  <div class="layout">
    <Layout style="height: 100%;">
      <Sider 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>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu" size="24"></Icon>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
          <router-view ref="childrenmode"></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
export default {
  name: 'navLayout',
  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>

<style scoped>
  .layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
    height: 100%;

  }
  .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;
  }
</style>

5.在router/index.js中引入，并且修改路径

import Vue from 'vue'
import VueRouter from 'vue-router'
import navLayout from '../components/navLayout'

Vue.use(VueRouter)

const routes = [
  {
    path: '/nav',
    name: 'navLayout',
    component: navLayout,
    children: [
      {
        path: '/home',
        name: '首页',
        component: resolve => require(['@/views/Home'], resolve)
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

6.在项目里新建vue.config.js，路径如图

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  },
  // 基本路径
  publicPath: "./",
  // 放置静态资源的目录
  assetsDir: "static",
  lintOnSave: true,
  devServer: {
    open: true, // 是否自动弹出浏览器界面
    port: 8080, // 端口号
    https: false, //通过 HTTP 提供服务
    hotOnly: false, // 启用热模块更换（请参阅devServer.hot服务器)如果生成失败，没有页面刷新作为回退。
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    //后端服务
    proxy: {
      '/api': {
        target: 'http://xxxx1:xxx/', //测试网址1
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          "^/api": ""
        }
      },
      '/foo': {
        target: 'http://xxxx2:xxx/', //测试网址2
        changeOrigin: true,
        secure: false,