Element-UI使用指南

原網址：https://blog.csdn.net/u012285967/article/details/53023825

 

 

 

Element-UI是餓了么前端團隊推出的一款基於Vue.js 2.0 的桌面端UI框架，手機端有對應框架是 Mint 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

開始使用

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

2.打開頁面亂碼

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

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

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