Vue main.js各種寫法和含義
遇到的main.js的三種寫法:
第一種:
通過webpack 初始化的項目
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
el:'#app'
,意思是將所有視圖放在id值爲app這個dom元素中
components:表明引入的文件
這裏的意思是將App.vue放到#app中,然後以<App/>來指代我們的#app。
第二種:
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import store from './store/'
import {routerMode} from './config/env'
Vue.use(VueRouter)
new Vue({
router,
store,
}).$mount('#app')
這裏的意思是加載一#app爲名字的節點,而在這裏這個app名字的節點是在index.html文件中。
第三種
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import store from './store'
Vue.config.productionTip = false
Vue.use(VueRouter);
// 引入Mint-ui
Vue.use(MintUI)
// 消除點擊延遲
const FastClick = require('fastclick')
FastClick.attach(document.body)
// done
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
這裏的h 代表的是 hyperscript 。縮寫爲 h 是因爲它更容易去輸入。可以認爲它是 createElement
的縮寫。原本那位 return h(App);
通過使用 ES6 縮短爲:render: h => h (App)
。
關鍵點
main.js 與index.html的關聯
Webpack 會在每次打包後將 entry 文件的路徑寫入這個模板指定的位置並生成一個新的 index.html 放到 dist 目錄(這個行爲本身是在 Webpack 配置中定義的,不是 Webpack 的默認行爲)。實際上 main.js 也是關聯了 index.html 的,只不過這個關聯 Webpack 幫你做了。