vuecli项目文件命名_vue学习之路（二）vue-cli目录结构分析

先附上我的个人博客：小全技术博

前言：我们已经用vue-cli建立起了vue项目框架，但是建立起了要怎么用呢，也许会有许多人一看到一大堆的文件目录就有一些慌张了，可是官方却说这是简化我们的开发过程。官方这么说肯定有他的道理。接下来我们就看看道理哪里变得简单了吧。

总体结构介绍

其中src是项目结构的重要结构文件，本文也会重点介绍此文件夹下的相关文件。

详细介绍

1.build文件夹(webpack配置)

build文件夹里面最主要的是webpack的相关配置文件，在新一代的vue-cli中，没有dev-server.js文件，因为它被与集成到开发环境配置文件里面了，当我们输入npm run dev启动项目的时候，最先就会启动dev-server，它会检查npm以及node的版本，加载配置文件，启动服务。

2.config文件夹(vue项目配置)

config文件夹里面的文件主要是项目相关配置，我们常用的就是当端口冲突时配置监听端口，打包输出路径及命名等

3.node_mudules文件夹(依赖包)

node_mudules是项目依赖包，里面包括了很多项目依赖。安装方法，在在项目文件夹中打开命令行，输入npm install即可安装该依赖包。

一般什么情况下我们需要安装依赖包呢：

(一)当我们运行项目时提示缺少依赖包，比如外部加载css时需要css-loader，这个就需要我们额外安装。

(二)当需要安装插件的时候，比如Vuex。

4.src文件夹(项目核心文件)

我们进行开发时，主要时在src文件夹目录下完成，这里对该文件夹内的几个重要文件详细介绍：

(1)App.vue(根组件)

App.vue是项目的根组件，一个vue页面一把又三个部分组成：【template】，【script】，【style】。

【template】：模板

使用vue-cli构建vue项目的好处就是方便，不用再去声明什么创建模板之类的语句，可以直接写模板内容了，要注意的是，模板中所有的内容只有一个根节点，就像上图，所有内容都包含在div标签内。

【script】：JavaScript代码

该部分用于编写JavaScript代码片段，用export default导出。

【style】：css样式代码

该部分主要用于编写css代码

(2)main.js(入口文件)

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，components里面就是引用的App组件，如果后期安装了插件或者组件库，例如安装了Element组件库，则需要在main.js文件中引用。

(3)router(路由配置)

该文件夹下的index.js则是路由配置文件，“/”则定义的是根路由，当我们进入网页时，展现在我们眼前的就是“/”界面。

(4)components(组件)

该文件夹下用于存放你自己编写的组件，当需要用时，则只需要在界面引用就可以。

(5)assets(资源文件)

一般用于存放需要用到的资源文件，图片居多。

5.最后说一下index.html文件

该文件为主页面文件，main.js里面定义的实例都挂载到根节点下，内容通过vue组件来填充。