vue拆分js文件_Vue管理系统前端之组件拆分封装详解

组件封装

在上一篇记录中，首页中有太多的代码，为了避免代码的臃肿，需要对主要的功能模块拆分，来让代码看起来更简洁，且能进行复用。

拆分后还加了些小功能，加入了修改 title 的代码，修改方式参考vue 动态修改 title。

还增加了当前请求的页面缓存，使用状态管理器处理。监听路由，保存到 state 中，来处理的。 如何监听可参考vue 计算属性和监听属性。

完整效果图如下：

首页布局拆分后结构

拆分后的，布局结构图：

拆分后代码

布局最外层 index 代码，使用头部，侧边栏，主内容栏组成，代码如下：

import LHeader from './components/header'

import LAside from './components/aside'

import LMain from './components/main'

export default {

data() {

return {}

},

//引入组件

components: {

LHeader,

LAside,

LMain,

},

}

头部 index.vue 代码:

首页

使用文档

GitHub

{ { $store.getters.userInfo.username }}

首页

我的主页

登出

import screenfull from 'screenfull'

import hamburger from './hamburger'

import logo from './logo'

// import { mapState } from 'vuex'

export default {

data() {

return {}

},

computed: {

// ...mapState({

// isCollapse: (state) => state.app.isCollapse,

// }),

},

//引入组件

components: {

hamburger,

logo,

},

// 方法

methods: {

openUrl(url) {

window.open(url)

},

loginOut() {

this.$confirm('确认退出吗?', '提示', {

type: 'warning',

})

.then(() => {

this.$store.commit('logout')

})

.catch(() => {})

},

toggleFull() {

if (!screenfull.isEnabled) {

this.$message({

type: 'warning',

message: 'you browser can not work