【用脚手架创建基础的vue2 vue3应用+axios安装引入】

1、安装nodejs

1、下载地址为：https://nodejs.org/en/
2、一路点击Next，检查是否安装成功

3、提高我们的效率，使用镜像：http://npm.taobao.org/
输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替

npm install -g cnpm –registry=https://registry.npm.taobao.org

检查是否成功

安装 yarn

npm install -g yarn

yarn --version

安装最新稳定版 vue

cnpm install vue@next

2、安装脚手架 vue cli

yarn global add @vue/cli

或者

全局安装 vue-cli（推荐）

cnpm install -g @vue/cli

查看版本

vue --version

然后在 Vue 项目中运行

vue upgrade --next

3、CMD 进入项目文件夹

vue init 创建**【vue2】**项目

vue init webpack runoob-vue3-test

进入创建的项目目录内

cnpm run dev

若出现

说明浏览器不在支持范围内，被限制了。改用谷歌浏览器或者火狐浏览器

或者

module.exports = {
    devServer: {
        disableHostCheck: true,
    }
}

vue create 创建**【vue3】**项目

vue create sgd-vue3-demo

若存在文件夹则会被覆盖

在1处选择vue 3项目
在2处选择路由

需要什么选什么

hbuild打开文件夹

4、安装axios

注意：在项目文件夹下

npm install axios --save

npm install vue-axios --save

import “bootstrap”
import “bootstrap/dist/css/bootstrap.css”
import ‘jquery’

const app = createApp(App)

app.use(VueAxios,axios);

app.use(store).use(router).mount(‘#app’)

//createApp(App).use(store).use(router).mount(‘#app’)

在使用到的vue中先引入

```javascript
import axios from 'axios'

再使用 axios.get() 或 axios.post()

使用vue-axios插件引入axios

vue2引入：

  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  import Router from 'vue-router'

  Vue.use(Router)

  Vue.prototype.$axios = axios
  Vue.use(VueAxios, axios)

  

axios
    .get('https://devapi.qweather.com/v7/weather/now', {
        params: {
          location: '101010100',
          key: 'mykey'
        }
      })
      .then(response => {this.info = response.data;alert(" info ok");})
      .catch(function (error) {
        console.log(error);
      });

let param = new URLSearchParams();
    	param.append('userid','20');

axios
        .post('http://localhost:8081/postuser',param)
        .then(response => {
          alert(response.status);

          this.mydatad=response.data;
          console.log(response);
        })
        .catch(function (error) {
          alert(response.status);
          console.log(error);
        });

vue3引入：

在main.js中

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import axios from 'axios'
import VueAxios from 'vue-axios'

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
import 'jquery'



const app = createApp(App)
  
app.use(VueAxios,axios);

app.use(store).use(router).mount('#app')

//createApp(App).use(store).use(router).mount('#app')

5、我的实例 vue2+axios

【get】

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ mydata }}</h1>

    <a href="/login">login</a>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.prototype.$axios = axios
Vue.use(VueAxios, axios) // 安装插件

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      mydata: 'sgds'
    }
  },
  mounted () {
    alert("axios");
    /*
    axios
    .get('https://devapi.qweather.com/v7/weather/now?location=101010100&key=137979787efc4165a53959ebb0e88b47')
    .then(response => (this.mydata = response.data))
    .catch(function (error)
    {
            alert("error");
          });
      }*/

      axios
      .get('https://devapi.qweather.com/v7/weather/now', {
          params: {
            location: '101010100',
            key: '和风天气申请来的key'
          }
        })
        .then(response => {this.mydata = response.data;alert("ok");})
        /* 此方法不可用
        .then(function (response) {
          alert("ok");
          alert(response.data);
          self.mydata = response.data;
          console.log(response);
        })*/
        .catch(function (error) {
          alert("error");
          console.log(error);
        });
  }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

【post】

<template>
  <div class="hello">
    <h1>{{ msga }}</h1>
    <h1>{{ mydatad }}</h1>
    <h1 id="info">{{ info }}</h1>

    <button @click="gotouser">gotouser</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  import Router from 'vue-router'

  Vue.use(Router)

  Vue.prototype.$axios = axios
  Vue.use(VueAxios, axios) // 安装插件 https://devapi.qweather.com/v7/weather/now

export default {
  name: 'login',
  data () {
    return {
      msga: 'login',
      mydatad: 'dddsss',
      info: 'Ajax 测试!!'
    }
  },
  mounted () {

    this.msga="params="+ this.$route.params.userId;

    // 也可以通过 params 设置参数：
    axios
    .get('https://devapi.qweather.com/v7/weather/now', {
        params: {
          location: '101010100',
          key: '和风天气申请来的key'
        }
      })
      .then(response => {this.info = response.data;alert(" info ok");})
      .catch(function (error) {
        console.log(error);
      });


       //alert(this.$route.params.userId);
  },
  methods:
  {
    gotouser(event)
    {
      alert("gotouser");


      let param = new URLSearchParams();
    	param.append('userid','20');


      axios
        .post('http://localhost:8081/postuser',param)
        .then(response => {
          alert(response.status);

          this.mydatad=response.data;
          console.log(response);
        })
        .catch(function (error) {
          alert(response.status);
          console.log(error);
        });

    }
  }
  }






</script>

<style>
</style>

6、我的实例 vue3+axios

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import axios from 'axios'
import VueAxios from 'vue-axios'

import "bootstrap"
import "bootstrap/dist/css/bootstrap.css"
import 'jquery'



const app = createApp(App)
  
app.use(VueAxios,axios);

app.use(store).use(router).mount('#app')

//createApp(App).use(store).use(router).mount('#app')

my.vue

<template>

	<h1>{{magss}}</h1>
	<h1>{{ info }}</h1>
	<h1>{{ mydatad }}</h1>
	<button @click="gotouser">gotouser</button>
	<br>
	<button @click="gotoproduct">gotoproduct</button>

	
</template>

<script>

import axios from 'axios'
	
	
export default {
  name: 'test_bootstrap',
  data () {
    return {
      magss: 'test_bootstrap',
	  mydatad:'mydatad',
	  info:'info'
    }
  },
	mounted () {
		
		
      //alert("test_bootstrap.vue");
	  
	},
	methods:
	{
		gotouser(event)
		{
			alert("gotouser");
			
			axios
			.get('https://devapi.qweather.com/v7/weather/now', {
			    params: {
			      location: '101010100',
			      key: 'mykey'
			    }
			  })
			  .then(response => {this.info = response.data;alert(" info ok");})
			  .catch((err) => {
			    console.log(err);
			  });
		},
		gotoproduct(event)
		{
			alert("gotoproduct");
			
			let param = new URLSearchParams();
			param.append('userid','20');
			
			
			axios
			  .post('http://localhost:8081/postuser',param)
			  .then(response => {
			    alert("ok");
			
			    this.mydatad=response.data;
			    console.log(response);
			  })
			  .catch((err) => {
				  
			    alert("err");
			    console.log(err);
			  });
		}
	  
	  
	}
	  
	  
	  
}

	//----------axios






</script>

<style lang="scss" scoped>

</style>