1.首先根據官方文檔進行Element-ui的安裝,這個過程很簡單(經過webpack-simple)javascript
1) vue init webpack-simple element-uicss
2) cd element-uivue
3) npm install (若是失敗的話,多安裝幾回,仍是不行就使用cnpm安裝)java
4)npm install style-loader -S (由於webpack-simple默認沒有安裝style-loader)node
5)npm install element-ui -S (安裝element-ui)webpack
6) 修改webpack.json,加入style,file加載模塊web
module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] },
7 修改main.js(全局引入element-ui)npm
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import App from './App.vue' Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) })
8.編寫MessageBox組件element-ui
<template> <el-button type="text" @click="open">點擊打開 Message Box</el-button> </template> <script> export default { props:{ contents:{ type:String, default:'這是一段內容' }, title:{ type:String, default:'標題名稱' }, confirmTitle:{ type:String, default:'確認' } }, methods: { open() { var _this = this this.$alert(this.contents, this.title, { confirmButtonText: this.confirmTitle, callback: function() { // 這裏是回調函數,由於做爲一個組件,是個個地方都通用的,只是提供外部訪問接口 _this.$emit('callConfirm'); } }); } } } </script>
9 修改App.vuejson
<template> <div id="app"> <MessageBox @callConfirm="thisCallConfirm" title="我是傳過來的標題" contents="我是傳過來的內容" confirmTitle="確認按鈕"></MessageBox> </div> </template> <script> import MessageBox from './components/MessageBox.vue' export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, methods:{ thisCallConfirm(){ alert('我是回調過來的'); } }, mounted(){ }, components:{ MessageBox } }
10.完成編譯
11.瀏覽器運行代碼