Vue之ElementUI架構的使用

1. element UI的使用

1.1 elementui簡介

基于Vue的Ui架構

餓了麼公司基于vue開的的vue的Ui元件庫

Element Ui 基于vue pc端的UI架構

MintUi 基于vue 移動端的ui架構

Element Ui 官網: http://element.eleme.io/

1.2 安裝elementui插件

安裝指令:  cnpm i element-ui -S         -S表示  --save
           

1.3 引入element UI的css 和 插件 (main.js)

import ElementUI from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\';
Vue.use(ElementUI);

           

1.4 *webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart

{
			test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
			loader: \'file-loader\'
      }
           

1.5 官方文檔直接使用

2. element UI元件的單獨使用（第一種方法）

2.1 安裝 babel-plugin-component

npm install babel-plugin-component -D / cnpm install babel-plugin-component -D (安裝淘寶鏡像後使用)
           

2.2 修改.babelrc 配置檔案

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

2.3 按需引入你需要的元件（main.js）

import { Button, Select } from \'element-ui\';
Vue.use(Button)
Vue.use(Select)
           

3. element UI元件的單獨使用（第二種方法）

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

	Vue.use(Button)
	Vue.use(Select)
	

	引入對應的css

		import \'element-ui/lib/theme-chalk/index.css\';

	如果報錯： webpack.config.js  配置file_loader

		  {
			test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
			loader: \'file-loader\'
	          }