Element UI 是一套采用 Vue 2.0 作為基礎框架實現(xiàn)的組件庫，一套為開發(fā)者缨恒、設計師和產(chǎn)品經(jīng)理準備的基于 Vue 2.0 的組件庫时迫，提供了配套設計資源，幫助你的網(wǎng)站快速成型.

• 本文參考Element UI 官網(wǎng)指南,
• 首先需要安裝Git工具和node.js,下載完成后回車安裝即可,也可以使用我網(wǎng)盤里的下載Git工具和node.js
• 然后新建一個文件夾,比如我們就叫My Project
• 打開新建的My Project文件,然后右鍵如圖:
  
  2017-11-15_185552.jpg
  
  正確安裝Git 點擊右鍵就會出來如圖,然后點開Git Bash Here
  點開后會出現(xiàn)一個黑框框就對了,(后續(xù)的命令大多在這里執(zhí)行,順便插一嘴,在這個黑框框里Ctrl+C復制和Ctrl+V粘貼是不行的,只有點擊右鍵Paste 進行粘貼和右鍵Copy進行復制.ctrl+c是重啟這個黑框框)

2017-11-15_185933.jpg

• 點開后我們安裝淘寶npm鏡像安裝,因為這個網(wǎng)速比較快,在黑框框里輸入命令npm install -g cnpm輸完按回車即可
  
  2017-11-15_190456.jpg
• 接下來我們就用cnpm來下載安裝后面的東西,使用cnpm替代原有的npm ,接下來安裝Vue-cli Vue-cli github.因為要使用它里面的一個模板,
  繼續(xù)在黑框框里執(zhí)行命令cnpm install -g vue-cli
  如圖,出來像這樣就對了
  
  2017-11-15_191238.jpg
• 安裝完畢后可以通過vue --version查看Vue版本;我當前版本是 2.9.1
• 然后通過vue list命令可 查看Vue-cli 得六種模板:
  
  2017-11-15_191737.jpg

一顆星星表示一種模板 我們則使用最后一種模板:webpack-simple模板

• 使用模板首先安裝模板,輸入命令vue init webpack-simple element-ui,
  這里需要注意了,webpack-simple是需要安裝的模板的名字,而element-ui則是存放模板的文件夾(可以起別的名字,盡量用英文).會自動創(chuàng)建在我們剛剛新建的My Project文件中顯示.

• 輸入上一條命令后會彈出好多? Project name (element-ui) 等,這些先不要管,直接回車即可.回車即可然后會出現(xiàn)如圖:
  

  2017-11-15_192555.jpg

• 到是否使用sass時 打一個n繼續(xù)按回車
  

  2017-11-15_192742.jpg

• 到這里你會發(fā)現(xiàn)你的My Project文件夾里多了一個element-ui文件就對了.

• 到這還沒完.回到黑框框輸入上邊給出的三行命令.依次執(zhí)行:
  cd element-ui
cnpm install
cnpm run dev
  這三行分別是什么意思呢:
  cd element-ui:進入element-ui這個文件夾
  cnpm install:(因為我們已經(jīng)下載cnpm 就用cnpm 代替npm即可).安裝webpack-simple模塊的依賴包(可能會慢一點,多等會即可)
  cnpm run dev:安裝完依賴后打開虛擬服務器(正確則會自動彈出瀏覽器);

• 讓我們一步步來,首先執(zhí)行cd element-ui:進入element-ui這個文件夾

• 然后在執(zhí)行cnpm install安裝依賴
  

  2017-11-15_194100.jpg

下面打?qū)磩t表示下載完成.然后你會發(fā)現(xiàn)你的element-ui里多了一個node_modules文件就對了

• 到這 你的文件結(jié)構應該是這樣才對:

  
  
  2017-11-15_195502.jpg

• 然后啟動虛擬服務器.輸入命令cnpm run dev輸完按回車,正確的話會彈出瀏覽器.如圖:

  2017-11-15_195944.jpg

如果覺得上面步驟沒錯就是不自動打開瀏覽器可以手動在瀏覽器了輸入http://localhost:8080/也可以出來.

• 現(xiàn)在黑框框應該是醬紫;

  
  
  2017-11-15_200205.jpg

• 到這就完成了一多半了,然后我們訪問Element 開發(fā)文檔

• 然后把我們的element-ui文件里的package.json文件改成下列代碼

{
  "name": "element-starter",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "element-ui": "^1.0.0",
    "vue": "^2.1.6"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-vue-app": "^1.2.0",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "style-loader": "^0.13.1",
    "vue-loader": "^9.8.0",
    "webpack": "beta",
    "webpack-dev-server": "beta"
  }
}

