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

好啦，要去寫做業了，我愛學習！第一篇博客就到這吧。