2 目录结构

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

目录结构修改

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

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

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

2 目录结构
Src目录结构图.png

别名设置

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

2 目录结构
别名.png

vue-router 路由配置

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

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

2 目录结构
路由配置.png

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


2 目录结构
主页配置.png
上一篇:教你用TensorFlow和自编码器模型生成手写数字(附代码)


下一篇:3 模块整合