vue学习（2）项目依赖添加和后台访问配置

1.新添加的依赖会在package.json(其中dev开头的是开发环境)中显示，添加依赖有两种方式(在项目路径下)：

1)npm  install  依赖名

2)在package.json中添加，通过npm  install进行安装

2.在项目中使用bootstrap

1) 在项目路径下执行npm  install  bootstrap，由于bootstrap使用了jquery需要再执行npm  install  jquery

2) 在项目根目录下创建vue.coonfig.js文件，项目会自动识别该配置文件，并进行如下配置

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    }
}

3) 在main.js中进行导入

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

如果要使用jquery需要导入jquery

import $ from 'jquery'

3.使用axios进行后台接口调用

1)使用 npm  install  axios添加依赖；

2)在vue.config.js中添加如下配置，可以和上边的配置放在一起

const webpack = require("webpack");

module.exports = {
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/': ''
                }
            }
        }
    },
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    }
}

3) 在main.js中进行导入

import Axios from 'axios';

Vue.prototype.$http = Axios

4) 在项目中进行测试是否可以调用

methods: {
    contact() {
      this.$http.get("/test/msg").then(resp => {
        console.log(JSON.stringify(resp.data));
      });
    }
  }