Vue使用脚手架进行前端项目开发

首先需要安装node.js这里就不在叙述

https://nodejs.org/en/

安装vue脚手架

npm install -g vue-cli

创建项目

打开router路由，用于界面跳转

vue init webpack yourprojectname

切换到项目目录下。执行命令

npm install
npm run dev  //开发模式
npm run build //编译打包

如何创建一个.vue文件

<template>
  <div id="app">
     {{msg}},{{id}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '我是Vue首页',
      id:0
    }
  },
  created:function(){
    this.$data.id = this.$route.params.id;
  }
}
</script>
<style scoped>

</style>

路由跳转携带参数

toHello:function(){
     this.$router.push({name:"HelloWorld",params:{id:1}});
}

//参数接收
 this.$data.id = this.$route.params.id;

HTTP请求

import axios from 'axios'
import vueAxios from 'vue-axios'

axios.defaults.baseURL = "http://www.51hyi.cn:8080";
axios.defaults.timeout = 3000;

Vue.use(vueAxios, axios)

get

this.axios.get('/login',{
           params:{
             username:"admin",
             password:"5345"
           }
         })
        .then(function (response) {
          if(response.status == 200){
             alert("请求成功：" + JSON.stringify(response.data));
          }
        })
        .catch(function (error) {
           alert("请求失败");
        });

post

import qs from 'qs'

url参数提交，axios默认是已json的格式提交

this.axios.post('/login',qs.stringify({
          username:'admin',
          password:'5345'
        }))
        .then(function (response) {
          if(response.status == 200){
            alert("请求成功：" + JSON.stringify(response.data));
          }
        })
        .catch(function (error) {
           alert("请求失败");
        });