Vue（二）异步通信和脚手架安装

---

一.axios

1.执行 get 请求

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2.执行 Post 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3.执行多个并发请求

// 发送 POST 请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
 }));

4. axios API

使用 axiso 传递相关配置来创建请求。

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

里面更多的参数，可以查看官网。
http://www.axios-js.com/zh-cn/docs/index.html

5.组件中的axios

get请求，直接看代码吧

<!--  -->
<template>
  <div>
    <h1>根据ID获取学生信息</h1>
    <p>请输入你要查询的ID：</p>
    <input type="text" v-model="PuID" />
    <p>你输入的Id是：{{PuID}}</p>
    <h3>此学生的相关信息如下：</h3>
    <p>该学生的ID：{{student.id}}</p>
    <p>该学生的名字：{{student.name}}</p>
    <p>该学生的ID：{{student.password}}</p>
    <input type="button" value="点击查询" @click="getJoke" />
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      student: [],
      PuID:''
    };
  },
  // mounted() {
  //   this.getJoke();
  // },
  methods: {
    getJoke: function () {
        // console.log('sdsssss'+this.PuID)
      let that = this; // 因为this会变，所以直接把this 存为that
      axios
        .get("http://pengzhao.xyz:5010/api/student/getid", {
          params: {
            studentid: this.PuID,
          },
        })
        .then(
          function (response) {
            // console.log(response.data);
            that.student = response.data;
          },
          function (err) {}
        );
    },
  },
};
</script>

<style  scoped>
</style>

---

二.安装 Vue 脚手架

（一）脚手架基础

1.环境准备

1.node.js 安装

官网下载，一路无脑安装即可。
https://nodejs.org/en/

2.查看是否安装成功

查看是否能打印出正常的版本号：

node -v 

npm -v 

3.更换淘宝镜像加速器

npm install cnpm -g

尽量使用 npm cnpm 是国内安装

4.安装vue-cli

cnpm install vue-cli -g

安装完以后，我们查看基于那些 Vue 模板创建程序

vue list

如果提示系统禁止运行脚本，那么参考下边连接

https://blog.csdn.net/wqnmlgbsz/article/details/100654258

结果如下：

webpack 能够打包降级，然后是通用型。

2.建立第一个Vue 程序

vue init webpack myvue

这里的 vue 是项目名称，可以自己创建。然后下边的选择一路 no 就行了。剩下的学习自己手动配置。

3.初始化并运行

cd myvue   // 进到了Vue 里面
npm install //初始化
npm run dev  //运行dev 可以实现组件的热部署。

初始化其实是根据 package.json 配置文件的要求初始化的。
如果在初始化过程中，有报错，直接执行提示命令即可。

停止运行，使用 ctrl + C

4. Vue的目录结构

• Src ：写文件里面。(里面都是使用组件的方式进行开发)
• build ：是构建的文件。

安装webpack 打包工具

npm install webpack -g
npm install webpack-cli -g

测试是否安装成功：

• webpack -v
• webpack -cli -v

监听

 webpack --watch

使用该命令可以使用热部署；

webpack 其实就是一个大包工具.

5.路由

Vue Router 是 Vue.js 官方路由管理器。他和Vue.js 的核心深度集成，让构建的单页面应用变得易如反掌。

1.安装vue - route

npm install vue-router --save-dev
 加 -dev 是指在开发的时候使用，其实在生产中也应该使用才对，
 这个时候，就要把最后 -dev 给去掉。

2.新建 vue 模板

使用vscode创建vue文件时，自动生成vue文件模板

学会了路由，才能懂得组件式的开发。

（二）.使用Element

使用 Element 和 Vue 相结合，可以实现快速开发。

Element

element 推荐使用 npm 安装

7.自己动手搭建一个

1.项目建立步骤

1.进入工程目录

vue init webpack hello-vue
cd hello-vue

2.安装 vue-router

npm install vue-router  --save-dev

3.安装 element-ui

npm i element-ui -S

4.安装依赖

npm install

5.安装 SASS 加载器

cnpm install sass-loader  node-sass  --save-dev

6.启动测试

npm run dev

7.打包

npm run build

2.Npm 命令解释

npm install moduleName : 安装模块到项目目录下


npm install -g moduleName:  
-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置


npm install -save moduleName ：
--save的意思是将模块安装到项目目录下，并且在package 文件的 dependercies 节点写入依赖，， -S为该命名的缩写。


npm install -save-dev  moduleNam e:
--save-dev 的意思是将模块安装到项目目录下，并在package文件的 devDependencies 节点写入依赖，-D 为该命令的缩写。
就是在开发者模式下安装。

参考文献

官网： https://cn.vuejs.org/v2/guide/installation.html#CDN