这个为项目大概的目录结构,作到后台的时候会继续添加css
接下来重点介绍路由vue
1.首先肯定安装了路由,或者是直接在项目里安装,或者在package.json中写入安装,或者cnpm install --save vue-router,均可以node
我以为最好能在package.json中体现出来最好webpack
2.编写路由web
若是你有ui的话,ui会把页面给你,页面结构的话不用你操心,若是像我这样所有靠本身或者本身想作点什么的话,最好提早把页面目录考虑好vue-router
我这个demo页面比较简单 业务逻辑先放在一边 ,也就两个大页面 一个是登录页 一个是内容页 内容页里边有几个子页面 ,好了,do it!npm
首先是模块的加载,用的是require.ensure json
require.ensure的用法和好处参考这里ide
http://www.css88.com/doc/webpack2/guides/code-splitting-require/ui
http://cnodejs.org/topic/586823335eac96bb04d3e305
组件的引入和使用
路由的编写
来分析一下以上的路由
vue的思想:全部的vue文件都是组件,父组件中有子组件,这里边最大的组件是App,两个大页面包含在这个大的父组件中,children很好的说明了父子关系
以后path和component 是url和组件的映射关系
特别注意的是 {path: '', redirect: '/login'} 这里边是作了一个过滤 ,若是url为空的话指向的也是login页面
3.main.js中引入路由
仍是那几步
引入
ues
实例化
做为参数传递给vue对象
4.验证
简单编写好页面后(过程省略),验证一下
成功!!