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

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