vue-cli初始化项目目录结构以及vue文件基本结构

在上一篇博文中《vue开发 我们需要准备什么 ？》中，我们已经使用vue-cli脚手架，初始化了一个vue项目，如果不清楚怎么使用vue-cli生成项目的同学，可以翻翻我上一篇博文哈，本文就不重复之前的操作步骤了，直接上项目目录截图，我们对比着来看一看，项目中的文件夹以及文件都是什么用途的：

build：项目构建(webpack)相关代码；

config：配置目录，包括端口号等。我们初学可以使用默认的。

dist：打包项目目录地址

node-modules：npm 加载的项目依赖模块

src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。

里面包含了几个目录及文件：

    assets: 放置一些图片，如logo等。

    components: 目录里面放了一个组件文件，可以不用。

    App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。

main.js: 项目的核心文件。

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

index.html：项目首页入口文件，你可以添加一些 meta 信息或统计代码啥的。

package.json：项目配置文件。这个文件非常重要哦~

README.md：项目的说明文档，markdown 格式

其他的都是一些配置文件，可以自己打开看看，一般情况下，不怎么需要调整。

下面说一下vue文件的文件结构：

<template>
  <div>
   
  </div>
</template>
 
<script>
 
</script>
 
<style scoped>
 
</style>

上面的代码中，template标签里，写html标签，就是页面文档结构，script中，写的是js代码，实现页面效果啊数据请求啊业务逻辑什么的，style标签里，写的是页面样式。基本上vue文件（以.vue为后缀）的结构，就是这三部分了。

单独说一句，在项目目录中，index.html是项目首页入口文件，在src里的main.js，是项目的入口文件，主要作用是：实例化Vue、放置项目中经常会用到的插件和CSS样式以及

存储全局变量。App.vue，是项目的根组件，在src目录下的components目录，主要用于放置模板文件，补充一下前面介绍目录结构中，没有说到的内容。