项目初始化

1、安装vue-cli:

npm install -g vue-cli

2、创建基于webpack模板项目:

vue init webpack 项目名

3、引入axios并在main.js文件中将axios挂载到vue原型上:

npm install axios --save
import axios from 'axios'
Vue.prototype.$axios = axios

4、在config/index.js中修改proxyTable配置值如下:

proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:8088/api/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
      }
    }

5、引入vuex状态管理器:

npm install vuex --save

6、在main.js中注入到Vue实例:

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    isLogin: false
  },
  mutations: {
    changeLogin (state, payload) {
      state.isLogin = payload;
    }
  }
});

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
});

7、引入全局变量scss样式文件:

cnpm install sass-resources-loader --save-dev

8、在build/utils.js中配置loader:

将原:

scss: generateLoaders('sass')

改为:

scss: generateLoaders('sass').concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/scss/vars.scss')
      }
})
原文地址:https://www.cnblogs.com/yifamily/p/11790496.html