Vue引入jq boots 等

vue-cli脚手架搭建的vue项目中引入jquery

第一步

npm install jquery --save

第二步

在build/webpack.base.conf.js里加入

var webpack = require("webpack")

第三步

  • 同样build/webpack.base.conf.js中
  • 在module.exports的最后加入
plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
        jQuery: "jquery",
        $: "jquery",
        "windows.jQuery": "jquery"
    })
]

第四步

在main.js 引入import $ from 'jquery'

第五步

npm run dev重启服务器


vue-cli脚手架搭建的vue项目中引入bootstrap

因为bootstap的js动画插件是基于jquery的所以必须提前引入jquery;引入jquery步骤参考上面步骤即可

第一步

npm install bootstrap --save

第二步

在src/main.js中直接引入

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

第三步

npm run dev重启服务器


vue中使用axios

axios是vue-resource的替代品,用于向服务端发送ajax请求

第一步

`npm install axios --save`

第二步

在src/main.js中导入axios import axios from 'axios'

第三步

  • 方式一:
  • Vue.prototype.$axios=axios;//直接将axios对象添加到Vue的原型对象上面

- 方式二: 通过axiost提供的create方法创建一个axios的实例,然后去调用创建出来的实例

//这种方式可以做一些通用型的配置,
比如将接口地址的域名直接配置好,组件中使用axios请求接口的时候不用每次都写接口的完整地址,可省略域名部分,方便后期接口地址改变
var $https = axios.create({
  baseURL: 'http://www.demo.cc/',
  timeout: 1000
});

第三步

//在组件中直接使用即可(如果是方式二,url可不写域名)
this.$https.get(url)
  .then(function(response){
    console.log(response);
  })