zoukankan      html  css  js  c++  java
  • 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 => {
    
            })
    
    
  • 相关阅读:
    [模板]RMQ(冲刺准备中)
    洛谷 P2569[SCOI2010]股票交易(动规+单调队列)
    洛谷 P3659 [USACO17FEB]Why Did the Cow Cross the Road I G
    粗略了解fill与fill_n
    计蒜客D2T2 蒜头君的排序(动态维护树状数组)
    洛谷 P3478 [POI2008]STA-Station
    洛谷 P2899 [USACO08JAN]手机网络Cell Phone Network
    洛谷 P3112 [USACO14DEC]后卫马克Guard Mark
    洛谷 P3092 [USACO13NOV]没有找零No Change
    洛谷 P2850 [USACO06DEC]虫洞Wormholes 判负环
  • 原文地址:https://www.cnblogs.com/surpass123/p/13166920.html
Copyright © 2011-2022 走看看