Element-UI使用基本介紹

開發環境

---

1.安裝webpack

npm install -g webpack

2.安裝vue-cli

vue-cli是什么？

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

使用步驟：

• 安裝vue-cli：

  npm install -g vue-cli

 

使用vue-cli構建項目

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

• 目前可用的模板包括：

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

• 安裝項目依賴

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

 

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

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

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

  npm run build

搭建開發環境

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

 

第一步：安裝項目模板

• 克隆/下載項目模板

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

• 安裝依賴

  npm install

運行項目模板

npm run dev

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

 

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

第二步：安裝element-ui

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

npm i element-ui@next -D

 

npm install -g yarn

 yarn

開始使用

接下來我們就可以參照 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>

運行項目 

npm run dev

效果如下圖所示：