1、vue-cli 快速構(gòu)建項(xiàng)目

//安裝vue-cli
npm install -g vue-cli   
//構(gòu)建并初始化項(xiàng)目
vue init webpack market-manage  
cd market-manage
//啟動(dòng)項(xiàng)目
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);

主題色自定義

# 項(xiàng)目中使用了 SCSS，可以新建一個(gè)樣式文件 element-variables.scss ，
#直接修改主題色變量，然后在項(xiàng)目的入口文件 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 中導(dǎo)入：
        import './assets/scss/element-variables.scss'   //文件路徑

5、安裝Vuex 狀態(tài)管理

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 bootstrap@3 --save
# main.js 導(dǎo)入
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 導(dǎo)入
import 'font-awesome/css/font-awesome.css'

11、集成 admin-lte

npm i admin-lte --save
# main.js 導(dǎo)入
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'