前端各种安装总结

安装node环境

官网：https://nodejs.org/en/download/

第一步：下载安装文件

下载地址：官网http://www.nodejs.org/download/

第二步：安装nodejs

下载完成之后，双击 node-v0.8.16-x86.msi，开始安装nodejs，默认是安装在C:\Program Files\nodejs下面

其余步骤自行百度：https://www.cnblogs.com/liuqiyun/p/8133904.html

安装完node检查一下是否安装npm：

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

安装vue-cli脚手架

参考安装网址：https://www.cnblogs.com/loveyaxin/p/7094089.html

选用的语法规则为LEslint:airbnb(选第二个ES模板)

Git安装

git安装教程http://124.130.131.90:8001/docs/tools/tools-1ba05p095u72g

git操作http://124.130.131.90:8001/docs/tools/tools-1ba0b9adpqm7c

Iview安装

解释：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

一、在vue根目录下：

命令行输入

 npm install --save iview

二、在main.js中添加了

import iView from 'iview'

import 'iview/dist/styles/iview.css'    // 使用 CSS

Vue.use(iView)

官网：https://www.iviewui.com/

Mockjs安装

解释：Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据

模拟 Ajax 请求，生成并返回模拟数据

基于 HTML 模板生成模拟数据

一、项目路径下执行命令： npm install mock

二、创建mock.js文件，在此文件中引入mockjs

// 引入mockjs

const Mock = require('mockjs');

// 获取 mock.Random 对象

const Random = Mock.Random;

三、main.js下：引入创建的模拟接口的文件地址

// 引入mockjs

require('./example/mock/mock');

四、整体应用：

// 引入mockjs

const Mock = require('mockjs');

// 获取 mock.Random 对象

const Random = Mock.Random;

// mock一组数据

const tableVal = () => {

const tableValue = [];

// for (let i = 0; i < 50; i += 1) {

const newTableObject = {

aNamecardholder: Random.cname(), // 随机生成一个常见的中文姓名

sex: Random.pick(['男', '女']), // 从数组中随机选取一个元素，并返回。

Cardhandlingtime: `${Random.date()} ${Random.time()}`, // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串

FirstCardNumber: Random.natural('00000000000000000000', '99999999999999999999'), // 产生20位的随机数

Contactnumber: Random.natural('00', '9999999999'), // 总次数

Maxday: Random.natural('0', '999'), // 日最大次数

Totalnumber: Random.natural('10000000000', '19999999999'), // 手机号

};

tableValue.push(newTableObject);

// }

return {

tableValue,

};

};

// Mock.mock( url, post/get , 返回的数据)；

Mock.mock('/news/index01', 'post', tableVal);

五、接口地址：

 Mock.mock('/news/index01', 'post', tableVal);

接口地址是自己定义的

Axios安装

解释：接口跨域请求数据

一、项目目录下安装axios:

npm install --save axios

二、配置：min.js下

  import axios from 'axios';

// 把axios加入Vue规则，即Vue.$http就是axios，可以用this.$http直接代表axios，用this.$http可以不限制在本页面,

// 可以在别的页面进行请求数据,这样避免了跨页面传值

Vue.prototype.$http = axios;

三、axios应用

// this.$qs.stringify(params):为固定的写法

// then((res):请求成功后把数据给res,res是自己定义的名称，要有意义

// http://www.abc.com:7452/wp/webapi/tickets/sceniclist:接口的地址，如果没有实际接口，可以在mock中模拟假的

// this.$qs.stringify:将params的请求规则转换成字符串格式

// 在console.log(res.data);里是把请求的数据在控制台打印出来，之后可以随意的用res,res便是通过请求规则求出的数据

this.$http.post('http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist', this.$qs.stringify(params)).then((res) => {

console.log(res.data);

});

与前面mock对应的

this.$http.post('/news/index01', this.$qs.stringify(people)).then((peoples) => {

this.data13 = peoples.data.tableValue;

this.data13[0].Cardnumber = this.Cardnumber;

this.data13[0].CertificateNo = this.CertificateNo;

this.data13[0].Startingtime = this.Startingtime[0];

this.data13[0].Terminationtime = this.Startingtime[1];

this.data13[0].Cardtype = this.Cardtype;

this.data13[0].Cardstatus = this.Cardstatus;

});

四、如何查找浏览器项目的接口地址和接口数据

1、找到接口页面，然后按F12

2、找到Network下的XHR,按F5

3、出现name下的文档数据

4、Headers下的Request URL是接口地址

Preview下的是格式化的数据

Response下的是原始数据

5、接口数据字段：Name下的Headers下的FormData数据

五、请求接口图片并显示在页面（跨域问题）

在config下的index.js里的module.exports下的dev里加入：

proxyTable: {

'/upload': {

target: 'http://www.tshuiwan.com', //目标接口域名

changeOrigin: true, //是否跨域

pathRewrite: {

'^/upload': '/upload' //重写接口

}

}

},

qs安装

用途：在 axios中，利用QS包装data数据

一、安装：在项目目录下：

  npm install qs

二、在main.js目录下：

 // qs为请求规则转换成字符串

import qs from 'qs';

// 同上axios

Vue.prototype.$qs = qs;

三、应用

 // this.$qs.stringify(params):为固定的写法

// then((res):请求成功后把数据给res,res是自己定义的名称，要有意义

// http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist:接口的地址，如果没有实际接口，可以在mock中模拟假的

// this.$qs.stringify:将params的请求规则转换成字符串格式

// 在console.log(res.data);里是把请求的数据在控制台打印出来，之后可以随意的用res,res便是通过请求规则求出的数据

this.$http.post('http://www.tshuiwan.com:7002/wp/webapi/tickets/sceniclist', this.$qs.stringify(params)).then((res) => {

console.log(res.data);

});