Vue 组件设计思考

Vue 组件设计思考

我们知道, Vue 是基于 MVVM 设计的一个前端框架, 是数据驱动页面显示的架构. 同时, 它是 Html 的模板引擎, 是 Vue 模板通过翻译器翻译成 Hmtl 语言. 这个 Vue 模板, 也就是组件, 在 Vue 中, 一切皆是组件.

一、路由模块化

在我们分析某一个页面组件结构之前, 我们必须要从 main.js 入口 的 路由 开始. 原因是:

页面的跳转通常都是通过路由 页面的结构少不了 <router-view />

这里除非只用 Vue 做移动 APP, 不用路由做导航.

main.js

简化了不必要的东西

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app'); 

router.js

这里简化了, 可以看到里面路由分模块了, 里面引入 user 模块, user 作为 Home 的子路由.

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const App = () => import('@/App');
const Home = () =>