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,