基于webpack模板的vue项目目录详解

一、搭建的前提环境

（1）安装node环境，node版本4.0以上。安装node的时候会下载npm包管理器，利用npm安装开发依赖的插件包

二、利用vue-cli搭建一个vue项目

（1）全局安装vue-cli

npm install -g vue-cli

（2）创建一个webpack模板的vue.js项目

vue init webpack project-name

三、基于webpack模板的vue项目目录详解

图1 项目总目录

（1）main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件

（2）App.vue是我们的主组件，所有的页面都是在App.vue里面进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

（3）index.html文件入口

（4）src放置组件和入口文件

（5）node_modules为依赖的模块

（6）config中配置了路径端口值等

（7）build中配置了webpack的基本配置、开发环境配置、生产环境配置等