1.搭建Vue-Cli脚手架
1.1.安装npm
NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
实际上，npm就是前端的Maven。
从node官网下载并安装node，安装步骤很简单，只要一路next就可以了。 安装完成后，打开命令行工具输入命令node -v，出现对应版本号，就说明安装成功了。
1.2.全局安装 vue-cli
全局安装vuecli（就相当与在本机的npm仓库中有了vuecli）：
//安装最新@vue/cli版本
npm install -g @vue/cli
//安装指定的@vue/cli版本
npm install -g @vue/[email protected]
安装完成后，使用 vue -V 显示版本号来测试vue是否安装成功。
C:\Users\Administrator>vue -V
@vue/cli 5.x.x
其它命令：
# 查看远程仓库中的@vue/cli版本号:
npm view @vue/cli versions --json
# 卸载旧版本的vue-cli：
npm uninstall vue-cli -g
1.3.创建vue-cli工程
- 在命令行下进入到工作空间文件夹中，输入如下命令：
vue create hello hello是工程名（注意：工程名必须全部小写）
- 如果系统检测到你的网络环境不好，会自动提示是否要切换npm仓库地址：
? Your connection to the default npm registry seems to be slow.
Use https://registry.npmmirror.com for faster installation? (Y/n)
如果出现此选项，选择"Y"即可。
- 选择预设模板。这里选择“Manually select features”（手动选择特征）
- 通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。
- Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
- TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。。
- Progressive Web App (PWA) Support：渐进式Web应用程序
- Router ：vue-router（vue路由）
- Vuex ：vuex（vue的状态管理模式）
- CSS Pre-processors ：CSS 预处理器（如：less、sass）
- Linter / Formatter：代码风格检查和格式化（如：ESlint）
- Unit Testing ：单元测试（unit tests）
- E2E Testing ：e2e（end to end） 测试
第一次创建工程时，可以只选择Babel和Router即可。
- 选择Vue版本，这里选择Vue3.0。
> 3.x
2.x
- 选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
- 询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json
- 询问是否将当前选择保存以备下次使用。这里选择“n”。
? Save this as a preset for future projects? (y/N) n
- 接下来耐心等待安装：最后出现：
$ cd hello
$ npm run serve
按照提示，进入工程根目录。
- 输入：npm run serve 启动工程。
2.axios框架
在实际开发中，我们都使用一些封装好的ajax框架。
优秀的ajax框架很多，这里我们选用axios框架。原因是：Vue官方推荐使用的就是axios框架。
axios框架中文官网：http://www.axios-js.com/
2.1.get方式与post方式请求
在学习axios之前，首先要知道：http请求方式有两种：get方式、post方式。
- get方式：显式提交。
将表单内容经过编码之后 ，通过URL发送， 即将提交参数写在URL地址的后面。
使用get方式发送时有字符长度的限制（因为get方式请求的参数是放在请求头中的），不安全。
- post方式：隐式提交。
将表单的内容通过http发送，即不将提交参数写在URL地址的后面，而是封装在请求体中。
post没有字符长度的限制，安全。（因为post方式请求的参数是放在请求体中的）
注意：
- 在早期的、前后端不分离的开发模式中，大量使用表单提交、超链接提交等。那么、表单提交、超链接提交默认都是get方式。只有在表单中明确设置 method="post" 时，才是post提交、
- 现在的前后端分离开发模式中，已经不再使用表单提交、超链接提交等，而都是使用 ajax 提交
2.2.axios的get方式请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//get方式请求，请求参数直接写在url的后面
axios.get('http://api.tianapi.com/txapi/ncovcity/index?key=自己的key')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
</script>
2.3.axios的post方式请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//将json数据转成URI编码，并解析为xxx=xxx&xxx=xxx形式
function transformRequest(data) {
let ret = '';
for (let it in data) {
ret += encodeURIComponent(it)+'='+encodeURIComponent(data[it])+'&';
}
return ret;
}
//post方式请求，请求参数不写在url的后面（需要将json对象参数转码，服务器端才能识别）
axios.post('http://api.tianapi.com/txapi/ncovcity/index', transformRequest({
key: '自己的key'
}))
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
</script>
2.4.axios响应数据结构
axios响应的数据结构是一个json对象，此json对象结构如下：
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request' 请求信息
request: {}
}
2.5.axios的全局配置
可以在全局配置axios的一些属性，那么这些配置就将被用在各个请求中。
//设置axios的基础url部分
axios.defaults.baseURL = 'https://api.example.com';
2.6.axios拦截器
我们还可以在请求或响应之前，拦截请求和响应。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//请求拦截器
axios.interceptors.request.use(function(config) {
console.log('在发送请求之前做些什么');
return config;
}, function(error) {
console.log('对请求错误做些什么');
return Promise.reject(error);
});
//响应拦截器
axios.interceptors.response.use(function(response) {
console.log('在响应之前做些什么');
return response;
}, function(error) {
console.log('对响应错误做点什么');
return Promise.reject(error);
});
axios.get('http://api.tianapi.com/txapi/ncovcity/index?key=自己的key')
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
</script>
注意：修改请求url使之成为一个错误的url，运行后，会触发拦截 “请求之前” 和 “响应错误” 。
3.在Vue-cli中使用axios
1 添加axios模块：
npm install axios --save
2 添加成功后，在package.json文件中就可以看到：
"dependencies": {
"axios": "^0.26.1",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
}