Element-Ul是餓了麽前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是Mint UI 。

開發環境

1.安裝webpack

npm install -g webpack

• 1

2.安裝vue-cli

vue-cli是什麽？

vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。

使用步驟：

• 安裝vue-cli：

  npm install -g vue-cli

  • 1

• 使用vue-cli構建項目

  vue init webpack project-name  //創建一個基於webpack模板的名為project-name的項目

  • 1

  目前可用的模板包括：

  • browserify –全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試。
  • browserify-simple–一個簡易的Browserify + vueify，以便於快速開始。
  • webpack–全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試。
  • webpack-simple–一個簡易的Webpack + vueify，以便於快速開始。

• 安裝項目依賴

  cd project-name    //進入項目目錄
  npm install        //安裝項目依賴
  npm run dev        //運行項目

  • 1
  • 2
  • 3

此時在瀏覽器打開：localhost:8080即可看到歡迎頁。

關於webpack和vue-cli的更多使用方法參見官方文檔。

• 但是這個只能在本地跑，要如何在我們自己的服務器上訪問呢？此時需要執行

  npm run build

  • 1

搭建開發環境

本來想用vue-cli重新創建項目，試了幾次總是出現各種問題，沒辦法成功。最後在仔細查看 Element-UI 的官方文檔的 快速上手 部分的時候發現 餓了麽 團隊給了一個他們自己的 項目模板 。於是我就用這個模板來嘗試了下，結果成功了。所以，如果你不想太折騰的話，建議還是使用官方給的項目模板，可以省很多事。

第一步：安裝項目模板

• 克隆/下載項目模板

• 將下載的模板放到你項目的根目錄下

• 安裝依賴

  npm install

  • 1

• 運行項目模板

  npm run dev

  • 1

  此時在瀏覽器打開：localhost:8080即可看到歡迎頁。

  

項目模板裏已經把需要配置的文件都配置好了。

第二步：安裝element-ui

第一步，我們成功安裝了項目模板，接下來，我們需要安裝element-ui到項目下。

npm i element-ui@next -D

• 1

開始使用

接下來我們就可以參照 Element-UI 的官方文檔上手開發了。

例子

我們參照官方的按鈕組件使用說明，在項目模板的基礎上做一個按鈕的例子。其它文件不需要改動，只修改App.vue文件的內容。代碼如下：

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <el-button @click.native="startHacking">Let‘s do it</el-button>
    <div class="block">
    <span class="demonstration">顯示默認顏色</span>
    <span class="wrapper">
    <el-button type="success">成功按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
    </span>
    </div>
    <br/>
    <div class="block">
      <span class="demonstration">hover 顯示顏色</span>
    <span class="wrapper">
    <el-button :plain="true" type="success">成功按鈕</el-button>
    <el-button :plain="true" type="warning">警告按鈕</el-button>
    <el-button :plain="true" type="danger">危險按鈕</el-button>
    <el-button :plain="true" type="info">信息按鈕</el-button>
    </span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: ‘Use Vue 2.0 Today!‘
    }
  },

  methods: {
    startHacking () {
      this.$notify({
        title: ‘It Works‘,
        message: ‘We have laid the groundwork for you. Now it\‘s your time to build something epic!‘,
        duration: 6000
      })
    }
  }
}
</script>

<style>
body {
  font-family: Helvetica, sans-serif;
}
</style>

效果如下圖所示：

使用過程中碰到的問題：

1. phantomjs安裝失敗

由於源的問題，安裝phantomjs必須要“搭梯子”，使用內網無法下載。所以解決的方法有兩種：

• 方法一：通過科學上網，然後安裝。

• 方法二：對於不知道怎麽“搭梯子”的同學，可以通過更改源來下載，操作方法如下：

  npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

  • 1

2.打開頁面亂碼

通過 Element-UI 官方提供的項目模板開發，會發現在瀏覽器打開頁面的時候，中文是亂碼的。如下圖所示：

但html頁面中已經設置了<meta chartset=‘utf-8‘> 。

仔細查看該頁面所涉及的文件的編碼格式的時候，發現引用的App.vue 文件的編碼格式是GBK ，所以把該文件編碼格式改為UTF-8 即可。

Element-UI使用基本介紹