本文章作为VUE学习过程中的个人总结笔记，方便以后学习查看。参考了网上的多种资料，如有雷同或者侵权请告知，谢谢。

一、项目结构如下

二、目录结构说明

--build：项目构建的相关代码，与webpack有关的参数

--config：项目的基本配置文件，包括目录、端口等

--node_modules：VUE项目依赖模块

--src：源码文件，包括如下几部分

assets: 放置一些静态资源，如图片、logo等

components：放置组件

App.vue ：第一个组件App.vue

main.js：入口文件

--static：静态文件放置目录，图片等

--test：测试目录，一般没用

--.XXXX文件都是一些配置文件，如下

.babelrc：vue开发babel编译相关参数

.editorconfig ：编辑器配置文件

.gitignore :git版本控制的相关文件

--index.html 首页入口文件，可添加一些 meta 信息等。

--package.json ：项目配置文件，包括一些命令（scripts）、项目发布依赖（dependencies）、项目开发依赖（devDependencies）

--REAME.md ：项目介绍文档支持markdown

三、详细介绍

1、index.html

index中的body，有一个id为app的div被渲染

2、main.js

main.js是入口文件,初始化vue实例和插件。


/*引入Vue框架*/
import Vue from 'vue'

/*基本JS*/
import "assets/js/common.js"
/*引入路由设置*/
import "./routers.js"
Vue.config.productionTip = false

/*引入element组件*/
import ElementUI from 'element-ui';
/*重置样式*/
import 'element-ui/lib/theme-chalk/index.css';
/*使用element组件*/
Vue.use(ElementUI);

/*引入资源请求插件*/
import VueResource from 'vue-resource'
/*使用VueResource插件*/
Vue.use(VueResource)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

new Vue：新建vue对象

el：为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

components：组件。这里是组件APP，对应文件App.vue，页面通过<app></app>渲染。注意：index.html中没有这个标签，原因看下面分析。

template：模板。模板将会替换挂载的元素，挂载元素的内容都将被忽略。意思是:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

3、App.vue

标准的vue组件，包含模板（template）、脚本（script）、样式（style）三个部分。

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
//导入组件
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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: 60px;
}
</style>

<img>标签是图片，代表logo一类的。

<HelloWorld/> 组件，具体查看HelloWorld.vue，就是要渲染的东西。

四、总结

个人理解：

整个逻辑：入口文件main.js 通过<div id="app"></div>在 index.html中渲染，main.js中通过components: { App }来看App.vue，App.vue中<img>标签代表logo，<HelloWorld/> 组件，具体查看HelloWorld.vue，就是要渲染的东西。

【VUE学习笔记1】Vue.js项目结构说明