Vue构建项目并添加依赖

1、vue-cli 快速构建项目

//安装vue-cli
npm install -g 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 bootstrap@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'