首页技术文章正文

Web前端培训：创建main.js文件编写逻辑入口

更新时间:2022年10月28日10时38分来源:传智教育浏览次数:

好口碑IT培训

　　我们首先创建一个main.js文件，作为逻辑入口，主要用来初始化Vue实例并加载需要的插件及各种公共组件，如vue-router、mui、App.vue等。具体代码如下：

import Vue from 'vue'
import app from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router.js'   // 将路由放到单独的文件中
import './lib/mui/css/mui.css'
new Vue({
    el: '#app'
    render: c => c(app),
    router
})

　　上述代码中，第1行引入vue.js(在之前步骤中已经在webpack.config.js文件中配置了路径);第2行引入App.vue组件，该组件将在后面实现;第3行导入vue-router.js路由包;第4行安装vue-router路由模块;第5行导入外部router.js文件，并在第10行中挂载到Vue实例上;第7～11行初始化Vue实例，第8行将el挂载到index.html文件的div id="app"，第9行使用render函数渲染App.vue组件，第10行将router.js文件中导出的router对象注册到Vue实例上，用来监听URL地址的变化，然后展示对应的组件。

上一篇：Vue动态组件渲染是怎么实现的? 下一篇：ES6中let关键词有哪些新特性？