Vue学习-Element框架

今天学了一个基于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

好啦，要去写做业了，我爱学习！第一篇博客就到这吧。