好像現在網站搭建都不用太在乎前端框架的使用，其實在Vue的流行下，我也曾經研究過使用Vue Element UI搭建網站。

Vue Element UI是一個基于Vue.js2.5以上和element-ui2.3以上的中后臺解決方案，借助已經成熟的UI，提供了豐富的組件庫，也同時支持.scss樣式文件的按需加載。

在開始我們的搭建之前，需要在Node.js平臺下安裝Vue腳手架，這是構建單頁面應用的最佳選擇，類似于快速將你的項目架構打搭好，然后才能開始真正的頁面組合工作。

$ npm install -g vue-cli
$ vue init webpack my-project（初始化一個webpack模板的Vue項目）
$ cd my-project
$ npm install

安裝上述命令之后我們便完成了項目搭建的初步工作，運行該命令后會出現提示，需要你填寫項目名稱、作者、Vue版本、Vue-router、Vuex等等基本信息。

? Project name demo
? Project description A Vue.js project
? Author MIAOCHAOHAN? Vue build standalone（不需要同時兼容IE8及以下）
? Install vue-router? Yes（選擇Vue-router路由）
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard（這里選擇ESLint的預設「Standard」）
? Set up unit tests No（不需要執行單元測試）
? Setup e2e tests with Nightwatch? No（不需要執行前端自動化測試）

下面我們要引入Element UI及其樣式庫。

$ npm install element-ui -S

需要在webpack進行簡單的配置（本項目的webpack配置文件：webpack.base.conf.js）

// 引入Element UI 配置
entry: {
app: './src/main.js'
},
//在module節點下添加
module: {
rules: [
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
}

引入的方式很容易理解吧。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'

繼而可以掛載到Vue對象的實例上。

Vue.use(ElementUI)

至此，我們就可以玩耍了，在實際的開發工作中，Element UI的組件的選用應該依據實際需求來定，整個庫是開源的，我們不妨選擇自己喜歡的方式進行創造，想要了解更多相關內容，建議參考官方文檔進行詳盡講解。