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

插件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组件，可以满足日常的移动开发需求。 这样可以快速构建风格统一的页面，提高开发效率。