Vue-Cli脚手架

1.搭建Vue-Cli脚手架

1.1.安装npm

NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种：

1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3. 允许用户将自己编写的包或命令行程序上传到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/cli@x.x.x

 

安装完成后，使用 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工程

 

1. 在命令行下进入到工作空间文件夹中，输入如下命令：
   vue create hello     hello是工程名（注意：工程名必须全部小写）

2. 如果系统检测到你的网络环境不好，会自动提示是否要切换npm仓库地址：

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? (Y/n)

　　　　如果出现此选项，选择"Y"即可。

3. 选择预设模板。这里选择“Manually select features”（手动选择特征）

4. 通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。

1. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
2. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。。
3. Progressive Web App (PWA) Support：渐进式Web应用程序
4. Router ：vue-router（vue路由）
5. Vuex ：vuex（vue的状态管理模式）
6. CSS Pre-processors ：CSS 预处理器（如：less、sass）
7. Linter / Formatter：代码风格检查和格式化（如：ESlint）
8. Unit Testing ：单元测试（unit tests）
9. E2E Testing ：e2e（end to end） 测试

　　　　第一次创建工程时，可以只选择Babel和Router即可。

5. 选择Vue版本，这里选择Vue3.0。

> 3.x  
  2.x

 

6. 选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

 

7. 询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”。

? Where do you prefer placing config for Babel, ESLint, etc.?
  In dedicated config files
> In package.json

 

8. 询问是否将当前选择保存以备下次使用。这里选择“n”。

? Save this as a preset for future projects? (y/N) n

 

9. 接下来耐心等待安装：最后出现：

 $ cd hello
 $ npm run serve

　　　　按照提示，进入工程根目录。

 

10. 输入：npm run serve 启动工程。 

 

2.axios框架

 

在实际开发中，我们都使用一些封装好的ajax框架。
优秀的ajax框架很多，这里我们选用axios框架。原因是：Vue官方推荐使用的就是axios框架。
axios框架中文官网：http://www.axios-js.com/

 

2.1.get方式与post方式请求

 

在学习axios之前，首先要知道：http请求方式有两种：get方式、post方式。

 

1. get方式：显式提交。
   将表单内容经过编码之后 ，通过URL发送， 即将提交参数写在URL地址的后面。
   使用get方式发送时有字符长度的限制（因为get方式请求的参数是放在请求头中的），不安全。

2. post方式：隐式提交。
   将表单的内容通过http发送，即不将提交参数写在URL地址的后面，而是封装在请求体中。
   post没有字符长度的限制，安全。（因为post方式请求的参数是放在请求体中的）

 

注意：

 

1. 在早期的、前后端不分离的开发模式中，大量使用表单提交、超链接提交等。那么、表单提交、超链接提交默认都是get方式。只有在表单中明确设置 method="post" 时，才是post提交、

2. 现在的前后端分离开发模式中，已经不再使用表单提交、超链接提交等，而都是使用 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"
}