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 模板
学会了路由，才能懂得组件式的开发。
（二）.使用Element
使用 Element 和 Vue 相结合，可以实现快速开发。
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 为该命令的缩写。
就是在开发者模式下安装。
