vue配合UI组件

bootstrap

创建项目

首先使用脚手架搭出项目基本框架,具体方法可以参考前面的文章。

1,执行命令创建项目:vue init webpack-simple vue-bootstrap

2,下载相关依赖:npm vue-bootstrap

3,启动项目:npm run dev

出现这个界面就说明项目创建成功了。

引入bootstrap

1,使用之前需要先在项目中下载bootstrap,在项目根目录执行命令:npm install bootstrap

2,下载完成后,在index.html文件中引入相关样式。

使用bootstrap

当我们把这个样式文件引入后,就可以正常的通过为元素添加class类来使用这些样式了。

首先删除App.vue中的<template>默认页面元素,再通过按钮验证是否引用成功。

  

此时说明已经成功引入了bootstrap样式文件了。其他的使用就都是类似的了,需要注意的是,bootstrap是基于jQuery的,所以如果有需要,最好也在项目中引入一下。

代码下载:点这里

elementUI-完整引入

创建项目

这一步就和上面一样了,就不在重复说明了。

安装并引入element-ui

在官网http://element.eleme.io上面提出推荐使用npm进行安装,所以这里也使用npm来安装。

其中的i是install的简写;-S则是--save的简写,我们也可以使用-D来代表--save-dev进行安装。

--save是对生产环境所需依赖的声明(开发应用中使用的框架,库) ,比如:jq,react,vue都需要放到这里面 。--save-dev是对开发环境所需依赖的声明(构建工具,测试工具) ,比如:babel,webpack,都放到当前目录。在package.json文件中,有两个存放模块的对象。–save会存放到”dependencies”,而–save-dev会存放到”devDependencies”。

在项目根目录执行上面的语句

安装成功后,在入口文件中进行全局引入,关于如何引入,在官网中也有详细的说明。只需要按照说明进行引入就可以了。

引入后重新运行项目,会发现报错了

这一类型的错误前面有提到过,前面是不能直接引用css,需要css-loader,这里是不能引入字体图标,解决办法是一样的。引入外部的字体图标时需要file-loader,因为这个在package.json中已经存在的,所以可以直接在webpack.config.js中进行配置就可以了,如果某些版本中没有,则需要通过npm进行下载再配置。

然后再重新运行项目就可以了。

使用

删除App.vue中的<template>默认页面元素后,复制官网的代码示例检测引用是否成功。

这样,我们就已经在项目中成功引入了element-ui。

代码下载:点这里

elementUI-按需引入

在官网http://element.eleme.io上面还提供了还需引入的方法,这里也简单的操作一下。

创建项目

这一步就和上面一样了,就不在重复说明了。

按需引入

关于按需引入,官网上面已经给出了十分详细的介绍,实际操作时按照介绍一步一步的走就可以了。

1,下载UI组件:npm install element-ui -D

和上面一样,还需要配置webpack.config.js

2,在项目根目录安装 babel-plugin-component:npm install babel-plugin-component -D

3,修改根目录下的.babelrc 文件

完成上面的步骤以后,我们就可以根据需要来引入相关组件了。还是以上面的按钮为例。

首先在main.js中引入需要的组件

然后在App.vue中使用组件。

使用

因为是按需引入的,在实际的运用过程中,我们肯定不会单一的值用到某一个组件,那么当组件越来越多的时候,不停的在main.js中添加引入并不是一个很好的行为,更明智的做法是单独新建一个文件用来引入组件,然后在main.js中引入这个文件就可以了。下面的例子中就是在src文件夹下新建了一个element-ui.js用来引入组件。

代码下载:点这里

Mint-ui

创建项目

同前面一样,继续略过。

安装并引入

同样,这个UI组件的官网http://mint-ui.github.io上面也有十分详细的介绍。

按住上面的提示,首先是在项目根目录执行安装命令:npm install mint-ui -S,然后在main.js中引入

这样就ok了。

原文地址:https://www.cnblogs.com/yuyujuan/p/9846564.html

时间: 2024-10-09 00:18:31

vue配合UI组件的相关文章

[转]VUE优秀UI组件库合集

原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本.vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀UI组件库供大家参考,期待开发者们推出更多优秀的组件库. 本文分为两大部分介绍:PC端和移动端. 首先介绍PC端

五、vue常用UI组件

下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn demo:http://elemefe.github.io/mint-ui/#/ github地址:https://github.com/Eleme

目前流行前端几大UI框架 ----vue Vue的UI组件库

在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 屏幕快照 2019-01-18 下午3.03.59.png Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/Elem

造个自己的Vue的UI组件库类似Element

前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址首先讲一下思路: 平常写组件时,写一个组件要用时直接导入就行了,如你写了一个time.vue,用的时候 import time from '路径' 现在要写一个组件库,是不是把所有组件一个文件夹里(如button

发现一个vue的UI组件库

Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndemo:http://elemefe.github.io/mint-ui/#/github地址:https://github.com/ElemeFE/mint-ui中文文档地址:http://mint-ui.github.io/docs/#!/zh-cn 文档解释很清晰,适合刚上手的童鞋

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护

基于Vue的Ui框架

饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动端的ui框架 http://mint-ui.github.io/#!/en mintUI的使用: 1.找官网 2.安装 npm install mint-ui -S -S表示 --save 3.引入mint Ui的css 和 插件 import Mint from 'mint-ui'; Vue.use(Mint); im

为公司架构一套高质量的 Vue UI 组件库

有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂不支持.所以,我认为每一个前端都应该具备能为公司架构一套 UI 组件库的能力. 因为机缘巧合,我在 Github 上发起了一次 Vue UI 组件库开源项目的活动,参与人数达到 40 多人,本以为一套 UI 库就是一堆组件叠加在而已,40 个人,每人一个组件,应该会很快搞定吧.万万没想到,一套UI库