vue2.0 element学习
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学习的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- vue2.0+element+node+webpack搭建的一个简单的后台管理界面
闲聊: 今天是六一儿童节哟,小颖祝大家节日快乐哈哈哈.其实这个demo小颖断断续续做了将近两个礼拜了,心塞的,其实这个也没有多难,主要是小颖有点最近事情有点多,所以就把这个一直拖着,今天好不容易做好了 ...
- 【数据售卖平台】—— Vue2.0入门学习项目爬坑
前言:这个项目是我从零学习Vue2.0时用于练习基础知识的入门项目,包含了Vue2.0几乎所有项目都会用到的基础功能,是新手用来练手的好项目,这里温故知新对功能点做一个总结.github地址:http ...
- vue2.0 路由学习笔记
昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...
- vue2.0 mintUI 学习备忘
一 技术栈:vuecli+vuejs2+mintUI+axios vuecli :脚手架工具 vuejs:前端框架 mintUI:基于vuejs移动端UI axios:vuejs ajax数据交互 ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- vue2.0的学习
vue-router 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1)router.push(loc ...
随机推荐
- 提高solr的搜索速度
之前是使用12台机分布式搜索,1台为主机做索引并分发给子机,8台做大索引搜索服务,3 台做小索引搜索服务,配置基本是内存在4-8G,cpu:2-8core的服务器,索引的大小为8G.搜索的响应时间 是 ...
- BOM和DOM(cs)
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- [Python] 牛顿插值
插值公式为: 差商递归公式为: # -*- coding: utf-8 -*- #Program 0.4 Newton Interpolation import numpy as np import ...
- 开源推荐系统Librec中recommender模块算法了解——cf模块
1. k近邻(k-NearestNeighbor)算法介绍及在推荐系统中的应用 https://zhuanlan.zhihu.com/p/25994179 k近邻(k-NearestNeig ...
- lb集群lvs的3种模式
Cluster原理 集群的总类: 1.负载均衡集群(LB:Load Banlancing):实现将一个访问量或者任务量特别大的应用,给他 平均分配到不同的服务器上面,以提供高容量.大并发. 2.高可用 ...
- HTML5 学习之地理定位
html5 获取坐标: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> &l ...
- div+css样式命名规则,值得收藏
div+css样式命名规则,值得收藏 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:w ...
- Hive启动异常
[root@host ~]# hivewhich: no hbase in (/root/app/apache-maven-3.5.2/bin:/usr/local/sbin:/usr/local/b ...
- JAVA Spring 简单的配置和操作 ( 创建实体类, 配置XML文件, 调试 )
< 1 > 实体类 Person package java_spring.modle; /** * 一个实体类( Person ) */ public class Person { pri ...
- Spring MVC 重定向
@RequestMapping("/testRedirect") public String testRedirect(){ System.out.println("te ...