1,bootstrap和vue2.0结合使用

vue文件搭建好后,引入jquery和bootstrap

我采用的方式为外部引用

在main.js内部直接导入

用vue-cli直接安装jquery和bootstrap

npm install jquery --save

首先在脚手架里面配置,找到webpack.base.conf.js

在头部定义webpack

 var webpack=require("webpack")

 plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]

然后在main.js里面直接引入即可使用

import $ from 'jquery'

然后是安装bootstrap

npm install bootstrap --save

直接在main.js里面引用

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

注意版本不一样路径有些不一样,你可以在node_modules里面查看路径

2 element-ui的使用

npm 安装

npm i element-ui  -S

引入elementui

找到入口文件mian.js

/***************************/

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

//样式一定要单独引入
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

/**********主要就是3条指令*****************/

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

//样式一定要单独引入

Vue.use(ElementUI)

就可以直接使用elementUi组件了

/**************************/

http://element.eleme.io/#/zh-CN   vue2.0 UI elementUi地址

到这里去看你需要的插件组件,多用几次就会了

vue2.0 element学习的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. vue2.0+element+node+webpack搭建的一个简单的后台管理界面

    闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...

  3. 【数据售卖平台】—— Vue2.0入门学习项目爬坑

    前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...

  4. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  5. vue2.0 mintUI 学习备忘

    一 技术栈:vuecli+vuejs2+mintUI+axios vuecli :脚手架工具 vuejs:前端框架  mintUI:基于vuejs移动端UI  axios:vuejs ajax数据交互 ...

  6. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  7. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  8. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  9. vue2.0的学习

    vue-router 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1)router.push(loc ...

随机推荐

  1. 提高solr的搜索速度

    之前是使用12台机分布式搜索,1台为主机做索引并分发给子机,8台做大索引搜索服务,3 台做小索引搜索服务,配置基本是内存在4-8G,cpu:2-8core的服务器,索引的大小为8G.搜索的响应时间 是 ...

  2. BOM和DOM(cs)

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  3. [Python] 牛顿插值

    插值公式为: 差商递归公式为: # -*- coding: utf-8 -*- #Program 0.4 Newton Interpolation import numpy as np import ...

  4. 开源推荐系统Librec中recommender模块算法了解——cf模块

    1.      k近邻(k-NearestNeighbor)算法介绍及在推荐系统中的应用 https://zhuanlan.zhihu.com/p/25994179 k近邻(k-NearestNeig ...

  5. lb集群lvs的3种模式

    Cluster原理 集群的总类: 1.负载均衡集群(LB:Load Banlancing):实现将一个访问量或者任务量特别大的应用,给他 平均分配到不同的服务器上面,以提供高容量.大并发. 2.高可用 ...

  6. HTML5 学习之地理定位

    html5 获取坐标: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> &l ...

  7. div+css样式命名规则,值得收藏

    div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...

  8. Hive启动异常

    [root@host ~]# hivewhich: no hbase in (/root/app/apache-maven-3.5.2/bin:/usr/local/sbin:/usr/local/b ...

  9. JAVA Spring 简单的配置和操作 ( 创建实体类, 配置XML文件, 调试 )

    < 1 > 实体类 Person package java_spring.modle; /** * 一个实体类( Person ) */ public class Person { pri ...

  10. Spring MVC 重定向

    @RequestMapping("/testRedirect") public String testRedirect(){ System.out.println("te ...