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 帮你做了。