前言
最近在看Vue.js相关的东西,比如说vue-router、vuex,还有基于Vue.js的前端UI框架Element-UI和iview
Vue router
其中,Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为 关于vue router的使用,可以开始起步或尝试一下官方的示例 (查看仓库的 README.md 来运行它们)。
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。 Vuex中的核心概念有:State、Getter、Mutation、Action、Module,下面的图展示了Vuex的状态管理:
Element-UI
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型,由饿了么前端开发。
手册目录
- 指南
- 开发指南
- 组件
iview ui
iview ui是一套基于 Vue.js 的高质量UI 组件库
关于iView
iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。
1.特性
- 高质量、功能丰富
- 友好的 API ,自由灵活地使用空间
- 事无巨细的文档
- 细致、漂亮的 UI
- 使用单文件的 Vue 组件化开发模式
- 基于 npm webpack babel 开发,支持 ES2015
- 安装 #
2.安装
1.使用 npm
代码语言:javascript复制$ npm install iview@1.0.1 --save
或使用
代码语言:javascript复制<script type="text/javascript" src="iview.min.js"></script>
2.示例
代码语言:javascript复制<template>
<Slider :value.sync="value" range></Slider>
</template>
<script>
export default {
data () {
return {
value: [20, 50]
}
}
}
</script>
参考资料
- vue.js官网中文文档
- Vue router中文官方文档
- Vue router - github
- vuex中文官方文档
- vuex-github
- awesome-vue A curated list of awesome things related to Vue.js
- vuex-router-sync - github
- element - github A Vue.js 2.0 UI Toolkit for Web https://element.eleme.io/
- iviewui
- https://www.iviewui.com/
- iview - github
- iview-码云
- iview webapp 一套高质量的 微信小程序 UI 组件库