• 在把我們的element-ui文件里的webpack.config.js文件改成下列代碼:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        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|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

• 在把我們的element-ui文件里src中的main.js文件改成下列代碼:

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)
})

至此我們的便完成了 Element 的引入.后續(xù)只需要修改element-ui>src>App.vue中的內(nèi)容即可實現(xiàn)相應的組件效果.
比如我們做一個由Element 提供的走馬燈效果,只需要修改element-ui>src>App.vue中的內(nèi)容.代碼如下:

<template>
  <div id="app">
    <template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

• 然后我們會發(fā)現(xiàn)我們的用cnpm run dev打開的瀏覽器已經(jīng)成這樣了:
  
  2017-11-16_093118.jpg

這個錯誤是因為我們用的Element UI卻還沒有下載Element UI 的文件.所以我去那個黑框框按下ctrl+c.注意是按下ctrl鍵+c鍵.表示重啟命令行.重啟后即可重新輸入命令

• 重啟之后然后輸入cnpm install element-ui -S命令下載Element UI文件

2017-11-16_095518.jpg

• 下載完成后我們重新再輸入cnpm run dev打開虛擬服務器(自動彈出瀏覽器就對了)
  

  2017-11-16_100024.jpg

• 然后我們發(fā)現(xiàn)他有報了一個錯誤,大意是缺少一個style-loaber文件,
  

  2017-11-16_100413.jpg

• 好,那我們接著下載style-loaber文件.繼續(xù)返回黑框框.按下crtl+c鍵(crtl鍵+c鍵,同時按下表示重啟黑框框.重啟完才能繼續(xù)輸入命令.)
  然后我們輸入cnpm install style-loader --save dev命令.下載這個style-loader文件.輸完回車即可.
  

  2017-11-16_101237.jpg

這樣則表示下載完成.然后我們在輸入cnpm run dev啟動虛擬服務器即可彈出瀏覽器頁面,(如果輸完沒有彈出也不要著急).打開你的瀏覽器輸入網(wǎng)址//localhost:8086/,也是可以一樣打開的.

2017-11-16_101537.jpg

具體的服務器的網(wǎng)址以你的黑框框顯示的為準,在瀏覽器中輸入正確打開即可看到:

123.gif

• 當然我們肯定不會費這么大力氣只為了做一個跑馬燈,實際上這是Element UI 提供組件群里其中一個而且.更多的請訪問Element 組件
  -趕快為你的網(wǎng)站添加幾個炫酷的組件吧,
• 然而我們肯定不會輪播幾個數(shù)字.我們可以在里面添加圖片進行輪播.
• 首先打開你的My Project > element-ui.src > App.vue文件.以后修改組件大多在這里修改,我們把這里的代碼改成:

<template>
  <div id="app">
    <template>
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item>
      <img src="src/assets/1.jpg">
    </el-carousel-item>
    <el-carousel-item>
      <img src="src/assets/2.jpg">
    </el-carousel-item>
    <el-carousel-item>
      <img src="src/assets/3.jpg">
    </el-carousel-item>
    <el-carousel-item>
      <img src="src/assets/4.jpg">
    </el-carousel-item>
    <el-carousel-item>
      <img src="src/assets/5.jpg">
    </el-carousel-item>
  </el-carousel>
</template>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
img{
  width:100%;
}
</style>

• 然后在你們的文件My Project > element-ui.src > assets里添加幾張你自己的圖片,名字嫌麻煩可以直接把5張圖片改成1.jpg 2.jg 3.jpg 4.jpg 5.jpg ,
• 改完之后直接打開瀏覽器之后就能看到

5656.gif

圖片加載較慢.建議WiFi瀏覽

• 那以后我們是不是如果我們想給我們自己的網(wǎng)站添加這種輪播就可以直接用Element UI呢,
• 實際上Element UI 不止可以做一兩個輪播,它有一套豐富的組件庫供我們使用具體組件使用可以訪問Element UI 組件庫,基本上小到按鈕尺迂、字體 、圖標.大到布局都可以.它的豐富的組件庫可以選擇性的替代一些jQuery和Bootstrap的一些功能。
• 比如我們用Element UI 做一個布局噪裕。
• 我們把App.vue里的內(nèi)容改為這樣

<template>
  <div id="app">
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
img{
  width:100%;
}
 .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 60px;
  }
  .row-bg {
    padding: 20px 0;
    background-color: #f9fafc;
  }
</style>

• 然后打開瀏覽器看看蹲盘。應該如圖:

  
  
  2017-11-18_174045.jpg
• Element UI 的布局和Bootstrap.