1.Vue+VueRouter+Vuex+ElementUI（一）

1.Vue全家桶学习结合实际项目学习案例如下：

vue.js目录结构如下：

相关目录解析如下：

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

如图：

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

node_modules是使用npm安装了相关的npm install（自动生成的默认依赖文件包）

npm加载的项目依赖模块。

src这里是我们要开发的目录，基本上所有需要做的事都是在这个文件里面。

该目录文件架构如下：

assets是放置一些图片，如logo，如图所示：

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

但是这个项目进行使用，进行了组件的控制。

项目结构如图所示：

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

详细代码如下：

main.js：项目的核心文件

详细代码如下：

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

如图所示：

doc文件可有可无：这个是自定义的

红色框框均是配置文件，如图所示：

index.html：

首页入口文件：

你可以添加一些meta头部信息或者统计代码啥的

package.json是项目有配置文件,如图所示：

着重看一下配置文件用到的一些东西；

dependeices可以看到你所使用的一些技术：

README.md项目的说明文档，markdown格式，如下图所示：

至此基于vue的项目介绍完毕。