三、项目结构

通过vue-cli生成的项目目录结构，及各文件夹和文件的用途说明如下所示。

|—node_modules     //项目依赖的模块

|—public     //该目录下的文件不会被webpack编译压缩处理。存放静态资源文件，第三方非模块化js文件等。

             |—favicon.ico         //图标文件

             |—index.html         //项目主页面

|—src               //项目代码主目录

         |—assets                   //存放项目中的静态资源。如：js、css、图片等。

                        |—logo.png      //logo图片

         |—components                              //编写的组件放到这个目录下

                                 |—HelloWorld.vue       //vue-cli创建的HelloWorld组件

         |—App.vue       //项目的根组件

         |—main.js         //程序入口js文件，加载各种公共组件和所需要的插件

|—babel.config.js         //Babel使用的配置文件

|—package.json          //NPM的配置文件。里面配置了脚本和项目依赖库。