首頁(yè)技術(shù)文章正文

Web前端培訓(xùn)：創(chuàng)建main.js文件編寫(xiě)邏輯入口

更新時(shí)間:2022年10月28日10時(shí)38分來(lái)源:傳智教育瀏覽次數(shù):

好口碑IT培訓(xùn)

　　我們首先創(chuàng)建一個(gè)main.js文件，作為邏輯入口，主要用來(lái)初始化Vue實(shí)例并加載需要的插件及各種公共組件，如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'   // 將路由放到單獨(dú)的文件中
import './lib/mui/css/mui.css'
new Vue({
    el: '#app'
    render: c => c(app),
    router
})

　　上述代碼中，第1行引入vue.js(在之前步驟中已經(jīng)在webpack.config.js文件中配置了路徑);第2行引入App.vue組件，該組件將在后面實(shí)現(xiàn);第3行導(dǎo)入vue-router.js路由包;第4行安裝vue-router路由模塊;第5行導(dǎo)入外部router.js文件，并在第10行中掛載到Vue實(shí)例上;第7～11行初始化Vue實(shí)例，第8行將el掛載到index.html文件的div id="app"，第9行使用render函數(shù)渲染App.vue組件，第10行將router.js文件中導(dǎo)出的router對(duì)象注冊(cè)到Vue實(shí)例上，用來(lái)監(jiān)聽(tīng)URL地址的變化，然后展示對(duì)應(yīng)的組件。

上一篇：Vue動(dòng)態(tài)組件渲染是怎么實(shí)現(xiàn)的? 下一篇：ES6中l(wèi)et關(guān)鍵詞有哪些新特性？