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); })