Vue Element Ui

Posted on  by admin

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,手机端有对应框架是Mint UI 。.

端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。.

下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。.

# Material Design

  • 淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;.
  • 运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。.
  • 快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S.

# Component sets for CSS Frameworks

# Ant Design

解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.

# Other solutions

"Which UI library is the best" stands among the most common questions from newcomers to Vue.js ecosystem.

# Summary (TLDR)

The answer isn't easy though, since there is no such thing as "the best" components library for Vue, due to many factors that should be considered.

What you can look for instead is a solution optimal for your specific use case. Most of the libraries covered in this chapter are based on either Material Design or Ant Design, or provide Vue integrations for some framework agnostic UI libraries, such as Bootstrap, Bulma or Uikit.

# How to chose an optimal UI library

If you don't have time to read all of this and just need a quick answer:.

# iView

Vuetify - mobile and desktop ready, material design. Quasar - material design as well but with cross-platform capabilities.


Quasar - full framework, option of Cordova or Capacitor for mobile builds. Ionic Vue - cross-platform UI toolkit, uses Capacitor for native mobile.

# Ionic Vue Web Native

Element UI - extensive, desktop oriented, widely popular in asia.

BootstrapVue - Bootstrap based. Buefy - Bulma based. This section is supposed to contain the guidelines on how to decide which UI library to use.

Here are some topics that should be covered:. do you really need an UI library?

# Chakra UI

how do you plan to approach mobile version of your website or application.