1、vue-cli 快速構建專案

npm install -g vue-cli   //安裝vue-cli
vue init webpack market-manage  //構建並初始化專案
cd market-manage
npm run dev  //啟動專案

2、安裝 normalize.css

npm install normalize.css --save
# main.js 中引入  
import 'normalize.css'

3、安裝 sass

npm install sass-loader node-sass --save-dev

4、安裝 element-ui

npm i element-ui -s
# main.js 中引入 
 

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

主題色自定義

# 專案中使用了 SCSS，可以新建一個樣式檔案 element-variables.scss ，直接修改主題色變數，然後在專案的入口檔案 main.js 中引入該檔案即可。
# element-variables.scss 中寫入：
        /* 改變主題色變數 */
        $--color-primary: #3c8dbc;
        /* 改變 icon 字型路徑變數，必需 */
 

        $--font-path: '~element-ui/lib/theme-chalk/fonts';
        @import "~element-ui/packages/theme-chalk/src/index";
# main.js 中匯入：
        import './assets/scss/element-variables.scss'   //檔案路徑

5、安裝Vuex 狀態管理

npm install vuex --save
# stor.js 中引入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 

6、引入 promise 墊片

npm install es6-promise --save
# 在使用 vuex 之前， 引入如下程式碼
import 'es6-promise/auto'
import store from './store'  //vuex

7、安裝 axios

npm install axios --save

8、引入 jQuery （安裝 AdminLte 前提 1 ）

npm install jquery --save
# 在 webpack.base.conf.js 裡
# 頂部引入
var webpack = require('webpack')
# module.exports 最後加入
  plugins: [ 
    new webpack.ProvidePlugin({ 
      $:"jquery", 
      jQuery:"jquery", 
      "windows.jQuery":"jquery"
    }) 
  ]

9、安裝 bootstrap （安裝 AdminLte 前提 2 ）

npm install [email protected]3 --save
# main.js 匯入
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.min.js'

10、安裝 font-awesome （安裝 AdminLte 前提 3 ）

npm i font-awesome --save
# main.js 匯入
import 'font-awesome/css/font-awesome.css'

11、整合 admin-lte

npm i admin-lte --save
# main.js 匯入
import 'admin-lte/dist/css/skins/_all-skins.min.css'
import 'admin-lte/dist/css/AdminLTE.min.css'
import 'admin-lte/dist/js/adminlte.min.js'

      </div>
    </div>