本项目目录结构参考当前网址
参考目录
目录结构修改
vonic-webpack-starter 是vonic-template下载后的目录,自动生成结构保持不变,只需要改变Src目录下的目录结构,对修改后的结构进行简单说明如下:
assets:静态资源
components:自定义组件
router:vue-router路由
store:vuex状态管理
page:页面
utils:工具集
不同的目录结构下包含不同内容,其中程序员自定义内容主要在page目录下,其他文件夹下都是项目初始配置后不在修改的内容。例如router文件夹下配置单页面路由,utils配置公共js等。
别名设置
进入 build/webpack.base.config.js 设置目录别名
基于1.0设置的文件夹结构,对当前项目设置特殊别名
vue-router 路由配置
在router文件夹下新建router.js,写入基本配置信息
下图是默认的配置信息,定义的router.js 中进行vue-router基础配置,第一行代表引用单页面,3-6代表路由配置的集合项,第8行将当前路由配置数组导出,导出的内容通过main.js中接收,其中的语法为es6。
对/Src/main.js进行配置
main.js主要配置一些全局的内容,例如单页面路由,状态管理(vuex)等。
下图中添加了从第三行开始的内容,通过这种方式,开启了单页面的路由机制。这种方式的好处是,区分各个区块所做的事情,router文件夹下是路由的实现,而main.js中只负责引用,不关系具体实现。