47-VUE-4

1.嵌套路由

就是加了children标签，这玩意知道是怎么回事就行了，具体的api不考虑

2.缓存路由组件

被切换的路由组件，被缓存起来keep-alive

3.给路由组件传递数据

。。。这里也不看了

4.vuex

对vue中多个组件的共享状态进行集中式管理

其实就是在view和data之间加了一个管理器，用这个管理器来集中管理

5.使用vuex

①创建一个vuex的核心js

②在里面配置好一些对外的state；mutations；actions；getters等以后，被main.js引用进去

③把父组件的data交给vuex管理

④父组件app.vue跟store.js关联，所有的组件都会多一个属性：$store

⑤真正在做项目的时候，getter，mutations，actions都是单独存放的

⑥分发，就是这样简单

下面完整记录一个vue前端开发的流程

• 创建一个webpack的模板

• 在项目的index.js里面可以进行本项目的各种配置：比如端口号，是否自动打开浏览器等

• static里面放全局样式

• 写完，测试：npm run dev；投放项目编译：npm run build

• 如果编译以后想打开，可以下一个serve，用这个来打开项目：npm install-g serve --> serve dist，用cmd执行命令下面必须有package-json

• www.iconfont.com 有一系列的图标，文本库

• 在线css引入，在index.html里面用<link ref=stylesheet href=“........ddd.css”>可以把网络css资源解析进来，如果你重新添加了，那么这个linkUrl需要覆盖

• 引入iconfont的时候需要引入2个.css，才能制定具体的样式

• Directory结构如下：

api	与后台交互模块文件
common	通用资源文件夹，fonts/img/stylus
components	非路由组件文件夹
filters	自定义过滤器模块文件夹
mock	模拟数据接口文件夹
page	路由组件文件夹
router	路由器文件夹
store	vuex相关模块文件夹
App.vue	应用组件
main.js	入口js

• 下载stylus依赖包

• 在组件里面写样式的时候，这个时候就不写css，全部换成stylus：<style lang=“stylus”rel=“stylesheet/stylus”>

• stylus，这里stylus的结构化是按照缩进进行代码控制的，不要按空格

• 父级引用-->使用字符&指向父选择器

• Mixins混合-->复用css

• 最后创建的是一个mixins.styl文件，这就是最终转为css的文件

• 在webstorm的模板里面，设置一下，每次创建一个vue的模板，自动就有<style lang=“stylus”rel=“stylesheet/stylus”>

• 这里的demo是一个可以对应android里面的mainactivity+fragments的模式，在这里，下面的底部导航栏不归为路由，命名为FooterGuide，然后在路由里面要写4个路由vue（因为下面的底部导航栏可以切换4个页面）

• 在pages里面把4个路由文件夹，以及4个路由vue创建好

• 在main.js里面写import VUE，然后把App.vue组件给加到main.js里面，这里用的是render，render：h => h（App）,成功导入"App"组件以后，用devtools就可以直接看得到只有这一个组件

• 把reset.css加到static/css文件夹下，然后引入到index.html里面，这里相当于一个通用的样式表

• 移动端的h5，要加viewport，要在<meta>标签里面加viewport

• 为了解决点击响应延迟0.3S问题，在index.html里面加上fastclick这个js

• 下载vue-router，接下来创建路由器

• 在router里面创建一个index.js来创建路由器，声明vue使用router，Vue.use（VueRouter）

• 配置所有的路由，export default new VueRouter( { routes : [ ]  } )，这里的routes，就把所有的路由写进去

• 每一个路由写2个属性：{ name：' '  component : ' ' } ，指明路由的name以及是哪个组件

• 把所有的路由，import到index.js里面来，这里别忘了，加一个默认的路由路径（首页的）{ path :‘/’redirect : '/msite'   } ，后面的是首页的路径

•   把路由器的js（index.js）加到main.js里面

今天先到这，明天接着弄