這個系列是手把手教大家從零開始寫一個後臺管理系統，使用的技術：vuejs+vue-router+axios+vuex+element-ui+scss。

1.開發環境搭建

開始寫程式碼前準備工作要做好，包括vue開發環境，除錯工具的安裝，webstorm的配置，這個之前的文章裡有寫過，這裡就不再重複。

2.使用vue-cli建立專案

使用vue的腳手架工具vue-cli建立一個專案的基本模型。

vue init webpack pc-admin

3.安裝基本包

使用cnpm在本地把剛生成專案裡的依賴包下載到本地。

cnpm install

下載完以後用npm run dev

4.配置資料夾alias

為了之後方便引用，一般會在webpack.base.conf.js中配置資料夾的alias，使用vue-cli生的專案pc-admin中目前只有src，assets，components，router，static幾個資料夾，只需要在alias中加入以下程式碼即可，之後在專案開發過程中還會建立新的資料夾，類似的進行新增即可。

接下來就要引入我們要使用的，而vue-cli沒有新增的依賴庫。

5.引入element-ui

element-ui是現在比較常用的vue ui框架，主要用於PC端，使用起來也比較簡單。

• 安裝

cnpm install element
 
-ui --save

• 引用
  在main.js中新增下面程式碼：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI);

6.引入scss

scss是css的一種前處理器語言，主要是為了提高寫css樣式時的效率。

• 安裝

cnpm install node-sass -D
cnpm install sass-loader -D

• 使用
  在元件中的style標籤中新增rel="stylesheet/scss" 和lang="scss"
  即

<style rel="stylesheet/scss" lang="scss" scoped></style>

7.引入font-awesome

後臺管理系統中經常會用到一些圖示，而element-ui自帶的圖示很少，這裡引入一個常用的圖示庫font-awesome。

• 安裝

cnpm install font-awesome --save

• 引入
  在main.js中引入：

import 'font-awesome/css/font-awesome.min.css'

8.引入vuex

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。

• 安裝

cnpm install vuex --save

• 引入
  在src下新建一個資料夾名稱為store，並在store下新建一個index.js檔案，index.js的基本內容如下：

  

  在main.js中引用：

  import store from 'store/index.js'

  

9.引入axios

Axios 是基於Promise 的 HTTP 請求客戶端,可同時在瀏覽器和 node.js 中使用。Vue2.0也推薦使用axios。

• 安裝：

cnpm install axios --save

• 使用
  在main.js中引用：

import axios from 'axios'

axios並不能使用Vue.use()來進行註冊，因此為方便使用可以在引用之後加入以下程式碼：

Vue.prototype.$axios = axios;

這樣在需要使用axios的地方，直接使用this.$axios.xxx即可。

關於axios，在實際開發中還需要進行一些配置，這個在後面開發過程中再進行配置。後面將從登陸註冊頁面開始來一步一步的完成一個常見的後臺管理系統。