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

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