2 目录结构

本项目目录结构参考当前网址 参考目录

目录结构修改

vonic-webpack-starter 是vonic-template下载后的目录，自动生成结构保持不变，只需要改变Src目录下的目录结构，对修改后的结构进行简单说明如下：

assets：静态资源 components：自定义组件 router:vue-router路由 store:vuex状态管理 page:页面 utils:工具集

不同的目录结构下包含不同内容，其中程序员自定义内容主要在page目录下，其他文件夹下都是项目初始配置后不在修改的内容。例如router文件夹下配置单页面路由，utils配置公共js等。

Src目录结构图.png

别名设置

进入 build/webpack.base.config.js 设置目录别名 基于1.0设置的文件夹结构，对当前项目设置特殊别名

别名.png

vue-router 路由配置

在router文件夹下新建router.js，写入基本配置信息

下图是默认的配置信息，定义的router.js 中进行vue-router基础配置，第一行代表引用单页面，3-6代表路由配置的集合项，第8行将当前路由配置数组导出，导出的内容通过main.js中接收，其中的语法为es6。

路由配置.png

对/Src/main.js进行配置 main.js主要配置一些全局的内容，例如单页面路由，状态管理（vuex）等。 下图中添加了从第三行开始的内容，通过这种方式，开启了单页面的路由机制。这种方式的好处是，区分各个区块所做的事情，router文件夹下是路由的实现，而main.js中只负责引用，不关系具体实现。

主页配置.png