今天学了一个基于Vue2.0的桌面端组件库Element,号称是全世界最流行的Vue UI框架。感觉学会了之后就变身大牛了有木有。

好了,不吹牛皮了。

Element官方文档通俗易懂,框架什么的安装引入就是干,管他是什么,咱先整一个import(哈哈哈),所以这一系列博客可能只是记录学习过程中遇到的各种问题及解决方案,Let's to be a dalao!

1.首先是安装

官方首推npm的方式安装,因为可以更好的配合webpack打包工具

npm i element-ui -S

/*   -S大写,是--save的缩写,对于上线后运行仍需要依赖的插件要使用--save,例如:webpack axios vant Element UI框架等等,而只是帮助开发的插件,只需-D即可,是--save-dev的缩写,例如:babel live-server loader等等,这是简单理解,深入了解可以去研读相关文档。  */

因为是零基础来的,所以遇到的问题会很多,比如npm安装失败(囧)百度了一下,因为NPM安装插件过程:从http://registry.npmjs.org下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),所以推荐不行的时候使用cnpm来安装插件,此方法同样适用于其他插件=。=

安装之前咱们先清一下缓存,不是很懂这一块,但是用了好像就解决安装报错的问题了,然后安装cnpm,最后使用cnpm来安装咱们的Element UI就可以啦(#号之后为注释,不要带上)

npm cache clean -f   #清缓存

npm install -g cnpm --registry=https://registry.npm.taobao.org   #安装cnpm

cnpm install element-ui -S  #安装element-ui插件

2.安装完了接下来就是引用啦

支持整体引用和部分引用:

完整引入只需在main.js中输入如下代码:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) new Vue({
el:'#app',
render: h => h(App)
});

引入调用

部分引入相对较为复杂,但也很容易理解,就是只引入需要的组件,从而减小项目体积。

首先要安装babel-plugin-component

npm install babel-plugin-component -D #看吧,只是开发依赖,咱们-D就行啦

然后将.babelrc(就是那个黄色6图标的文件) 修改为

{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

因为学习中用的是完整引入,目前暂未了解是完全覆盖还是添加以上代码在.babelrc中,所以有待更正,如有大佬路过指点,也会即使更正的,嘿嘿。

接下来在main.js中写入一下内容即可:

import {Button,Select} from 'element-ui';

Vue.component(Button.name,Button);
Vue.component(Select.name,Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/ new Vue({
el:'#app',
render: h =>(App)
});

上述代码以Button和Select组件为例,其他完整组件列表可至官网查询:

https://element.eleme.cn/#/zh-CN/component/quickstart

好啦,要去写作业了,我爱学习!第一篇博客就到这吧。

Vue学习-Element框架的更多相关文章

  1. Vue学习笔记-基于CDN引入方式简单前后端分离项目学习(Vue+Element+Axios)

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  2. vue学习笔记(二): 添加 element ui 插件

    一.加载 ui element vue add element 加载过程及成功结果如下 > vue add element>

  3. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  4. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  5. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  6. Vue学习笔记【1】——什么是Vue.js

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于We ...

  7. day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui

      Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui   本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 we ...

  8. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  9. 实现一个类 Vue 的 MVVM 框架

    Vue 一个 MVVM 框架.一个响应式的组件系统,通过把页面抽象成一个个组件来增加复用性.降低复杂性 主要特色就是数据操纵视图变化,一旦数据变化自动更新所有关联组件~ 所以它的一大特性就是一个数据响 ...

随机推荐

  1. 九度oj 题目1180:对称矩阵

    题目1180:对称矩阵 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3092 解决:1607 题目描述: 输入一个N维矩阵,判断是否对称. 输入: 输入第一行包括一个数:N(1<= ...

  2. hihoCoder#1069 最近公共祖先·三

    原题地址 根据提示用Spase Table做 将Tree先展成List,因为数组长度等于边数的2倍,树中边数等于节点数-1,所以List数组只要开2倍节点数大小即可 WA了几次,原来是查询的时候出现左 ...

  3. 括号序列(Poj1141)

    Poj1141 题目描述: 定义合法的括号序列如下: 1 空序列是一个合法的序列 2 如果S是合法的序列,则(S)和[S]也是合法的序列 3 如果A和B是合法的序列,则AB也是合法的序列 例如:下面的 ...

  4. 【BZOJ2330】糖果(差分约束系统,强连通分量,拓扑排序)

    题意: 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖果比他的多,于是在分配糖 ...

  5. 2015山东信息学夏令营 Day5T3 路径

    问题描述: 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x2|,|y1-y2|),求从1号点走到n号点的最小费用. 输入: 第一行包含一个正整数n,表示点数. 接下来 ...

  6. 【git】Git 提示fatal: remote origin already exists 错误解决办法

    今天使用git 添加远程github仓库的时候提示错误:fatal: remote origin already exists. 最后找到解决办法如下: 1.先删除远程 Git 仓库 $ git re ...

  7. Windows 10+Ubuntu 16.04在MBR分区上安装双系统之后启动菜单的System Setup选项提示:can't find command "fwsetup"

    背景: 硬盘分区方式:MBR 硬盘容量256,Windows 100,Ubuntu 156,其中主分区安装的是Windows,Ubuntu安装在逻辑分区上,文件系统为Ext4,整个Ubuntu就挂载在 ...

  8. Servlet发送邮件

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/sending-email.html: 使用Servlet发送一封电子邮件是非常简单的,但是开始之 ...

  9. qiniu

    @RestControllerpublic class QiNiuController { private static final Logger logger = LoggerFactory.get ...

  10. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...