vue-cli中如何引入bootstrap

vue-cli中如何引入bootstrap

first step:下载jq

cd 到项目目录下，运行npm install jquery --save-dev（npm换成cnpm更好，国内环境下使用cnpm下载速度更快）。

图 1

second step:修改build目录下的webpack.base.conf.js配置文件:

• 加入webpack对象，var webpack = require('webpack');
• 在module.exports里面加入以下配置:

plugins: [

　　　　new webpack.ProvidePlugin({

　　　　　　$:"jquery",

　　　　　　 jQuery:"jquery",

　　　　　　 "windows.jQuery":"jquery"

　　　　 })

　　]  

• 在入口文件中main.js中加入：import jquery from 'jquery'

third step:引入bootstrap文件：

• 修改webpack.base.conf.js文件：

alias: {  

　　　　 'vue$': 'vue/dist/vue.esm.js',  

　　　　 '@': resolve('src'),  

　　　　 'assets': path.resolve(__dirname, '../src/assets'),  

　　　　 'jquery': "jquery/src/jquery"  

　　 }  

• 在入口的文件main.js中加入

　import './assets/css/bootstrap.min.css'  

　import './assets/js/bootstrap.min' 

• 在assets文件目录中拷贝bootstrap各种文件：

图 2

vue cli中如何 导入axios:

first step:在终端中输入以下命令

npm install axios
npm install vue-axios

second step:修改main.js

import axios from 'axios'
import VueAxios from "vue-axios";

Vue.use(VueAxios,axios);
Vue.prototype.$ajax = axios;   //$ajax是起的别名，你可以起$axios或者$http

third step: 使用ajax

//方式一
this.axios({
          method: 'get',
          url: "http://wthrcdn.etouch.cn/weather_mini",
          params: {
            city: this.city,
          }
        }).then(response => {
          this.weather_list = response.data.data.forecast;
          var fengxiang = response.data.data.yesterday.fx;
          var fengli = response.data.data.yesterday.fl;
          this.yesterday = response.data.data.yesterday;
          this.yesterday.fengxiang = fengxiang;
          this.yesterday.fengli = fengli;
          this.weather_list.splice(0, 0, this.yesterday);
        }).catch(error => {
          console.log('http请求失败');
          this.error_msg = 'http请求失败（未知城市）'
        })
      },


//方式二

this.$ajax.get("http://wthrcdn.etouch.cn/weather_mini", {
          params: {city: this.city}
        }).then(response => {
          this.weather_list = response.data.data.forecast;
          var fengxiang = response.data.data.yesterday.fx;
          var fengli = response.data.data.yesterday.fl;
          this.yesterday = response.data.data.yesterday;
          this.yesterday.fengxiang = fengxiang;
          this.yesterday.fengli = fengli;
          this.weather_list.splice(0, 0, this.yesterday);
        }).catch(error => {
          console.log('http请求失败');
          this.error_msg = 'http请求失败（未知城市）'
        })

固定方式:

//方式一的使用格式：
this.axios({
	method:'',
	url:'',
	params:{}
}).then(res=>{}).catch(error=>{})


//方式二的使用格式
this.$ajax.get("", {
          params: {}
        }).then(response => {

        }).catch(error => {

        })