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了。

vue配合UI组件的更多相关文章

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

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  2. VUE:UI组件库(Mint UI & Elment)

    VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...

  3. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  4. 五、vue常用UI组件

    下面简单的总结下vue常用的一些UI 组件,有一些我也没怎么用过,这里先罗列出来,便于自己后面使用的时候查找方便,大家有更好的可以给我推荐哦~ vuex: vux github ui demo:htt ...

  5. vue覆盖UI组件样式不生效

    检查检查是不是加了scoped 在vue中,我们需要引用子组件,包括ui组件(element.iview). 但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的. 去掉scope ...

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

    前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完 ...

  7. vue常用UI组件

    Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn demo:http://elemefe.github.io/mint-ui/#/ github地址:htt ...

  8. 《转》vue 常用ui组件

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndem ...

  9. vue 常用ui组件库

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cn de ...

随机推荐

  1. C++学习(二十七)(C语言部分)之 预处理命令

    结构体 联合 枚举 联合 只能保存最后赋值的结果枚举 所有可能值列出来 预处理命令是在编译前期的阶段 代码-(编译)-->可执行文件(exe)预编译 编译前对代码处理 *1.插入头文件的内容 # ...

  2. vue全家桶+Koa2开发笔记(6)--app开发

    1.环境配置 详见文章<Nuxt 开发 - 项目初始化> 1.1  使用nuxt脚手架  https://zh.nuxtjs.org/guide/installation 1.2 在nod ...

  3. 公钥与私钥,HTTPS详解 转载

    1.公钥与私钥原理1)鲍勃有两把钥匙,一把是公钥,另一把是私钥2)鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把.3)苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到 ...

  4. Writing and playing with custom Terraform Providers

    转自:https://petersouter.xyz/writing-and-playing-with-custom-terraform-providers/ I’ve been digging de ...

  5. Singer 学习一 使用Singer进行mysql 2 postgres 数据转换

    Singer 因为版本的问题,推荐的运行方式是使用virtualenv,对于taps&& target 的运行都是 推荐使用此方式,不然包兼容的问题太费事了 备注: 使用docker- ...

  6. kustomize 模版自由的配置&&自定义kubernetes工具

    kustomize 是一个可以方便我们基于模版配置,自定义kubernetes 的工具,类似kompose,但是个人觉得kompose 更灵活点,而且使用上更方便 安装 mac brew instal ...

  7. 03C++语言对C的增强——实用性、变量检测、struct类型、C++中所有变量和函数都必须有类型、bool类型、三目运算符

    1.“实用性”增强 C语言中的变量都必须在作用域开始的位置定义,C++中更强调语言的“实用性”,所有的变量都可以在需要使用时再定义. 2.C++对c语言register的增强 register关键字 ...

  8. Delphi 初始化的顺序

    一.存储结构: 初始化单元存储在一个数组InitContext.InitTable^.UnitInfo中,其中UnitInfo是以数组的方式存储的,其中InitTable的定义为: 其中InitTab ...

  9. Logstash的grok以及Ruby

    logstash的grok插件的用途是提取字段,将非格式的内容进行格式化, input { file { path => "/var/log/http.log" } } fi ...

  10. bzoj 2216 [Poi2011]Lightning Conductor——单调队列+二分处理决策单调性

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2216 那个关于位置的代价是带根号的,所以随着距离的增加而增长变慢:所以靠后的位置一旦比靠前的 ...