首页 > 编程知识 正文

vue常用组件及ui框架,ui组件有哪些

时间:2023-05-03 13:08:53 阅读:171856 作者:208

插件scss

css的预编译、使用步骤如下。

步骤1 :在NPM上降低三个负载(css-loader、css-loader和node-sass )

在步骤build目录中找到webpack.base.config.js,然后将其扩展. scss添加到扩展属性中

第三步:还是在同一个文件中,设置module属性

第4步:将lang属性添加到组件的style标签中,例如lang=" scss "

特性主要是:

状态管理(vuex)

Vuex是专门为vue.js APP应用程序开发的状态管理模型。 使用集中式存储管理APP应用程序的所有组件的状态,并确保状态以可预测的方式根据适当的规则变化。 Vuex还集成到Vue的官方调试工具devtools extension中,提供了零配置time-travel调试、状态快照导入导出等高级调试功能。

优势

如果在EMC APP应用程序中共享多个组件,则很容易破坏单向数据流的简单性。

多个视图依赖于相同的状态。 来自不同视图的行为必须更改相同的状态。

在问题1中,传递参数的方法对于多层嵌套的组件非常繁琐,对于兄弟组件之间的状态传递无能为力。

在问题2中,您经常直接引用父子组件,或者在事件中更改状态的多个副本以进行同步。 这些模式非常脆弱,通常会变成无法维护的代码。

1. 使用//在第一步中输入npm install vuex -S复制代码//在第二步中输入storeimport Vue from 'vue '; 导入从' vuex from ' vuex '; VUE.USE(vuex ); //在生产环境中debug不是trueconstdebug=process.env.node _ env!=='production '; 创建Vuex实例对象conststore=newvuex.store ({ strict : debug,//在非生产环境中为state:{ },getters:{ },mutate ) import App from './App.vue '; 导入存储来自'./store '; const VM=new vue ({ store : store,render:h=h ) app ) $mount ) ' #app ' )2. 核心属性

vuex共有5个核心属性,分别为:

state的唯一数据源是Vue实力的data遵循相同规则的getters可以认为是store的计算属性,与计算属性一样,getter的返回值根据依赖关系进行缓存,只有依赖关系值发生更改时才会重新计算。 Getter作为store.getters对象公开。 可以作为属性访问这些值。 mutation更改vuex store状态的唯一方法是提交mutation,它与事件非常相似。 根据store.commit方法的不同,操作与mutation相似。 操作可以包含任何异步操作,而不是操作直接更改状态,而是提交倍增。 由于module使用单个状态树,因此所有应用的状态都集中在相对较大的对象上。 如果APP变得非常复杂,store对象可能会变得相当庞大。 为了解决以上问题,在Vuex中可以将store分割为模块。vue-route

Vue Router是Vue.js公式的路由管理器。 它与Vue.js的核心深度集成,便于构建单页面APP应用程序。 包括以下功能。

的嵌套路由/视图表基于路由参数、查询和通配符Vue.js转移系统的视图转移效果细粒度导航控件具有自动激活的CSS class的链接HTML5历史模式或

npminstallvue-router http://www.Sina.com/vue-router

Vue通用UI组件库1.安装

元素

面向Element、开发人员、设计师和产品经理的基于Vue 2.0的桌面组件库

Avue

Avue是一种采用Element框架的低代码前端框架,通过使用JSON配置生成页面,可以减少页面开发工作量,大大提高效率

优点是不需要理解前端,不受前端技术更新的影响……

缺点:大量自定义UI,非常复杂或特殊的交互

DataV

DataV组件库基于Vue,主要用于构建数据可视化,即2.使用全屏(数据显示页面),可以使用多种类型的组件。

对浏览器的兼容性不强。

PC端

Vant

Vant是备受好评的前端团队开源移动端组件库,已于2017年开放源代码并持续4年。 Vant在内部托管着为10万多名开发人员提供服务的优秀核心业务,是业界主要的移动组件库之一。

Mint UI

Mint UI包含丰富的CSS和JS组件,可以满足日常的移动开发需求。 这样可以快速构建风格统一的页面,提高开发效率。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。