vue项目入口目录分析

一、main.js文件

入口文件，初始化vue实例并使用需要的插件（引入公共element组件等、路由拦截、start登录、鉴权可以在这里统一处理）

import 'es6-promise/auto'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import filters from '@/filters'

/** Vue.config 是一个对象，包含 Vue 的全局配置 **/

Vue.config.productionTip = false  // 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.filter('num2Alp', filters.num2Alp)

new Vue({
  el: '#app',  // 挂载实例 => document.getElementById('app')
  router, //使用路由 => router: router,
  store,
  template: '<App/>',
  components: { App }
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

二、App.vue 文件

App.vue是主组件，所有页面都是在App.vue下进行切换的, router标示为App.vue的子组件

<template>
  <div id="app">
    <nav-head></nav-head>
    <welcome></welcome>
    <template>
      <side-menu></side-menu>
      <div class="app-content">
          <router-view class="app-content-panel" id="js-report-content"></router-view>
      </div>
    </template>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Message } from 'element-ui'
import NavHead from './components/common/NavHead'
import SideMenu from '@/components/common/SideMenu'
import Welcome from './components/welcome'

export default {
  name: 'app',
  data () {
    return {

    }
  },
  computed: mapState({

  }),
  mounted () {
  
  },
  watch: {

  },
  components: {
    NavHead,
    SideMenu,
    Welcome
  }
}

</script>
<style lang="less" src="@/assets/style/layout.less"></style>
<style lang="less" src="@/assets/style/basic.less"></style>

三、index.html文件

开发的时候看起来没什么关联，其实webpack打包时，生成的index.html里面引入了各个js