Vue 项目流程理解

main.js

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

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    router: Router
});
  • 前三行导入设置应用程序所需的模块。

  • el告诉它绑定到index.html页面中定义的#app元素

  • template和components:告诉Vue,您希望用App.vue中定义的App组件填充index.html中的#app元素。

router.js

该文件用于初始化Vue路由器,并定义以什么URL显示哪些组件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import PageA from './Pages/PageA.vue';
import PageB from './Pages/PageB.vue';

const routes = [
    { path: '/', component: PageA },
    { path: '/pagea', component: PageA },
    { path: '/pageb', component: PageB },
]

Vue.use(VueRouter);
const router = new VueRouter({ mode: 'history', routes: routes });
export default router;

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×