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

1 var webpack=require("webpack")
2
3 plugins: [
4     new webpack.ProvidePlugin({
5      $: "jquery",
6      jQuery: "jquery"
7     })
8  ]

然后在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地址

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

转载于:https://www.cnblogs.com/zhihou/p/7250200.html

vue2.0 element学习相关推荐

vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue2.0基础学习（1）
(一) 内部指令第一节:准备工作 1.引入Vue.js(官方网站:https://cn.vuejs.org/v2/guide/installation.html) ·在开发时请用开发版本,遇到常见错 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
【Vue2.0学习】—Vuex工作原理图（二十五）
[Vue2.0学习]-Vuex工作原理图(二十五) 一. Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写 ...
【Vue2.0学习】—数据绑定
[Vue2.0学习]-数据绑定 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结.vue2.0的基础知识的总结暂时不总结成文 ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
【Vue2.0学习】—插槽（六十四）
[Vue2.0学习]-插槽(六十四) 作用:让父组件可以向子组件指定的位置插入html结构,也是一种组件间通信的方式,适用于父组件=>子组件分类:默认插槽.具名插槽.作用域插槽默认插槽使 ...
vue学习（八）vue2.0路由vue-router的简单入门使用
vue-router官网中文文档:Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理 ...

vue2.0 element学习

vue2.0 element学习相关推荐

最新文章

热门文章