vue项目的目录简介

vue项目的目录简介

• main.js

是初始化vue实例并引入需要的插件
并且将你的内容渲染到主页面上
是你的项目的入口文件
它执行的时候都是从你的 main.js 从上到下的执行的

// 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'           // 导入vue核心库
import App from './App'         // 导入App.vue组件，.vue可省略不写
import router from './router'   // 导入router目录下所有路由

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(router)

//开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。
//设为false控制台就不会有提示语句了（不重要，可忽略）
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({             // 创建Vue实例
  el: '#app',         // 挂载id='app'
  router,             // 配置router，完整写法router : router
  components: { App },
  template: '<App/>'
})

• index.html

index.html是页面的入口文件，里面包含一个id为app的挂载点，
main.js中定义的Vue根实例就会挂载到该挂载点上
打开网页的时候，页面Title是index.html中定义的Title，而正文部分是App.vue中定义的内容。
在打开的瞬间是会显示body中<div id="app">xxx</div>中间的内容，即xxx（如果有xxx的话），
而后xxx消失，页面就会按body中的顺序显示内容（App.vue中定义的内容和body中其他内容，不过body中一般不定义其他内容）

• App.vue

App.vue是根组件，所有页面都是在App.vue下进行切换的
也可以写所有页面中公共需要的动画或者样式

<template>
  <div id="app">

<!-- router-view是 Vue.js 中的一个组件，用于渲染路由匹配到的组件。
它是 Vue Router 的核心组件，在每个路由规则匹配成功后会渲染对应的组件。-->
    <router-view></router-view>

  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  }
}
</script>

<!--所有页面中公共需要的动画或者样式-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>

总结：在项目运行中，main.js作为项目的入口文件，运行，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代