vue cli4项目目录结构(操作后)
项目配置
路径别名配置
新建一个vue.config.js文件
module.exports = {
configureWebpack: {
resolve: {
alias: {
'components': '@/components',
'content': 'components/content',
'common': 'components/common',
'assets': '@/assets',
'network': '@/network',
'views': '@/views',
}
}
}
}
底部导航栏组件编写
文件夹目录src/components/common/tabbar/TabBar.vue
<template>
<div class="tab-bar">
<slot></slot>
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style scoped>
.tab-bar {
/* 本身的样式 */
background-color: #f6f6f6;
height: 49px;
border-top: 1px solid #eee;
box-shadow: 0px -1px 1px rgba